HTML之表格布局

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

表1：表格标签及属性

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

图1：colspan和rowspan测试代码

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

图2：colspan和rowspan测试结果

图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所示结果。由图可以看出行组能“穿透”合并的单元格，但是列祖不能。实际上是因为设置body这类标签时，tbody包含的部分会独立出来，而设置col这类标签只是在原来的基础上将列进行“分类”，并不会影响到原本的结构。

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。