HTML表格在展示结构化数据时非常有用。HTML 表格是用于在网页中展示结构化数据的一种标记语言元素。表格由 <table> 元素定义，表格的行由 <tr> 元素定义，而单元格则由 <td> 元素（用于数据单元格）和 <th> 元素（用于表头单元格）定义。
HTML表格基础
HTML表格由多个标签组成，这些标签定义了表格的行和列结构。
表格基本示例
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
表格标签
- <table>：定义表格的开始和结束。
- <tr>：定义表格的一行。
- <th>：定义表格的表头单元格，通常呈现为粗体且居中。
- <td>：定义表格的标准单元格。
表格属性
- 全局属性
- id: 表格的唯一标识符。
- class: 表格的样式类。
- style: 行内样式。
- 特殊属性
- border：设置表格边框的宽度。
- cellpadding和 cellspacing
- cellpadding: 单元格内部的间距。
- cellspacing: 单元格之间的间距。
- colspan和 rowspan
- colspan: 合并列。
- rowspan: 合并行。
表格样式
- 内联样式：通过 style 属性直接在HTML标签内定义样式。
- 内部样式表：使用 <style> 标签在HTML文档的 <head> 部分定义样式。
- 外部样式表：使用外部CSS文件定义样式。
表格嵌套
表格内部可以嵌套另一个表格。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>Nested Row 1, Cell 1</td>
<td>Nested Row 1, Cell 2</td>
</tr>
</table>
</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
高级表格功能
表格标题和摘要
<caption>：为表格添加标题。
<table border="1">
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
summary：为表格提供简要说明，通常用于无障碍访问。
<table border="1" summary="This table contains data about...">
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
表格分组
<thead>、<tbody> 和 <tfoot>
- <thead>: 表头部分。
- <tbody>: 表体部分。
- <tfoot>: 表尾部分。
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
表格与JavaScript
动态生成表格：使用JavaScript动态创建表格。
<table id="myTable" border="1"></table>
<script>
const table = document.getElementById('myTable');
// 创建表头
const thead = table.createTHead();
const row = thead.insertRow();
const th1 = document.createElement('th');
const th2 = document.createElement('th');
th1.textContent = 'Header 1';
th2.textContent = 'Header 2';
row.appendChild(th1);
row.appendChild(th2);
// 创建表体
const tbody = table.createTBody();
for (let i = 0; i < 2; i++) {
const row = tbody.insertRow();
for (let j = 0; j < 2; j++) {
const cell = row.insertCell();
cell.textContent = `Row ${i + 1}, Cell ${j + 1}`;
}
}
</script>
动态修改表格：使用JavaScript修改表格内容。
<table id="myTable" border="1">
<tr>
<td>Row 1, Cell 1
</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<button onclick="modifyTable()">Modify Table</button>
<script>
function modifyTable() {
const table = document.getElementById('myTable');
const row = table.rows[0]; // 选择第一行
const cell = row.cells[0]; // 选择第一行的第一个单元格
cell.innerHTML = 'Modified Cell'; // 修改单元格内容
}
</script>
实战项目
学生成绩表
创建一个显示学生成绩的表格，包含姓名、学科和成绩等字段，并添加一些基本样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Scores</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Student Scores</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>English</td>
<td>88</td>
</tr>
<tr>
<td>Sam Brown</td>
<td>History</td>
<td>92</td>
</tr>
</tbody>
</table>
</body>
</html>
可排序的表格
创建一个可排序的表格，用户点击表头时可以根据该列的内容排序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
cursor: pointer;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Sortable Table</h2>
<table id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>95</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>88</td>
</tr>
<tr>
<td>Sam Brown</td>
<td>92</td>
</tr>
</tbody>
</table>
<script>
function sortTable(columnIndex) {
const table = document.getElementById('sortableTable');
const tbody = table.tBodies[0];
const rows = Array.from(tbody.rows);
const sortedRows = rows.sort((a, b) => {
const cellA = a.cells[columnIndex].innerText.toUpperCase();
const cellB = b.cells[columnIndex].innerText.toUpperCase();
if (cellA < cellB) {
return -1;
}
if (cellA > cellB) {
return 1;
}
return 0;
});
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
sortedRows.forEach(row => tbody.appendChild(row));
}
</script>
</body>
</html>
参考链接：
