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等标签测试结果

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180719G0DD1H00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券