介绍
表是按行和列组织的一组数据。表格可用于显示数据类型之间的联系，例如产品及其成本、就业和就业日期，或航班和出发时间。在本教程中，您将使用 HTML 创建一个表格，通过添加所需数量的行和列对其进行自定义，并添加行和列标题以使您的表格更易于阅读。
先决条件
- 熟悉HTML。如果您不熟悉 HTML 或需要复习，您可以查看我们如何使用 HTML教程系列的前三个教程。
index.html练习创建 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>
保存您的结果并在浏览器中检查它们。你应该会收到这样的信息：
要添加另一列，请尝试<td>在每个表格行<tr>元素内添加一个额外的表格数据元素：
<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>标签添加的。要添加列标题，您必须在表格顶部插入一个新的 <tr> 元素，您可以在其中使用<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><table>index.html
<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 构建网站。
