编辑“XHTML复杂的表格”

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

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

上面表格的XHTML代码如下：<br>


  <nowiki><table summary="公司花费明细表格"> </nowiki> <br>
  <caption>表格的标题——caption</caption> <br>
  <colgroup>  <br>
  <col id="time" /> <br>
  <col id="event" /> <br>
  <col id="person" /> <br>
  <col id="cost" /> <br>
  </colgroup> <br>
  <thead> <br>
  <tr>  <br>
  <th scope="col">时间th</th>   <br>
  <th scope="col">事件th</th> <br>
  <th scope="col">人物th</th>  <br>
  <th scope="col">花费th</th>  <br>
  </tr> </thead> <tbody> <br>
  <tr class="odd">  <br>
  <td>1</td>  <br>
  <td>小吃部吃饭</td>   <br>
  <td>小强</td>   <br>
  <td>100</td>  <br>
  </tr> <br>
  <tr>  <br>
  <td>2</td> <br>
  <td>大饭店喝酒</td> <br>
  <td>小明</td>   <br>
  <td>3000</td>  <br>
  </tr> <br>
  </tbody><br>
  </table><br>
首先是table标签里的summary属性，它是对真个表格内容的简要概括。 <br>

caption标签，表示表格的标题。<br>


 <colgroup> <br>
 <col id="time" /> <br>
 <col id="event" /> <br>
 <col id="person" /> <br>
 <col id="cost" /> <br>
 </colgroup><br>
以上colgroup将整个表格分为四个列。<br>

 <thead>  <br>
 <tr> <br>  
 <th scope="col">时间th</th>  <br>
 <th scope="col">事件th</th> <br>
 <th scope="col">人物th</th>  <br>
 <th scope="col">花费th</th> <br>
 </tr> <br>
 </thead><br>
thead包裹的内容是表格的头部，就像head标签对整个网页的作用一样。thead里的一行仍然用tr来表示，但是单元格则是用th来表示。<br>

 <tbody>  <br>
 <tr class="odd">  <br>
 <td>1</td>  <br>
 <td>小吃部吃饭</td>  <br>
 <td>小强</td>  <br>
 <td>100</td>  <br>
 </tr>  <br>
 <tr>  <br>
 <td>2</td> <br>
  <td>大饭店喝酒</td>  <br>
 <td>小明</td>  <br> 
 <td>3000</td> <br>
 </tr> <br>
 </tbody><br>

tbody则是表示的身体，类似body标签对整个网页的意义。<br>


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