笙亿网络策划

HTML 表格怎么制作和使用？

约 17 分钟读完 6 阅
文章导读
Previous Quiz Next HTML 表格以行和列的结构化格式表示数据，例如文本、图像等。
📋 目录
  1. 一 为什么使用 HTML 表格？
  2. 二 创建 HTML 表格
  3. 三 HTML 表格结构 - 行和列
  4. 四 样式化 HTML 表格
  5. 五 表格背景颜色和图片
  6. 六 表格宽度和高度
  7. 七 HTML 嵌套表格
  8. 八 表格相关标签参考
A A

HTML - 表格

Previous
Quiz
Next

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

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

HTML Tables

为什么使用 HTML 表格？

HTML 表格用于各种原因，主要围绕有效组织和呈现数据。一些关键用途包括 −

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

创建 HTML 表格

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

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

  • HTML <table> 标签：此标签用于创建表格，将行和列包裹在其中。
  • HTML <tr> 标签：代表“table row”（表格行），用于在表格中创建一行。
  • HTML <td> 标签：代表“table data”（表格数据），用于在一行中创建标准单元格。
  • HTML <th> 标签：代表“table header”（表格标题），用于在一行中创建标题单元格。

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 表格，从而赋予其自定义外观。你可以创建 class 来为表格应用样式，或者直接编写内部 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 属性

使用 table 标签的属性是一种旧的（已过时）风格。建议您使用 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>

表格相关标签参考

以下是表格相关的标签。您可以点击链接查看特定标签的详细说明，并点击“Try It”来练习其示例：

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