| 玩转表格 | (上官无耻)
下面的内容中，让我们一起来了解一些你可能闻所未闻的关于表格的技巧^_^
现在的表格都是由行组成的，它们完成了所有的工作，同时也使得列变得死板。真令人沮丧！
幸运的是，我们可以使用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标签上应用span属性时，指定数量的列将归为一组，举例来说<colgroup span="2"></colgroup>意味着前两列成为一组，需要注意的是，如果你已经在colgroup上使用了span属性，那么就不能在col上使用它们了。
比较而言，在col上应用span属性更加明智一些，比如下面的例子：
<table>
<colgroup>
<col />
<col span="2" class="alternate" />
</colgroup>
...
样式"alternate"将作用于最后两列上。
提示
有一点需要注意，那就是：你只能在列上应用4种样式，borders，backgrounds， width 和 visibility。
微软的IE浏览器在这方面的表现要好于其它的浏览器，它有着一些较为丰富的样式可以运用，这看起来似乎很不错，其实它是在走一条古怪的路，不值得提倡。
注：这里所指的是一些只有IE才能识别的私有属性，无法保证在其它浏览器上的兼容性。
摘要与标题
为表格增添摘要与标题是一种值得鼓励的行为。
我们使用summary属性为table标签增加一段摘要，这段摘要并不会在浏览时被人们所看到，但可以在一些特定情况下为某些设备和请求提供有益的支持。
至于caption属性，我们用来为表格增添标题，该标题默认情况下会规矩的显示在表格的上方，而实际上，我们可以通过设定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 和 可滚动的 table
thead，tfoot和tbody可以让你清楚的区分表格的各个部分，这对于大型表格是很有用处的。同时在打印的时候也很有用，因为位于thead和tfoot中的内容可以重复出现在每一页上。
这几个元素必须按照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应用样式overflow: auto; max-height: [值]从而令tbody出现滚动效果。届时你会发现表格的thead、tfoot部分保持不变，tbody部分出现垂直滚动条。
提示：在IE浏览器下，对thead、tfoot的支持效果不是很好，尤其在打印页面时thead和tfoot部分可能不会出现在每一页上。
无耻：嘿嘿，还是建议大家使用可爱的FireFox吧。
提示
请慎重使用滚动的tbody，因为大多数人还不习惯使用它，有时也可能造成一些误解。
以上文章翻由上官无耻独立翻译，因水平有限，只选取了原文中的主要内容，有所删改。谨供大家参考，如有疑惑，请查阅相关资料，以免误入歧途！^_^
【想更清晰的阅读？原文地址：http://blog.blogchina.com/upload/2005-01-25/2005012522015563633.htm】
| |
|
泉州V23网络为您的企业打造精品网站: 800元起"网站建设+精美网页设计+搜索引擎推广"服务!! 7*24咨询:13559567956
