HTML表格

试一试——示例

表格
如何在HTML文档里定义表格。

表格边框
本例演示了各种不同的表格边框。

（本页底部提供了更多示例）

表格

表格是用<table>标签来定义的。一个表格（table）首先被划分为若干行（通过<tr>标签），然后每一行又被划分为若干个数据单元格（通过<td>标签）。“td”代表“表格数据（table data）”，即数据单元格里的内容。数据单元格里可以容纳文本、图像、列表、段落、表单、水平线、表格等等。

它在浏览器中的显示效果为：

边框属性

如果你没有指定边框属性，那么表格将不显示边框。有时，你需要它不显示边框；但大多数时候，你可能希望显示表格边框。

要显示表格边框，你需要使用border属性：

表格的表头

表格的表头是用<th>标签来定义的。

它在浏览器中的显示效果为：

表格中的空单元格

在很多浏览器中，无内容的空单元格显示效果不是很好。

在浏览器中的显示效果为：

注意：空单元格四周的边框没有显示出来（Firefox浏览器会显示这个边框）。

为避免这一问题，我们可以在空单元格里添加一个非间断空格（&nbsp;），从而令边框可被显示出来：

在浏览器中的显示效果为：

要点——实用技巧

<thead>、<tbody>和<tfoot>等元素很少被用到，因为浏览器对它们的支持不太好。期望在未来版本的XHTML里，这种情况能够有所改观。如果你有IE 5.0或更新版本，那么你可以试试我们XML教程中的实例。

更多示例

无边框表格
本例演示了一个无边框的表格。

表格的表头
本例演示了如何在表格里显示表头。

空单元格
本例演示了如何用“&nbsp;”来解决空单元格的显示问题。

表格标题
本例演示了一个带有标题的表格。

跨越多行或多列的单元格
本例演示了如何指定一个单元格跨越多行或多列。

在表格里嵌入其他元素
本例演示了如何在单元格里嵌入其他HTML元素。

单元格内边距
本例演示了如何通过设置单元格内边距（cell padding）来调节单元格内容与边框之间的空白。

单元格间距
本例演示了如何通过设置单元格间距（cell spacing）来调节单元格之间的距离。

为表格增添背景色或背景图
本例演示了如何给表格添加背景。

给单元格增添背景色或背景图
本例演示了如何给单元格添加背景。

单元格内容对齐
本例演示了如何通过“align”属性将单元格内容对齐，从而得到一个美观的表格。

frame属性
本例演示了如何通过“frame”属性来调节表格四周的边框。

frame及border属性
本例演示了显示如何通过“frame”和“border”属性来调节表格四周的边框。

表格标签