引言
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>
该代码为表格添加了
role
和
aria-label
属性来提高无障碍用户的访问性。