日期:2014-05-17  浏览次数:20789 次

精通HTML表格的使用

作者:?阮一峰

日期:?2009年5月10日

FROM:http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html

制作网页表格,需要使用table标签。

用好table标签并不容易,复杂的表格做起来就很麻烦,比如下面这张表。

我整理了一些HTML表格的高级语法。你可以看看,自己会用多少?

1. 标题和内容描述

表格的标题用caption标签表示,它会自动出现在整张表格的上方。

除了标题以外,对内容的更长描述可以写在table标签的summary属性中。

代码示例(为了便于阅读,tr、th、td省略关闭标签):

<table border="1"
  summary="this table gives some statistics about fruit
   flies: average height and weight, and percentage
     with red eyes (for both males and females).">
 <caption><em>a test table with merged cells</em></caption>
 <tr><th rowspan="2"><th colspan="2">average
 <th rowspan="2">red<br>eyes
 <tr><th>height<th>weight
 <tr><th>males<td>1.9<td>0.003<td>40%
 <tr><th>females<td>1.7<td>0.002<td>43%
</table>

在浏览器中的显示效果如下图:

2. 表头和表尾

从结构上看,表格可以分成表头、主体和表尾三部分,在HTML语言中分别用thead、tbody、tfoot表示。