表格的进阶

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
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 列宽由表格宽度和列宽度设定

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog