如何在HTML中创建表格

介绍

表是一组按行和列组织的数据。表格可用于显示数据类型之间的联系，例如产品及其成本、就业和雇用日期，或航班和出发时间。在本教程中，您将使用 HTML 创建一个表格，通过添加所需数量的行和列对其进行自定义，并添加行和列标题以使您的表格更易于阅读。

先决条件

熟悉HTML。如果您不熟悉 HTML 或需要复习，可以查看我们的如何使用 HTML 教程系列的前三个教程。
用于练习创建 HTML 表格的 index.html 文件。如果您不知道如何创建 index.html 文件，请按照我们的简短教程如何设置 HTML 项目中的说明进行操作。

HTML 表格的基础知识

创建一个 HTML 表格，其中包含一个开始 <table> 标记和一个结束 </table> 标记。在这些标签中，数据通过使用打开和关闭表行<tr>标签和打开和关闭表数据<td>标签组织成行和列。

表格行 <tr> 标签用于创建一行数据。在开闭表<tr>标签内，开闭表数据<td>标签用于按列组织数据。

例如，这是一个有两行三列的表：

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

要探索 HTML 表格在实践中的工作方式，请将上面的代码片段粘贴到 index.html 文件或您在本教程中使用的其他 html 文件中。

在浏览器中保存并重新加载文件以检查结果。（有关在浏览器中加载文件的说明，请访问我们关于 HTML 元素的教程的此步骤。）

您的网页现在应该有一个包含三列和两行的表格：

要添加额外的行，请将突出显示的 <tr> 元素添加到表格底部：

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

保存结果并在浏览器中查看。您应该会收到如下信息：

要添加另一列，请尝试在每个表格行 <tr> 元素内添加一个额外的表格数据 <td> 元素：

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

保存结果并在浏览器中查看。您的网页应显示一个三行四列的表格：

为表格添加边框

一般来说，表格的样式应该是 CSS。如果您不了解 CSS，您可以通过将属性添加到 <table> 元素来使用 HTML 添加一些轻量样式。例如，您可以使用 border 属性为表格添加边框：

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

将突出显示的边框属性添加到您的表格并在浏览器中检查您的结果。（您可以清除您的 index.html 文件并粘贴到上面的 HTML 代码片段中。）保存您的文件并将其加载到浏览器中。您的表格现在应该有一个围绕您的每一行和每一列的边框，如下所示：

向行和列添加标题

可以将标题添加到行和列以使表格更易于阅读。表格标题自动使用粗体和居中文本设置样式，以便在视觉上将它们与表格数据区分开来。标题还使表格更易于访问，因为它们可以帮助使用屏幕阅读器的个人浏览表格数据。

通过使用打开和关闭 <th> 标记添加标题。加上柱子标题，您必须插入一个新的

表格顶部的元素，您可以在其中添加列名<th>标签。

清除 index.html 文件并使用以下代码段添加一行列标题：

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

保存 index.html 文件并在浏览器中重新加载。您应该会收到如下信息：

您的网页应显示单行列标题。请注意，第一列标题为空。如果您愿意，可以在此处添加列标题。

要添加行标题，您必须添加开始和结束 <th> 标记作为每个表格行 <tr> 元素中的第一项。通过在 ' 结束 </tr> 标记和 index.html 中表格的结束 <table> 标记之间添加突出显示的代码片段来添加行标题和数据文件：

<table border="1">
 <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
  <tr>
    <th>Row Header 1</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr> 
    <th>Row Header 2</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
 <tr> 
    <th>Row Header 3</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
</table>

保存 index.html 文件并在浏览器中重新加载。您应该会收到如下信息：

您现在应该有一个包含三个列标题和三个行标题的表。

结论

在本教程中，您创建了一个 HTML 表格，添加了额外的行和列，并为行和列创建了标题。

如果您有兴趣了解有关 HTML 的更多信息，可以查看我们的教程系列如何使用 HTML 构建网站。要了解如何使用 CSS 设置 HTML 元素（包括表格）的样式，请访问我们的教程系列如何使用 CSS 构建网站。