HTML 表格学习指南 - 打造精美且高效的数据展示方式

引言

HTML 表格是一种常见且重要的网页元素，它能够以结构化的方式展示数据、信息和内容。在本详细指南中，我们将深入学习 HTML 表格的创建方法，包括表格的基本结构、样式设计、合并单元格、排序功能及无障碍访问性等，帮助你打造精美且高效的数据展示方式。

HTML 表格基础
- 表格的基本结构
- 添加表头和单元格
表格样式设计
- 修改表格样式
- 改变表格边框、颜色和间距
- 添加背景颜色和边框效果
表格合并单元格
- 合并行或列
- 跨越多行或多列合并单元格
表格排序功能
- 利用 JavaScript 实现表格排序
表格的无障碍访问性
- 添加适当的语义信息
- 使用 ARIA 属性提升无障碍性

1. HTML 表格基础

HTML 表格的基本结构由 <table> 元素开始，然后使用 <tr> 元素表示表格的行，再在行中使用 <th> 元素定义表头单元格，使用 <td> 元素定义数据单元格。

1.1 表格的基本结构

基本结构示例：

<table><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>数据1</td><td>数据2</td><td>数据3</td></tr><tr><td>数据4</td><td>数据5</td><td>数据6</td></tr>
</table>

1.2 添加表头和单元格

使用 <th> 元素定义表格的表头单元格，使用 <td> 元素定义数据单元格。

表头和单元格示例：

<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>

2. 表格样式设计

通过 CSS 可以对表格进行样式设计，包括修改表格样式、改变表格的边框、颜色和间距，以及添加背景颜色和边框效果。

2.1 修改表格样式

修改表格样式示例：

table {border-collapse: collapse; /* 合并边框 */width: 100%; /* 表格宽度占满父容器 */
}th, td {padding: 10px; /* 设置单元格内边距 */
}

2.2 改变表格边框、颜色和间距

改变表格边框、颜色和间距示例：

table {border: 2px solid #ddd; /* 表格边框 */border-spacing: 0; /* 单元格间距 */
}

2.3 添加背景颜色和边框效果

可以使用 CSS 的背景颜色和边框效果来增加表格的可读性和美观度，例如：

th {background-color: #f2f2f2; /* 表头背景色 */border-bottom: 2px solid #ddd; /* 表头下边框 */
}td:hover {background-color: #ddd; /* 鼠标悬停背景色 */
}tr:nth-child(even) td {background-color: #f2f2f2; /* 奇数行背景色 */
}

3. 表格合并单元格

在 HTML 表格中，有时候需要合并单元格以方便查看数据。我们可以使用 rowspan 和 colspan 属性来实现合并单元格的功能。

3.1 合并行或列

使用 rowspan 属性来合并单元格，例如：

<table><tr><th rowspan="2">姓名</th><th>年龄</th><th>性别</th></tr><tr><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>

rowspan="2" 表示要将单元格合并为两行。

3.2 跨越多行或多列合并单元格

使用 rowspan 或 colspan 属性来合并多个单元格，例如：

<table><tr><th rowspan="2">姓名</th><th colspan="2">个人信息</th></tr><tr><td>年龄</td><td>性别</td></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>

rowspan="2" 表示跨越两行单元格，colspan="2" 表示跨越两列单元格。

4. 表格排序功能

在 HTML 表格中，我们可以使用 JavaScript 实现简单的表格排序功能。

4.1 利用 JavaScript 实现表格排序

我们可以使用 JavaScript 来实现表格排序功能，例如：

<table id="myTable"><tr><th onclick="sortTable(0)">姓名</th><th onclick="sortTable(1)">年龄</th><th onclick="sortTable(2)">性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table><script>
function sortTable(n) {var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;table = document.getElementById("myTable");switching = true;dir = "asc";while (switching) {switching = false;rows = table.rows;for (i = 1; i < (rows.length - 1); i++) {shouldSwitch = false;x = rows[i].getElementsByTagName("TD")[n];y = rows[i + 1].getElementsByTagName("TD")[n];if (dir == "asc") {if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {shouldSwitch= true;break;}} else if (dir == "desc") {if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {shouldSwitch = true;break;}}}if (shouldSwitch) {rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);switching = true;switchcount ++;      } else {if (switchcount == 0 && dir == "asc") {dir = "desc";switching = true;}}}
}
</script>

该代码使用了一个排序算法，根据点击的表头进行排序，支持升序和降序排序。

5. 表格的无障碍访问性

为了提升无障碍访问性，我们需要为 HTML 表格添加适当的语义信息和 ARIA 属性。

5.1 添加适当的语义信息

可以使用 caption 元素来为表格添加标题、thead 元素来表示表格的表头、tbody 元素来表示表格的主体部分、tfoot 元素来表示表格的页脚部分等。

适当语义信息示例：

<table><caption>学生信息表</caption><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></tbody><tfoot><tr><td colspan="3">共 2 个学生</td></tr></tfoot>
</table>

5.2 使用 ARIA 属性提升无障碍性

可以使用 ARIA 属性来为表格添加无障碍访问功能，例如：

<table role="table" aria-label="学生信息表"><caption>学生信息表</caption><thead><tr role="row"><th role="columnheader">姓名</th><th role="columnheader">年龄</th><th role="columnheader">性别</th></tr></thead><tbody><tr role="row"><td role="cell">张三</td><td role="cell">25</td><td role="cell">男</td></tr><tr role="row"><td role="cell">李四</td><td role="cell">30</td><td role="cell">女</td></tr></tbody><tfoot><tr role="row"><td role="cell" colspan="3">共 2 个学生</td></tr></tfoot>
</table>