HTML - 表格

HTML 表格以结构化的格式（包含行和列）表示数据，例如文本、图像等。

HTML 表格提供了一种视觉结构，有助于清晰和理解，使其成为 Web 开发中的基本元素。

为什么使用 HTML 表格？

HTML 表格的使用原因多种多样，主要围绕有效地组织和呈现数据。一些关键用途包括：

结构化数据 - 表格为组织和显示数据提供了连贯的结构，使用户更容易解释信息。
比较性呈现 - 当需要并排比较不同的数据集（例如两个概念之间的差异）时，表格提供了清晰且易于访问的视觉格式。
表格数据表示 - 自然适合以行和列排列的信息（例如时间表、统计数据或价格表）可以使用 HTML 表格很好地表示。

创建 HTML 表格

您可以使用 <table> 标签以及一些定义表格内部结构和内容的标签在 HTML 中创建表格。与 <table> 标签一起使用的主要标签是 <tr>、<td> 和 <th>。

在 HTML 中创建表格涉及多个定义结构和内容的元素。使用的主要标签是 <table>、<tr>、<td> 和 <th>。

HTML <table> 标签：此标签用于创建包含行和列的表格。
HTML <tr> 标签：代表“表格行”，用于在表格中创建一行。
HTML <td> 标签：代表“表格数据”，用于在行中创建标准单元格。
HTML <th> 标签：代表“表格标题”，用于在行中创建标题单元格。

HTML 表格结构 - 行和列

行：HTML 表格中的每一行都使用 `<tr>` 标签定义。它包含一组表格单元格（`<td>` 或 `<th>`），表示该行中的各个元素。
列：实际的数据或标题信息包含在表格单元格中。不同行中相同位置的单元格形成一列。
表格行由 <tr> 标签定义。要设置表格标题，我们使用 <th> 标签。要将数据插入表格单元格，请使用 <td> 标签。
HTML 中的表格由表格行和列内的表格单元格组成。
表格标题由 <th>...</th> 定义。<th> 内的数据是表格列的标题。
每个表格单元格由 <td>...</td> 标签定义。<td> 标签内的数据是表格行和列的内容。
每个表格行都以 <tr> ....</tr> 标签开头。
我们使用样式表为表格创建边框。

示例

考虑一个表格，它表示产品与其各自类别和价格的简单列表。这种基本的表格结构以清晰的表格格式组织数据，使其易于阅读和理解。这里，border 是 <table> 标签的属性，它用于在所有单元格周围放置边框。如果您不需要边框，则可以使用 border="0"。

<!DOCTYPE html>
<html>
<body>
    <table border="1">
    <tr>
       <th>Product</th>
       <th>Category</th>
       <th>Price</th>
    </tr>
    <tr>
       <td>Laptop</td>
       <td>Electronics</td>
       <td>$800</td>
    </tr>
    <tr>
       <td>Bookshelf</td>
       <td>Furniture</td>
       <td>$150</td>
    </tr>
    <tr>
       <td>Coffee Maker</td>
       <td>Appliances</td>
       <td>$50</td>
    </tr>
    </table>
</body>
</html>

样式化 HTML 表格

您还可以使用 CSS 属性对 HTML 表格进行样式设置，以使其具有自定义外观。您可以创建类以将样式应用于表格，也可以简单地编写内部 CSS 属性以设置表格的样式。

示例

在下面的示例中，我们使用一些 CSS 属性对表格进行样式设置，使其更具样式。

<!DOCTYPE html>
<html>
<head>
   <style>
   table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
   }
   th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
   }
   th {
      background-color: #f2f2f2;
   }
   </style>
</head>
<body>
    <h2>HTML Table</h2>
    <p>This table is 3*3 cells including table header.
    <table>
        <tr>
           <th>Header 1</th>
           <th>Header 2</th>
           <th>Header 3</th>
        </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
        <tr>
           <td>Data 4</td>
           <td>Data 5</td>
           <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

表格背景颜色和图像

您可以使用 CSS 和 <table> 标签的属性设置 HTML 表格的背景颜色和背景图像。

使用属性

以下是可与 <table> 标签一起使用的属性，用于设置背景颜色和/或图像

bgcolor：bgcolor 属性设置表格的背景颜色。
```
<table bgcolor="#f0f0f0">
```
background：background 属性设置背景图像。
```
<table background="image.jpg">
```

使用 CSS 属性

使用表格标签的属性是一种旧的（过时的）样式。建议您使用 CSS 对 HTML 表格进行样式设置。background-color 和 background-image 属性分别用于设置背景颜色和图像。

table {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
}

使用属性设置表格背景颜色和图像的示例

这里我们使用 <table> 标签的属性为表格设置背景颜色和图像

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow" background="/images/test.png">
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</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 colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

使用 CSS 设置表格背景颜色和图像的示例

这里我们使用 CSS 属性为表格设置背景颜色和图像

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
   <style>
table {
  background-color: yellow;
  background-image: url('/images/test.png');
}
</style>   
</head>
<body>
    <table>
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</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 colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

表格宽度和高度

可以使用属性或 CSS 属性设置表格的宽度和高度。这些值可以以像素或百分比定义。

使用属性

以下属性可以设置表格的宽度和高度

width：它定义表格的宽度。
```
<table width="80%">
```
height：它定义表格的高度。
```
<table height="200">
```

使用 CSS

以下 CSS 属性可以设置表格的宽度和高度

width：它定义表格的宽度。
```
table { width: 80%; }
```
height：它定义表格的高度。
```
table { height: 400px; }
```

使用属性设置表格宽度和高度的示例

这里我们使用 <table> 标签的属性设置表格的宽度 (80%) 和高度 (400px)

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="80%" height="400">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

使用 CSS 设置表格宽度和高度的示例

这里我们使用 CSS 属性为表格设置宽度 (80%) 和高度 (400px)

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
   <style>
   table{
       width: 80%;
       height: 400px;
   }
   </style>
</head>
<body>
    <table border="1">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

HTML 嵌套表格

嵌套 HTML 表格指的是在表格内创建表格。您可以通过在任何<td>标签内使用<table>标签来在表格内创建表格，这会在主表格的单元格中创建另一个表格。

示例

在下面的示例中，我们正在创建嵌套表格。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nested Tables</title>
</head>

<body>
    <table border=1>
        <tr>
            <td> First Column of Outer Table </td>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
            <td> First Column of Outer Table </td>

        </tr>
    </table>
</body>

</html>

表格相关标签参考

以下是与表格相关的标签。您可以点击链接阅读有关特定标签的信息，并点击“尝试一下”练习其示例。

标签	描述	示例
<table>	用于创建 HTML 表格。	尝试一下
<th>	此标签定义表格的表头。	尝试一下
<tr>	此标签定义表格行。	尝试一下
<td>	此标签用于存储每个单元格的表格数据。	尝试一下
<caption>	此标签指定表格的标题。	尝试一下
<colgroup>	此标签描述表格中一个或多个列的集合，用于格式化。	尝试一下
<col>	此标签用于提供有关列的信息。	尝试一下
<thead>	此标签用于定义表格的表头部分。	尝试一下
<tbody>	此标签用于定义表格的主体部分。	尝试一下
<tfoot>	此标签用于定义表格的脚注部分。	尝试一下

打印页面