精通表格

一.colgroup和col标签

这两个标签允许你定义表格列和尽你所需地样式化它们，对于你需要把列排成行或不同着色特别有用，如果没有它们，你需要样式化每一个单独的单元格。

这是一个使用这些标签的例子：

<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>

alternate类的样式将被应用到第二列，或者说每一行的第二个单元格。

你当然可以在colgroup或者col上使用span属性，跟rowspan和colspan有相似的用途

colgroup一起使用可以定义属于列组的行数，比如<colgroup span="2"></colgroup>会组合头两列。当在colgroup使用span时，不应该再使用col标签。

在col里使用span是更明智的，可以，比如，应用在上述例子像这样：

<table>
<colgroup>
<col />
<col span="2" class="alternate" />
</colgroup> ...
这将把alternate类应用到最后两列。

二.摘要和说明插曲

一个简要和容易的提高易用性的思考是，总是为表格应用摘要和说明。

摘要可以在表格起始标签table中用summary属性应用到表格中。这不会显示，但可以辅助非可视化的表格表现。

<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
<caption>Locust mating habits</caption> ...


三.表头、表注和滚动表格的探讨
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>

你可以让表格主体tbody在基于Gecko的浏览器（Mozilla、Firefox和Netscape 6+等）滚动，通过应用overflow: auto; max-height: [whatever] 的样式。然后你可以看见表头和表注固定，而表的主体右边有滚动条。你应该谨慎使用max-height属性因为IE不认识，比较安全的做法是使用height属性，IE将为它应用到每一行。

本电子书整理内容以创作共用授权。原文版权归作者所有，如有转摘请注明原作者以及译者信息。