如何使用 HTML5 对表格正文内容进行分组?
HTML 表格通常用于以结构化的方式呈现数据。表格由行和列组成，每行代表一条记录，每列代表该记录中的一个字段。在某些情况下，您可能需要对表格正文中的内容进行分组，例如当您有多个属于同一组的数据点时。在本篇博文中，我们将探讨在 HTML 表格中对正文内容进行分组的不同方法。
方法 1:使用 <tbody> 元素
在 HTML 表格中对正文内容进行分组的最简单方法是使用 <tbody> 元素。<tbody> 元素用于对表格中的一组行进行分组，通常用于对表格的主要内容进行分组。以下是一个例子。
示例
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
在此示例中，我们使用了 <tbody> 元素对包含表格主要内容的两行进行分组。默认情况下，所有未明确包含在 <thead> 或 <tfoot> 元素中的行都会自动包含在 <tbody> 元素中。
方法 2:使用 <colgroup> 和 <tbody> 元素
在 HTML 表格中对正文内容进行分组的另一种方法是同时使用 <colgroup> 和 <tbody> 元素。<colgroup> 元素允许您将列分组在一起，并将样式或属性应用于整个组，而 <tbody> 元素允许您将行分组在一起。以下是示例 -
示例
<table>
<colgroup span="2"></colgroup>
<colgroup span="1"></colgroup>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
在此示例中，我们使用了 <colgroup> 元素将前两列组合在一起，并将最后一列分开。我们还使用了 colspan 属性来跨越 <thead> 元素的前两列。<tbody> 元素用于对包含表格主要内容的两行进行分组。
方法 3:使用 CSS
另一种在 HTML 表格中对正文内容进行分组的方法是使用 CSS。使用 CSS，您可以将不同的样式应用于表格中的特定行或单元格，从而创建视觉分组效果。以下是示例−
示例
<style>
.group1 {
background-color: #f2f2f2;
}
.group2 {
background-color: #e5e5e5;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
在此示例中，我们使用 CSS 类 .group1 和 .group2 定义了两个具有不同背景颜色的组。然后，我们将这些类应用于表格主体中的相应行，以直观地对内容进行分组。
您还可以使用 CSS 为表格中的单个单元格或列设置样式。例如，您可以将特定样式应用于第一列中的每个单元格，或者应用于根据内容满足特定条件的单元格。这有助于进一步分组和区分表格中的内容。
使用 CSS 对 HTML 表格中的正文内容进行分组，在表格的视觉设计和样式方面提供了很大的灵活性。但是，这需要对 CSS 有深入的理解，并且可能比讨论的其他方法更耗时。
使用 JavaScript 创建动态分组的正文内容
与对表格标题进行分组类似，您也可以使用 JavaScript 和 jQuery 在表格中创建动态分组的正文内容。如果您的表格中有大量数据，并且您希望用户能够更轻松地管理它们，那么此功能会特别有用。您可以使用 JavaScript 根据用户交互(例如点击标题行)切换行的可见性。以下是示例。
示例
<script>
$(document).ready(function() {
$('.group-header').click(function() {
$(this).toggleClass('collapsed');
$(this).nextUntil('.group-header').toggle();
});
});
</script>
<table>
<thead>
<tr class="group-header">
<th>Group 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Group 1</td>
</tr>
<tr>
<td>Row 2, Group 1</td>
</tr>
<tr class="group-header">
<th>Group 2</th>
</tr>
<tr>
<td>Row 1, Group 2</td>
</tr>
<tr>
<td>Row 2, Group 2</td>
</tr>
</tbody>
</table>
在此示例中，我们使用 jQuery 为组标题行添加了点击事件处理程序。当用户点击标题行时，我们会切换一个类来显示或隐藏折叠图标，并使用 nextUntil() 函数切换所有行的可见性，直到下一个组标题行。
使用嵌套表格对内容进行分组
在 HTML 表格中对内容进行分组的另一种方法是使用嵌套表格。这需要在现有表格的一个或多个单元格内创建新表格。然后，您可以将样式或属性应用于嵌套表格来对内容进行分组。以下是示例。
示例
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>27</td>
<td>
<table>
<tbody>
<tr>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>35</td>
<td>
<table>
<tbody>
<tr>
<td>San Francisco</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
在此示例中，我们在主表的"城市"列中嵌套了一个表格。我们为每个嵌套表格使用了单独的 tbody 元素，以保持 HTML 结构的条理性。然后，您可以向嵌套表格应用样式或属性来对内容进行分组。
分组表格内容的可访问性注意事项
使用分组表格内容时，务必考虑依赖屏幕阅读器或其他辅助技术的用户的可访问性。您应该确保标记的结构即使在脱离上下文阅读时也能理解，并使用适当的 HTML 属性(例如 aria-label)为无法看到视觉分组提示的用户提供上下文。
以下是一些确保可访问性的额外提示:
为每个组使用有意义的标题，并确保使用 <th> 正确标记它们。元素。
使用 aria-scribeby 属性与组关联的描述性标题或标签为每个组提供额外的上下文。
使用 tabindex 属性确保仅使用键盘的用户能够导航到分组内容并与之交互。
使用 CSS 在视觉上区分分组内容，但要确保视觉提示不是识别分组的唯一方法。例如，您可以使用颜色、边框或阴影在视觉上对内容进行分组，也可以使用有意义的标题和标签来提供上下文。
使用屏幕阅读器或其他辅助技术测试您的标记，以确保准确有效地传达分组信息。
结论
在 HTML 表格中对正文内容进行分组是一种有用的技术，可以提高数据的可读性和组织性。有多种方法可以实现这一点，包括 <tbody> 元素、<colgroup> 元素和 CSS。此外，使用 JavaScript 和 jQuery 创建动态分组的正文内容或使用嵌套表格可以为数据分组提供更大的灵活性。在实现分组表格内容时，务必考虑依赖辅助技术的用户的可访问性。
