HTML表格用于在网页上显示表格数据。它们非常适合以有组织的方式显示信息，并且可以使用 CSS 设置样式以匹配我们网站的外观和感觉。在本教程中，我们将介绍创建 HTML 表和添加样式以使其响应迅速且适合移动设备的基础知识。
创建 HTML表格
要创建一个 HTML 表，我们需要使用标签。在标签内部，我们需要创建一个或多个标签，这些标签定义了表的每一行。在每个标签中，我们可以创建一个或多个标签，用于定义表格的单元格。下面是一个基本 HTML 表的示例：<table><table><tr><tr><td>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
这将创建一个包含两行三列的表格，每个单元格显示其内容。
添加行和列
要向表中添加新行，我们只需要创建一个新标签。要向表格添加新单元格，我们可以在现有标签内创建一个新标签。下面是一个包含四行三列的表的示例：<tr><td><tr>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
这将创建一个包含四行三列的表。
设置 HTML表格的样式
可以使用 CSS 设置 HTML 表的样式来更改其外观。用于设置表样式的一些最常见的 CSS 属性包括 、 和 。下面是如何使用边框和背景色设置表格样式的示例：borderpaddingbackground-color
table {
border: 1px solid black;
background-color: #f2f2f2;
}
td {
padding: 8px;
}
这将创建一个具有黑色边框和浅灰色背景色的表格，每个单元格具有 8 个像素的填充。
使表格响应迅速且适合移动设备
使用 HTML 表格的挑战之一是使它们响应迅速且适合移动设备。实现此目的的一种方法是使用 CSS 根据屏幕大小调整表格的布局。一种方法是使用该属性将表的布局从固定布局更改为响应式布局。这可以使用媒体查询来定位特定的屏幕尺寸。下面是如何使表响应的示例：display
table {
border: 1px solid black;
background-color: #f2f2f2;
}
td {
padding: 8px;
}
@media only screen and (max-width: 600px) {
table {
display: block;
}
td {
display: block;
}
}
这将使表格布局在屏幕宽度小于 600 像素时从固定布局更改为响应式布局。
添加字幕和摘要
使用 HTML 表格的另一个重要方面是使非可视用户可以访问它们。一种方法是向表格添加标题和摘要。该标记可用于向表添加标题，用于描述表的内容。下面是如何向表格添加标题的示例：<caption>
<table>
<caption>Sales by Month</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<tr>
<td>February</td>
<td>$1500</td>
</tr>
</table>
这将向表添加标题，说明它按月显示销售额。该标记可用于为屏幕阅读器和其他辅助技术提供表格摘要。下面是如何向表添加摘要的示例：<summary>
<table summary="Sales by Month">
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<tr>
<td>February</td>
<td>$1500</td>
</tr>
</table>
这将提供屏幕阅读器和其他辅助技术的表摘要，说明它按月显示销售额。
使用表格不好吗？
不！表格是 HTML 的重要组成部分。它们对于以语义和可访问的方式显示表格数据至关重要。在 Web 的早期，在 CSS 出现之前，表格提供了一种布置网页设计的方法，但这不是他们的意图。值得庆幸的是，那些日子已经过去了（嗯，大部分，但对于一些电子邮件客户端！），我们现在可以专注于HTML表在显示数据方面的真正且极其重要的角色。
HTML表格结论
HTML 表格是在网页上显示表格数据的强大工具。使用 CSS，表格的样式可以与我们网站的外观和感觉相匹配，并使其响应迅速且适合不同设备上的用户。向表格添加标题和摘要有助于改善残障用户的辅助功能。通过这些技术，我们可以创建既具有视觉吸引力又实用的有效表格。
推荐阅读
