如何在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 构建网站