在实际的网页设计过程中，可能需要呈现一个比较复杂的表格。例如：

表格的标题——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标签对整个网页的意义。

将上面的代码组合起来就是刚开始的那个表格了。