XHTML教程补充——复杂的表格
在实际的网页设计过程中，可能需要呈现一个比较复杂的表格。例如：
表格的标题——caption
| 时间th |
事件th |
人物th |
花费th |
| 1 |
小吃部吃饭 |
小强 |
100 |
| 2 |
大饭店喝酒 |
小明 |
3000 |
上面表格的XHTML代码如下： <table summary="公司花费明细表格">
<caption>表格的标题——caption</caption>
<colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
<thead>
<tr>
<th scope="col">时间th</th>
<th scope="col">事件th</th>
<th scope="col">人物th</th>
<th scope="col">花费th</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>小吃部吃饭</td>
<td>小强</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>大饭店喝酒</td>
<td>小明</td>
<td>3000</td>
</tr>
</tbody>
</table>
首先是table标签里的summary属性，它是对真个表格内容的简要概括。
caption标签，表示表格的标题。 <colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
以上colgroup将整个表格分为四个列。 <thead>
<tr>
<th scope="col">时间th</th>
<th scope="col">事件th</th>
<th scope="col">人物th</th>
<th scope="col">花费th</th>
</tr>
</thead>
thead包裹的内容是表格的头部，就像head标签对整个网页的作用一样。thead里的一行仍然用tr来表示，但是单元格则是用th来表示。 <tbody>
<tr class="odd">
<td>1</td>
<td>小吃部吃饭</td>
<td>小强</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>大饭店喝酒</td>
<td>小明</td>
<td>3000</td>
</tr>
</tbody>
tbody则是表示的身体，类似body标签对整个网页的意义。
将上面的代码组合起来就是刚开始的那个表格了。
|
