XHTML复杂的表格

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

表格的标题——caption 时间th 事件th 人物th 花费th
1 小吃部吃饭 小强 100
2 大饭店喝酒 小明 3000

上面表格的XHTML代码如下：

 <table summary="公司花费明细表格">  

表格的标题——caption
<colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
<thead>

时间th
事件th
人物th
花费th
</thead> <tbody>

1
小吃部吃饭
小强
100


2
大饭店喝酒
小明
3000

</tbody>

首先是table标签里的summary属性，它是对真个表格内容的简要概括。

caption标签，表示表格的标题。

<colgroup> 

<col id="time" /> 

<col id="event" /> 

<col id="person" /> 

<col id="cost" /> 

</colgroup>

以上colgroup将整个表格分为四个列。

<thead>  

时间th
事件th
人物th
花费th

</thead>
thead包裹的内容是表格的头部，就像head标签对整个网页的作用一样。thead里的一行仍然用tr来表示，但是单元格则是用th来表示。
<tbody>

1
小吃部吃饭
小强
100


2
大饭店喝酒
小明
3000

</tbody>
tbody则是表示的身体，类似body标签对整个网页的意义。
将上面的代码组合起来就是刚开始的那个表格了。