本文主要讨论表格的布局及美化。首先我们通过表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。图7：有col、tbody等标签测试代码如图7所示，如果代码中含有col、tbody等标签，会得到图8所示结果。由图可以看出行组能“穿透”合并的单元格，但是列祖不能。实际上是因为设置tbody这类标签时，tbody包含的部分会独立出来，而设置col这类标签只是在原来的基础上将列进行“分类”，并不会影响到原本的结构。图8：有col、tbody等标签测试结果
转载请注明：http://www.aierlanlan.com/grrz/7724.html
