控制
你认为你已经了解制作表格。当然,你了解table
,tr
,td
和th
标签,已经知道rowspan
和colspan
属性。你可以制作一个可爱小巧的plywood coffee table,但是难道你不想了解怎么制作一个漂亮的实心木质表格,可以承受大象重量的玻璃板表格?
纵列回归
表格行导致表格列看起来十分愚蠢。它们承担了所有工作,表格只是使用行建立,排除了纵列。
幸运的是热心纵列的盼来了colgroup
和col
标签。
上面两个标签允许你定义纵列和增加你想要的样式,当你要排列纵列和使用不同颜色非常有用,如果没有它们,你就需要增加个体单元cell的样式。
下面就是一个例子:
<table><colgroup><col /><col class="alternate" /><col /></colgroup><tr><td>This</td><td>That</td><td>The other</td></tr><tr><td>Ladybird</td><td>Locust</td><td>Lunch</td></tr></table>
class"alternate"的样式被应用与第二列或者没行的第二个单元。
你同样可以在colgroup
和col
使用span
属性,方法同rowspan
和colspan
。
使用colgroup
定义了拥有列组的行的数目,例子<colgroup span="2"></colgroup>
将组合前两列。当span出现在colgroup
,就不需要col
标签。
在col
标签使用span比较明智,可能像下面应用一样:
<table><colgroup><col /><col span="2" class="alternate" /></colgroup>...
'alternate'属性应用在最后两列上。
对列唯一可以添加的样式就是borders, backgrounds, width and visibility.
IE比其他浏览器有好的表现,因为它在表格方面比方面支持好,比如color
,但是,由于原来,唯一原因就是它扮演了古怪角色,对于详细解释,让Hixie来说下。
摘要和标题间隔
在摘要和易用性考虑上,经常在table加上summary摘要和caption标题说明
使用summary
属性为表格添加摘要,它不会显示,可以用来帮助没有显示效果的表格。
caption
标签在table
开始标签后面添加。它会在表格上显示,可以在里面使用caption-side
定义top
,right
,bottom
和left
,尽管IE不管这些。
<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards"><caption>Locust mating habits</caption>...
Headers, footers and the quest for the scrolling table
thead
,tfoot
和tbody
允许你把表格分成头部,底部和身体部分。这对大型表格非常有用,当为一个列子印刷时,头部和底部行可以在出现在每个页面。
三个元素必须注意顺序 thead
-tfoot
-tbody
。
<table><thead><tr><td>Header 1</td><td>Header 2</td><td>Header 3</td></tr></thead><tfoot><tr><td>Footer 1</td><td>Footer 2</td><td>Footer 3</td></tr></tfoot><tbody><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>...</tbody></table>
在mozilla浏览里还可以设置tbody元素为scroll滚动,通过使用样式overflow:auto;max-height:[随便]
。你可以发现头部和底部保持原来位置,而身体部分右边会出现滚动条。你必须使用max-height
属性,因为IE不认识这个属性,所以比使用height
属性安全。
注意:回到浏览器差异,此时IE即没有线索说到头部和底部,尽管在表格里出现,也不会在每个印刷页面的头部和底部出现,更不说提供滚动表格。
要机警使用滚到表格。尽管它非常有用途,大部分用户却不使用它们,用户相信线上表现的数据才是唯一有用的数据。