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