前端三剑客
HTML

HTML 表格

# HTML 表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

# 表格元素的基本组成

<table>：定义表格的起始和结束。
tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格生成器：https://www.jyshare.com/front-end/7688/ (opens new window)

# 1. HTML 表格实例1

HTML 表格的基本结构包含以下几个部分：

<thead>：定义表格的标题部分，包含表头。
<tbody>：定义表格的主体部分，包含数据行。
<tfoot>：定义表格的底部部分，通常用于总结信息。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

以上的表格实例代码中，<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

我们也可以使用 CSS 来进一步自定义表格的样式和外观。

# 2. HTML 表格实例2

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

每个表格从一个 table 标签开始。每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。

# 3. HTML 表格实例3

如果不定义边框属性，表格将不显示边框。使用 border 属性来显示一个带有边框的表格。

<table border="1">
    <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>

1
2
3
4
5
6
7
8
9
10

# 4. HTML 表格边框（border）

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

1
2
3
4
5
6

# 5. HTML 表格表头（th）

表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在浏览器显示如下：

# 6. 合并单元格

合并单元格在 HTML 表格中是通过使用 colspan 和 rowspan 属性来实现的。以下是合并单元格的一些技巧：

合并单元格的步骤

确定起始单元格：找到需要合并的单元格的起始位置，即要在 <td> 标签上添加合并属性的单元格。
选择合并方向：决定是横向合并还是纵向合并。
- 横向合并：使用 colspan 属性，表示将当前单元格跨越几列。
- 纵向合并：使用 rowspan 属性，表示将当前单元格跨越几行。
添加合并属性：将 colspan 或 rowspan 属性添加到起始单元格的 <td> 标签中，指定合并的列数或行数。
移除多余单元格：在起始单元格所在的行或列中移除多余的单元格，因为这些位置已经被合并。

# 1. 横向合并单元格 (`colspan`)

colspan 属性用于将同一行中的多个单元格合并为一个单元格。

语法：

<td colspan="列数">内容</td>

示例：

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td colspan="2">Row 1, Cell 2 and 3 (colspan)</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个示例中，第二行的第二个单元格使用 colspan="2"，合并了当前行的第二列和第三列，使其成为一个单元格。

# 2. 纵向合并单元格 (`rowspan`)

rowspan 属性用于将同一列中的多个单元格合并为一个单元格。

语法：

<td rowspan="行数">内容</td>

示例：

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Row 1 and 2, Cell 1 (rowspan)</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这个示例中，第二行的第一个单元格使用 rowspan="2"，合并了当前列的第二行和第三行，使其成为一个单元格。

# 7. HTML 表格标签

# 8. 完整表格实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格合并单元格示例</title>
    <style>
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>

    <h1>表格合并单元格示例</h1>

    <table>
        <!-- 表格标题部分 -->
        <thead>
            <tr>
                <th>列标题1</th>
                <th>列标题2</th>
                <th>列标题3</th>
            </tr>
        </thead>
        <!-- 表格主体部分 -->
        <tbody>
            <tr>
                <td>行1，列1</td>
                <td>行1，列2</td>
                <td>行1，列3</td>
            </tr>
            <tr>
                <td>行2，列1</td>
                <td>行2，列2</td>
                <td>行2，列3</td>
            </tr>
            <tr>
                <td>行3，列1</td>
                <td>行3，列2</td>
                <td>行3，列3</td>
            </tr>
        </tbody>
        <!-- 表格底部部分，合并单元格 -->
        <tfoot>
            <tr>
                <td colspan="3">这是一个合并了所有列的单元格</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

表格结构：表格包含 <thead>, <tbody>, 和 <tfoot> 三个部分。
表头：在 <thead> 中使用 <th> 标签定义列的标题，使其在表格中以粗体显示。
主体部分：在 <tbody> 中使用 <tr> 标签定义行，并在每行中使用 <td> 标签定义单元格数据。
底部部分：在 <tfoot> 中使用 <td colspan="3"> 合并所有列的单元格，跨越整个表格的宽度。

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML 图像 HTML 列表→