【0015】HTML表格标签详解

HTML表格标签及单元格合并详解

最新推荐文章于 2025-09-21 14:17:20 发布

原创最新推荐文章于 2025-09-21 14:17:20 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

【01】HTML 专栏收录该内容

15 篇文章

订阅专栏

如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！

本文内容体系结构如下：
在这里插入图片描述

本文我们将深入学习HTML中用于创建表格的标签，并重点探讨如何合并表格单元格的内容。表格是网页中展示数据的一种常见形式，它可以帮助我们清晰地组织和展示信息。通过文的学习，你将掌握如何创建和配置HTML表格，以及如何合并单元格以创建更复杂的表格布局。

一、表格的基本结构

HTML表格由<table>标签定义，它包含了行（<tr>）、单元格（<td>和<th>）等子元素。以下是表格的基本结构：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <!-- 更多表头 -->
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <!-- 更多数据 -->
  </tr>
  <!-- 更多行 -->
</table>

<table>：定义表格的开始和结束。
<tr>：定义表格中的一行。
<th>：定义表格头部单元格，通常用于表头信息，文本默认加粗并居中（但样式可由浏览器或用户设置改变）。
<td>：定义表格中的标准单元格，用于存放数据。
<caption>：定义表格标题。

二、表格标签的详细解释

2.1 `<table>` 标签

<table>标签用于创建一个表格。它可以有多个属性，但最常用的属性（尽管在现代网页设计中更推荐使用CSS来控制样式）包括：

border：设置表格边框的宽度（以像素为单位）。
width 和 height：设置表格的宽度和高度（可以使用像素或百分比）。
cellpadding：设置单元格内容与单元格边框之间的空间（已废弃，推荐使用CSS）。
cellspacing：设置单元格之间的空间（已废弃，推荐使用CSS）。
align：指定表格相对于其周围元素的对齐方式。该属性可以接受left（左对齐）、right（右对齐）或center（居中对齐）作为值已废弃，推荐使用CSS）。

2.2 `<tr>` 标签

<tr>标签用于定义表格中的一行。每一行都由一个<tr>元素包裹，并且必须位于<table>标签内部。tr标签也可以设置align属性，用来设置行里内容的对齐方式。

2.3 `<th>` 和 `<td>` 标签

<th>和<td>标签都用于定义单元格，但它们的用途不同：

<th>：用于定义表头单元格，通常位于表格的第一行或第一列。表头单元格中的文本默认会加粗并居中显示（但样式可能受浏览器或用户设置影响），以便与表格中的数据单元格区分开来。
<td>：用于定义表格中的标准数据单元格。该标签也可以设置align属性，用来控制某个单元格中内容对齐方式。

2.4 `<caption>`标签

<caption>标签虽然不是必须的，但为表格添加标题可以提高表格的可读性和可访问性。使用<caption>标签可以在表格上方添加标题。

2.5 表格标签示例

创建一个4行5列的表格，表格标题为“表格示例”，边框粗细为1px,，宽度500px，高度400px，表格在浏览器中居中显示，单元格之间的空间为0，单元格内容与单元格边框之间的空间为5px。代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
	</head>
	<body>
		<table border="1px" width="500px" height="400px" cellspacing="0" cellpadding="5px" align="center">
			<caption>表格示例</caption>
			<tr>
				<th>1-1</th>
				<th>1-2</th>
				<th>1-3</th>
				<th>1-4</th>
				<th>1-5</th>
			</tr>
			<tr align="center">
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
				<td>2-5</td>
			</tr>
			<tr>
				<td align="center">3-1</td>
				<td>3-2</td>
				<td>3-3</td>
				<td>3-4</td>
				<td>3-5</td>
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<td>4-3</td>
				<td>4-4</td>
				<td>4-5</td>
			</tr>
		</table>
	</body>
</html>

在浏览器中显示效果如下图所示：
在这里插入图片描述

三、单元格合并

在HTML表格中，你可以使用colspan和rowspan属性来合并单元格。

3.1 `colspan` 属性实现列合并

colspan属性用于水平合并单元格，即跨越多个列。它只能用于<td>或<th>标签，并且其值表示要跨越的列数。在合并的多个列中的第一列单元格上定义colspan属性，要合并多少列，colspan属性值就写几，后面被合并的列的单元格不需要再定义。

示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Demo</title>
	</head>
	<body>
		<table border="1" width="500px" height="300px" cellspacing="0">
			<tr>
				<th>表头1</th>
				<th>表头2</th>
				<th>表头3</th>
			</tr>
			<tr>
				<td colspan="2">合并的单元格</td>
				<td>数据3</td>
			</tr>
			<tr>
				<td>数据1</td>
				<td>数据2</td>
				<td>数据3</td>
			</tr>
		</table>
	</body>
</html>

在这个例子中，第二行的第一个单元格跨越了两列。
在这里插入图片描述

3.2 `rowspan` 属性实现行合并

rowspan属性用于垂直合并单元格，即跨越多个行。它也只能用于<td>或<th>标签，并且其值表示要跨越的行数。在合并的多个行中的第一行单元格上定义rowspan属性，要合并多少行，rowspan属性值就写几，后面被合并的行的单元格不需要再定义

示例：

<table border="1">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td rowspan="2">合并的单元格</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <tr>
    <td>数据2（下）</td>
    <td>数据3（下）</td>
  </tr>
</table>