更新时间:2014年8月10日

table元素(表格)

<table>~</table>

table元素用于制作表格。

表格的基本构造:表格的头部(这里简称表头)、本体、脚部。

table元素中使用thead元素标记表格的标题。thead元素中使用tr元素标识行,然后再行内使用th元素增加表格头的单元格。

thead元素的后面,用tbody元素表示表格的主体部分(本体)。tbody元素中使用tr元素标识表格的行,使用td元素把行分隔成多个单元格。

表格的脚部使用tfoot元素表示。thead元素、tfoot元素、tbody元素可以省略,但是如果有会使表格构造更鲜明。

table元素中还可以使用caption元素添加表格的标题或说明文。

不推荐使用表格进行网页的布局,当有特殊情况时需要进行网页布局时,必须在table元素中使用role="presentation"

属性

border内容属性
规定表格边框的宽度

使用例

<table border="1">

<caption>列集合的使用</caption>

<thead>

<tr>

<th>集合A</th>

<th colspan="2">集合B</th>

<th colspan="2">集合C</th>

</tr>

</thead>

<tbody>

<tr>

<td>集合A</td>

<td>集合B</td><td>集合B</td>

<td>集合C</td><td>集合C</td>

</tr>

<tr>

<td>集合A</td>

<td>集合B</td><td>集合B</td>

<td>集合C</td><td>集合C</td>

</tr>

<tr>

<td>集合A</td>

<td>集合B</td><td>集合B</td>

<td>集合C</td><td>集合C</td>

</tr>

</tbody>

</table>

浏览器上的显示结果↓


列集合的使用
集合A 集合B 集合C
集合A 集合B集合B 集合C集合C
集合A 集合B集合B 集合C集合C
集合A 集合B集合B 集合C集合C
X

浏览器支持情况

元素
table yes yes yes yes yes