HTML 表格属性

Begindev 编辑部 March 25, 2026

虽然基础的 <table>, <tr>, <th>, 和 <td> 标签为创建表格提供了地基，但属性（Attributes） 允许你控制它们的外观和布局。

在本章中，我们将探索三个必不可少的表格属性：border（边框）、colspan（跨列）和 rowspan（跨行）。理解这些属性将让你能更好地掌控表格的外观以及数据在其中的展示方式。

1. `border` 属性：设置边框

border 属性指定了围绕表格及其单元格的边框宽度。

虽然在今天的现代开发中，CSS 是设置表格样式的首选方法，但理解 border 属性可以提供历史背景，并且在快速制作原型或处理旧代码时非常有用。

1.1 基本用法

border 属性直接添加到 <table> 标签上。其值代表边框的宽度（以像素为单位）。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
  </tr>
</table>

在这个例子中，表格的周围以及每个单元格的周围都会有一个 1 像素宽的边框。

1.2 重要考量

HTML5 与 CSS：在现代 Web 开发中，最佳实践是使用 CSS 来设置样式（包括表格边框）。border 属性被认为是一个表现层的属性，而 CSS 提供了更多的灵活性和控制力。
CSS 等效写法：border="1" 的 CSS 等效代码是 table, th, td { border: 1px solid black; border-collapse: collapse; }。其中 border-collapse: collapse;属性非常重要，它可以防止出现双重边框。
无障碍性：边框可以提高表格的可读性，特别是对于视力受损的用户。请确保边框颜色和背景颜色之间有足够的对比度。

1.3 CSS 样式示例（推荐做法）

下面是如何使用 CSS 达到与上一个例子相同的效果：

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse; /* 合并边框，避免双线 */
}
</style>
</head>
<body>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
  </tr>
</table>

</body>
</html>

这种方法将结构（HTML）与表现（CSS）分离，使你的代码更易于维护和设置样式。

2. `colspan` 属性：跨列（合并列）

colspan 属性指定一个单元格应该横跨的列数。

这对于创建横跨多列的标题，或者合并单元格以创建特定的布局非常有用。

基本用法

colspan 属性可以添加到 <th> 或 <td> 标签上。其值代表该单元格应该占据的列数。

<table border="1">
  <tr>
    <th colspan="2">个人信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>年龄</td>
    <td>30</td>
  </tr>
</table>

在这个例子中，“个人信息”这个标题横跨了两列，有效地居中显示在“姓名”和“年龄”列的上方。

2.1 高级用法

你可以使用 colspan 来创建更复杂的表格布局。例如，你可以创建一个横跨整个表格宽度的主标题，以及横跨部分表格的副标题。

<table border="1">
  <tr>
    <th colspan="4">员工详情</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>工程部</td>
    <td>Email:</td>
    <td>zhangsan@example.com</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>市场部</td>
    <td>电话:</td>
    <td>555-123-4567</td>
  </tr>
</table>

解析：

“员工详情”横跨了所有 4 列。
“联系方式”横跨了 2 列。

2.2 注意事项

表格结构：使用 colspan 时，请确保每一行中占据的列总数是一致的。不一致的列跨度会导致表格布局错乱。
无障碍性：确保即使使用了 colspan，表格结构在逻辑上仍然清晰。

3. `rowspan` 属性：跨行（合并行）

rowspan 属性指定一个单元格应该竖跨的行数。

这对于创建覆盖多行的单元格非常有用，例如适用于多个数据条目的标签或分类。

3.1 基本用法

rowspan 属性可以添加到 <th> 或 <td> 标签上。其值代表该单元格应该占据的行数。

<table border="1">
  <tr>
    <th>分类</th>
    <th>项目</th>
  </tr>
  <tr>
    <td rowspan="2">水果</td>
    <td>苹果</td>
  </tr>
  <tr>
    <td>香蕉</td>
  </tr>
  <tr>
    <td rowspan="2">蔬菜</td>
    <td>胡萝卜</td>
  </tr>
  <tr>
    <td>西蓝花</td>
  </tr>
</table>

在这个例子中，“水果”和“蔬菜”这两个分类各自横跨了两行，将对应的项目分组在一起。

高级用法：组合使用 `rowspan` 和 `colspan`

你可以结合使用这两个属性来创建复杂的布局。

<table border="1">
  <tr>
    <th></th>
    <th colspan="2">平均值</th>
  </tr>
  <tr>
    <th>类别</th>
    <th>身高</th>
    <th>体重</th>
  </tr>
  <tr>
    <td rowspan="2">男性</td>
    <td>1.8m</td>
    <td>80kg</td>
  </tr>
  <tr>
    <td>1.75m</td>
    <td>75kg</td>
  </tr>
  <tr>
    <td rowspan="2">女性</td>
    <td>1.65m</td>
    <td>60kg</td>
  </tr>
   <tr>
    <td>1.60m</td>
    <td>55kg</td>
  </tr>
</table>

解析：

“平均值”横跨了 2 列。
“男性”和“女性”各自横跨了 2 行。

4. 总结

在本章节中，我们了解了 HTML 表格的三个核心属性：

border：控制边框（虽然现在多用 CSS）。
colspan：让单元格横向合并（跨列）。
rowspan：让单元格纵向合并（跨行）。

1. border 属性：设置边框