HTML之表格布局与美化

本文主要讨论表格的布局及美化。首先我们通过表1来看HTML中表格包含哪些标签及属性以及表2中表格的css属性。

表1：表格标签及属性

表2：表格css属性

其中有几个属性是我们常用来实现表格布局及美化的：

1、rowspan和colspan分别规定单元格横跨的行数和列数，其作用于标签th、td，这是改变表格布局的两个重要属性。

图1：colspan和rowspan测试代码

以图1中代码为例，我们给不同的td分别设置了rowspan、colspan、rowspan和colspan属性，得到了图2的结果。（ps：table默认有cellpadding、cellspacing，因此可以看到单元格之间有空隙）

图2：colspan和rowspan测试结果

2、frame和rules分别规定外侧边框和内侧边框的显示部位。

图3：frame和rules测试代码

以图2中代码为例，在图1代码基础上加入了frame和rules属性，得到图4结果。（ps：当table有设置rules属性时，table的border-collapse（css属性）默认值会变成collapse（单元格边框合并））

图4：frame和rules测试结果

其中rules属性值groups值得注意，它规定行组和列祖之间有边框。一般使用col和colgroup来规定列祖，使用thead、tbody、tfoot来规定行组。

图5：无col、tbody等标签测试代码

如果table中没有上述规定行组和列祖的标签时（如图5代码所示），表格不显示边框，测试结果如图6。

图6：无col、tbody等标签测试结果

图7：有col、tbody等标签测试代码

如图7所示，如果代码中含有col、tbody等标签，会得到图8所示结果。由图可以看出行组能“穿透”合并的单元格，但是列祖不能。实际上是因为设置tbody这类标签时，tbody包含的部分会独立出来，而设置col这类标签只是在原来的基础上将列进行“分类”，并不会影响到原本的结构。

图8：有col、tbody等标签测试结果