table 表格

最新推荐文章于 2023-09-27 13:21:26 发布

原创最新推荐文章于 2023-09-27 13:21:26 发布 · 420 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了HTML表格的使用，包括设置宽度、高度对表格的影响，thead、tbody、tr、th、td等元素的作用，以及colspan和rowspan实现单元格合并的方法。还提到了table的样式控制，如border-collapse、border-spacing属性以及单元格的垂直对齐方式。此外，文章还讨论了如何清除表格的默认样式，以实现更精确的布局。

table 表格

table 设置宽度之后，宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

thead 表格头部

tbody 表格主体

tr 行

th 单元格(加粗，居中)

td 单元格

colspan 横向合并单元格

rowspan 纵向合并单元格

td,th 不支持margin

tr，thead，tbody 不支持margin和padding

border-spacing:0; 单元格间距为0（IE6，7不支持）

border-collapse:collapse; 合并边框

单元格中的内容默认垂直居中,可通过设置vertical-align进行修改

单元格设置宽度，一竖列宽度都变，单元格设置高度，一横行高度都变

表格清除默认样式：

table{border-collapse：collapse；}

td，th{padding：0；border：1px；}

border 属性：

separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。