HTML表格

使用HTML可以创建表格。

示例

表格：

这个例子说明了如何在HTML页面中创建表格。

表格边框：

这个例子显示了不同的表格边框。

在这个页面的底部，还有更多例子。

表格

表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和border属性

如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。

想要显示一个有边框的表格，需要使用border属性。

表格头

表格头使用<th>标签指定。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

在多数浏览器中，没有内容的单元格显示得不太好。

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1

注意一下空单元格的边框没有显示出来。为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1

基本注意点——有用的技巧

通常很少使用<thead>，<tbody>，<tfoot>标签，因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。

更多示例：

没有边框的表格：

这个例子显示了一个没有边框的表格。

表格头：

这个例子说明了如何显示表格头。

空单元格：

这个例子说明了如何使用“ ”来支撑没有内容的单元格。

有标题的表格：

这个例子说明了如何创建一个有标题的表格。

单元格跨行（列）的表格：

这个例子显示了如何定义跨行或者跨列的单元格。

表格内的其他标签：

这个例子说明了如何在元素中显示其他元素。

cellpadding属性：

这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。

cellspacing属性：

这个例子说明了如何使用cellspacing属性来增加单元格间距。

给表格增加背景色或者背景图像：

这个例子说明了如何给表格增加背景。

给表格增加背景色或者背景图像：

这个例子说明了如何给一个或多个单元格增加背景。

给单元格内容设置对齐方式：

这个例子说明了如何使用“align”属性来设置单元格的对齐方式，让表格好看一些。

frame属性：

这个例子说明了如何使用“frame”属性来控制表格周围的边框。