表格的进阶

Source

系列文章目录

前端系列文章——传送门
HTML系列文章——传送门



html 结构

表格标题

<caption>标题内容</caption>

数据行分组

<thead>表头</thead>
<tbody></tbody>      表体必需存在的标签

<tfoot></tfoot>      表尾

说明:一个 Table 中,只能包含一个 thead,一个 tfoot,
但可包含多个 tbody,tbody 标签是写表格时必备的标签

数据列分组

<colgroup></colgroup>

css 样式 — table

  1. border-collapse 样式,规定是否合并表格边框

    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性

    collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

  2. border-spacing 样式,规定相邻单元格边框之间的距离

    length 数值

  3. caption-side 样式,规定表格标题的位置

    top | bottom

  4. empty-cells 样式,规定是否显示表格中的空单元格上的边框和背景

    hide 不在空单元格周围绘制边框

    show 在空单元格周围绘制边框。默认

  5. table-layout 样式,设置完成表布局时所用的布局算法

    自动表格布局:automatic 默认。列宽度由单元格内容设定

    固定表格布局: fixed 列宽由表格宽度和列宽度设定