详解HTML表格

作用：数据的展示，表格应用场景.

table> 表格 tr> 行 td> 单元格

格式：

table>
    　　caption>
    .../caption>
    !-表格标题，居中显示-->
    　　tr>
    　　　　th>
    .../th>
    ...　!-表格头，内容居中，加粗显示-->
    　　　/tr>
    　　tr>
    　　　　td>
    .../td>
    ...　　/tr>
    /table>
    

表格结构标签：加载一部分 显示一部分 更加便利.

划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局

table>
    　　caption>
    .../caption>
    　　thead>
    　　tr>
    　　　　th>
    .../th>
    ...　!-表格头，内容居中，加粗显示-->
    　　　/tr>
    　　/thead>
    　　tbody>
    　　tr>
    　　　　td>
    .../td>
    ...　　/tr>
    　　/tbody>
    　　tfoot>
    　　tr>
    　　　　td>
    .../td>
    ...　　/tr>
    　　/tfoot>
    /table>
    

table标签属性

tr 标签属性

table>
    　　tr>
    　　　　td colspan="2">
     .../td>
    　　　　td>
     .../td>
    　　/tr>
    　　 tr>
    　　　　td>
    .../td>
    　　　　td>
    .../td>
    　　　　td>
    .../td>
    　　/tr>
    /table>
    

table>
    　　tr>
    　　　　td>
     .../td>
    　　　　td rowspan="2">
     .../td>
    　　/tr>
    　　 tr>
    　　　　td>
    .../td>
    　　　　td>
    .../td>
    　　　　td>
    .../td>
    　　/tr>
    /table>
    

说明：1.完整表格结构 2.放到td> 标签中

table>
    　　tr>
    　　　　td>
     .../td>
    　　　　td>
    　　　　　　　　table>
    　　　　　　　　tr>
    　　　　　　　　　　td>
     .../td>
    　　　　　　　　　　td>
    ./td>
    　　　　　　　　/tr>
    　　　　　　/table>
    　　　　/td>
    　　/tr>
    /table>
    

1.尽量少的使用表格嵌套。

2.尽量少的使用表格跨行跨列 。

增加代码的整体维护成本 。

使用表格进行网页结构布局一般不设置border

到此这篇关于详解HTML表格的文章就介绍到这了,更多相关HTML表格内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！