二十 控制表格 Mastering Tables

你认为你已经了解制作表格。当然，你了解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比其他浏览器有好的表现，因为它在表格方面比CSS方面支持好，比如color，但是，由于原来，唯一原因就是它扮演了古怪角色，对于详细解释，让Hixie来说下。

摘要和标题间隔

在摘要和易用性考虑上，经常在table加上summary摘要和caption标题说明

使用summary属性为表格添加摘要，它不会显示，可以用来帮助没有显示效果的表格。

caption标签在table开始标签后面添加。它会在表格上显示，可以在CSS里面使用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不认识这个属性，所以比使用