Search K
Appearance
6.3 表格样式与交互
关键词: HTML5表格高级用法, 表格结构设计, 复杂表格, 表格可访问性, 表格语义化, 数据表格, 表格最佳实践, 表格元素
学习目标
- 掌握HTML5表格的高级结构设计和复杂表格的创建
- 理解表格可访问性的重要性和实现方法
- 学会使用表格元素的高级属性和语义化标记
- 掌握复杂数据表格的HTML结构组织
- 了解表格在不同场景下的最佳实践
6.3.1 复杂表格结构设计
多层表头设计
使用HTML5表格元素创建复杂的多层表头结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复杂表格结构示例</title>
</head>
<body>
<h1>销售数据统计表</h1>
<table>
<caption>2024年季度销售数据对比</caption>
<thead>
<tr>
<th rowspan="2">产品类别</th>
<th colspan="4">2024年销售数据</th>
<th rowspan="2">年度总计</th>
</tr>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
</thead>
<tbody>
<tr>
<th>电子产品</th>
<td>150万</td>
<td>180万</td>
<td>200万</td>
<td>220万</td>
<td>750万</td>
</tr>
<tr>
<th>服装</th>
<td>80万</td>
<td>95万</td>
<td>110万</td>
<td>130万</td>
<td>415万</td>
</tr>
<tr>
<th>家居用品</th>
<td>60万</td>
<td>75万</td>
<td>90万</td>
<td>105万</td>
<td>330万</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>季度总计</th>
<td>290万</td>
<td>350万</td>
<td>400万</td>
<td>455万</td>
<td>1495万</td>
</tr>
</tfoot>
</table>
</body>
</html>分组表格设计
使用表格分组元素创建结构化的数据表格：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>员工信息表</title>
</head>
<body>
<h1>公司员工信息统计</h1>
<table>
<caption>
员工基本信息表
<small>（截至2024年1月）</small>
</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>部门</th>
<th>职位</th>
<th>入职日期</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5">技术部</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>技术部</td>
<td>高级工程师</td>
<td>2020-01-15</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>技术部</td>
<td>前端工程师</td>
<td>2021-03-20</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>技术部</td>
<td>后端工程师</td>
<td>2022-06-10</td>
</tr>
<tr>
<th colspan="5">市场部</th>
</tr>
<tr>
<td>011</td>
<td>赵六</td>
<td>市场部</td>
<td>市场经理</td>
<td>2019-09-05</td>
</tr>
<tr>
<td>012</td>
<td>钱七</td>
<td>市场部</td>
<td>市场专员</td>
<td>2021-11-12</td>
</tr>
<tr>
<th colspan="5">人事部</th>
</tr>
<tr>
<td>021</td>
<td>孙八</td>
<td>人事部</td>
<td>人事专员</td>
<td>2020-04-18</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">员工总数</th>
<td>6人</td>
</tr>
</tfoot>
</table>
</body>
</html>嵌套表格结构
在特定场景下使用嵌套表格来展示复杂数据：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>项目进度表</title>
</head>
<body>
<h1>项目进度跟踪表</h1>
<table>
<caption>2024年项目进度总览</caption>
<thead>
<tr>
<th>项目名称</th>
<th>负责人</th>
<th>详细进度</th>
<th>完成状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>网站重构项目</td>
<td>张三</td>
<td>
<table>
<thead>
<tr>
<th>阶段</th>
<th>完成度</th>
</tr>
</thead>
<tbody>
<tr>
<td>需求分析</td>
<td>100%</td>
</tr>
<tr>
<td>设计阶段</td>
<td>90%</td>
</tr>
<tr>
<td>开发阶段</td>
<td>60%</td>
</tr>
<tr>
<td>测试阶段</td>
<td>0%</td>
</tr>
</tbody>
</table>
</td>
<td>进行中</td>
</tr>
<tr>
<td>移动应用开发</td>
<td>李四</td>
<td>
<table>
<thead>
<tr>
<th>阶段</th>
<th>完成度</th>
</tr>
</thead>
<tbody>
<tr>
<td>原型设计</td>
<td>100%</td>
</tr>
<tr>
<td>UI设计</td>
<td>80%</td>
</tr>
<tr>
<td>功能开发</td>
<td>40%</td>
</tr>
</tbody>
</table>
</td>
<td>进行中</td>
</tr>
</tbody>
</table>
</body>
</html>6.3.2 表格可访问性设计
使用标题和作用域
通过合理使用标题元素和scope属性提高表格可访问性：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可访问性表格示例</title>
</head>
<body>
<h1>学生成绩表</h1>
<table>
<caption>2024年春季学期期末考试成绩</caption>
<thead>
<tr>
<th scope="col">学号</th>
<th scope="col">姓名</th>
<th scope="col">数学</th>
<th scope="col">英语</th>
<th scope="col">物理</th>
<th scope="col">总分</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2024001</th>
<td>张三</td>
<td>92</td>
<td>88</td>
<td>95</td>
<td>275</td>
</tr>
<tr>
<th scope="row">2024002</th>
<td>李四</td>
<td>85</td>
<td>92</td>
<td>88</td>
<td>265</td>
</tr>
<tr>
<th scope="row">2024003</th>
<td>王五</td>
<td>90</td>
<td>86</td>
<td>92</td>
<td>268</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">平均分</th>
<td>-</td>
<td>89</td>
<td>88.7</td>
<td>91.7</td>
<td>269.3</td>
</tr>
</tfoot>
</table>
</body>
</html>复杂表格的headers属性
对于复杂的表格结构，使用headers属性明确单元格关系：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复杂表格可访问性</title>
</head>
<body>
<h1>产品销售分析表</h1>
<table>
<caption>2024年各地区产品销售统计</caption>
<thead>
<tr>
<th id="product" rowspan="2">产品</th>
<th id="north" colspan="2">北方地区</th>
<th id="south" colspan="2">南方地区</th>
</tr>
<tr>
<th id="north-q1" headers="north">第一季度</th>
<th id="north-q2" headers="north">第二季度</th>
<th id="south-q1" headers="south">第一季度</th>
<th id="south-q2" headers="south">第二季度</th>
</tr>
</thead>
<tbody>
<tr>
<th id="laptop" headers="product">笔记本电脑</th>
<td headers="laptop north north-q1">120</td>
<td headers="laptop north north-q2">150</td>
<td headers="laptop south south-q1">80</td>
<td headers="laptop south south-q2">100</td>
</tr>
<tr>
<th id="phone" headers="product">智能手机</th>
<td headers="phone north north-q1">200</td>
<td headers="phone north north-q2">240</td>
<td headers="phone south south-q1">180</td>
<td headers="phone south south-q2">220</td>
</tr>
<tr>
<th id="tablet" headers="product">平板电脑</th>
<td headers="tablet north north-q1">60</td>
<td headers="tablet north north-q2">80</td>
<td headers="tablet south south-q1">50</td>
<td headers="tablet south south-q2">70</td>
</tr>
</tbody>
</table>
</body>
</html>表格摘要和详细描述
为复杂表格提供摘要和详细描述：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格摘要示例</title>
</head>
<body>
<h1>财务报表</h1>
<p>以下表格展示了公司2024年各季度的财务数据，包括收入、支出和利润的详细信息。</p>
<table>
<caption>
2024年季度财务报表
<details>
<summary>表格说明</summary>
<p>本表格包含四个季度的财务数据，每个季度显示收入、支出和净利润。所有金额单位为万元。表格按时间顺序排列，最后一行显示年度总计。</p>
</details>
</caption>
<thead>
<tr>
<th scope="col">季度</th>
<th scope="col">收入（万元）</th>
<th scope="col">支出（万元）</th>
<th scope="col">净利润（万元）</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">第一季度</th>
<td>500</td>
<td>350</td>
<td>150</td>
</tr>
<tr>
<th scope="row">第二季度</th>
<td>600</td>
<td>400</td>
<td>200</td>
</tr>
<tr>
<th scope="row">第三季度</th>
<td>750</td>
<td>500</td>
<td>250</td>
</tr>
<tr>
<th scope="row">第四季度</th>
<td>800</td>
<td>550</td>
<td>250</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">年度总计</th>
<td>2650</td>
<td>1800</td>
<td>850</td>
</tr>
</tfoot>
</table>
<p><strong>备注：</strong>以上数据为初步统计，最终数据以年度审计报告为准。</p>
</body>
</html>6.3.3 数据表格的语义化
表格数据的语义标记
使用语义化的HTML元素和属性标记表格数据：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语义化数据表格</title>
</head>
<body>
<h1>产品目录</h1>
<table>
<caption>电子产品价格表</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">产品编号</th>
<th scope="col">产品名称</th>
<th scope="col">价格</th>
<th scope="col">库存</th>
<th scope="col">上市时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>P001</td>
<td>iPhone 15 Pro</td>
<td>
<data value="8999">￥8,999</data>
</td>
<td>
<data value="50">50台</data>
</td>
<td>
<time datetime="2023-09-22">2023年9月22日</time>
</td>
</tr>
<tr>
<td>P002</td>
<td>MacBook Air M2</td>
<td>
<data value="9199">￥9,199</data>
</td>
<td>
<data value="30">30台</data>
</td>
<td>
<time datetime="2022-07-15">2022年7月15日</time>
</td>
</tr>
<tr>
<td>P003</td>
<td>iPad Pro 12.9</td>
<td>
<data value="8799">￥8,799</data>
</td>
<td>
<data value="25">25台</data>
</td>
<td>
<time datetime="2022-10-18">2022年10月18日</time>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">产品总数</th>
<td>-</td>
<td>
<data value="105">105台</data>
</td>
<td>-</td>
</tr>
</tfoot>
</table>
</body>
</html>使用微数据标记
为表格数据添加微数据标记以提高语义性：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微数据表格示例</title>
</head>
<body>
<h1>员工联系信息</h1>
<table>
<caption>公司员工通讯录</caption>
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>邮箱</th>
<th>电话</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr itemscope itemtype="https://schema.org/Person">
<td itemprop="name">张三</td>
<td itemprop="jobTitle">技术总监</td>
<td>
<a href="mailto:zhangsan@company.com" itemprop="email">
zhangsan@company.com
</a>
</td>
<td itemprop="telephone">138-0000-0001</td>
<td itemprop="department">技术部</td>
</tr>
<tr itemscope itemtype="https://schema.org/Person">
<td itemprop="name">李四</td>
<td itemprop="jobTitle">市场经理</td>
<td>
<a href="mailto:lisi@company.com" itemprop="email">
lisi@company.com
</a>
</td>
<td itemprop="telephone">138-0000-0002</td>
<td itemprop="department">市场部</td>
</tr>
<tr itemscope itemtype="https://schema.org/Person">
<td itemprop="name">王五</td>
<td itemprop="jobTitle">人事专员</td>
<td>
<a href="mailto:wangwu@company.com" itemprop="email">
wangwu@company.com
</a>
</td>
<td itemprop="telephone">138-0000-0003</td>
<td itemprop="department">人事部</td>
</tr>
</tbody>
</table>
</body>
</html>6.3.4 响应式表格设计
基本响应式表格结构
使用HTML5属性和结构创建响应式友好的表格：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式表格</title>
</head>
<body>
<h1>产品信息表</h1>
<div>
<table>
<caption>移动设备产品对比</caption>
<thead>
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>价格</th>
<th>屏幕尺寸</th>
<th>存储容量</th>
<th>电池续航</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="产品名称">iPhone 15 Pro</td>
<td data-label="品牌">Apple</td>
<td data-label="价格">￥8,999</td>
<td data-label="屏幕尺寸">6.1英寸</td>
<td data-label="存储容量">128GB</td>
<td data-label="电池续航">23小时</td>
</tr>
<tr>
<td data-label="产品名称">Galaxy S24</td>
<td data-label="品牌">Samsung</td>
<td data-label="价格">￥5,999</td>
<td data-label="屏幕尺寸">6.2英寸</td>
<td data-label="存储容量">256GB</td>
<td data-label="电池续航">25小时</td>
</tr>
<tr>
<td data-label="产品名称">Pixel 8 Pro</td>
<td data-label="品牌">Google</td>
<td data-label="价格">￥6,499</td>
<td data-label="屏幕尺寸">6.7英寸</td>
<td data-label="存储容量">128GB</td>
<td data-label="电池续航">24小时</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>可折叠的表格内容
使用details和summary元素创建可折叠的表格行：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可折叠表格</title>
</head>
<body>
<h1>项目详情表</h1>
<table>
<caption>项目管理表</caption>
<thead>
<tr>
<th>项目名称</th>
<th>状态</th>
<th>负责人</th>
<th>详细信息</th>
</tr>
</thead>
<tbody>
<tr>
<td>网站重构</td>
<td>进行中</td>
<td>张三</td>
<td>
<details>
<summary>查看详情</summary>
<table>
<tr>
<th>开始时间</th>
<td>2024-01-01</td>
</tr>
<tr>
<th>预计完成</th>
<td>2024-06-30</td>
</tr>
<tr>
<th>预算</th>
<td>50万</td>
</tr>
<tr>
<th>团队成员</th>
<td>5人</td>
</tr>
</table>
</details>
</td>
</tr>
<tr>
<td>移动应用开发</td>
<td>计划中</td>
<td>李四</td>
<td>
<details>
<summary>查看详情</summary>
<table>
<tr>
<th>开始时间</th>
<td>2024-03-01</td>
</tr>
<tr>
<th>预计完成</th>
<td>2024-09-30</td>
</tr>
<tr>
<th>预算</th>
<td>80万</td>
</tr>
<tr>
<th>团队成员</th>
<td>8人</td>
</tr>
</table>
</details>
</td>
</tr>
</tbody>
</table>
</body>
</html>6.3.5 表格数据的组织和展示
分页表格结构
使用HTML5元素创建分页表格的基本结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分页表格</title>
</head>
<body>
<h1>用户列表</h1>
<div>
<p>共找到 <strong>1,250</strong> 条记录</p>
<table>
<caption>用户信息表（第1页，共50页）</caption>
<thead>
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>注册时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>
<time datetime="2024-01-15">2024-01-15</time>
</td>
<td>激活</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>lisi@example.com</td>
<td>
<time datetime="2024-01-16">2024-01-16</time>
</td>
<td>激活</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>wangwu@example.com</td>
<td>
<time datetime="2024-01-17">2024-01-17</time>
</td>
<td>待激活</td>
</tr>
<!-- 更多行数据... -->
</tbody>
</table>
<nav aria-label="分页导航">
<ul>
<li><a href="#" aria-label="上一页">上一页</a></li>
<li><a href="#" aria-current="page">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="下一页">下一页</a></li>
</ul>
</nav>
</div>
</body>
</html>筛选和搜索表格
创建带有筛选功能的表格结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可筛选表格</title>
</head>
<body>
<h1>产品管理</h1>
<div>
<form>
<fieldset>
<legend>筛选条件</legend>
<div>
<label for="search">搜索产品：</label>
<input type="search" id="search" name="search"
placeholder="输入产品名称或编号">
</div>
<div>
<label for="category">产品类别：</label>
<select id="category" name="category">
<option value="">全部类别</option>
<option value="electronics">电子产品</option>
<option value="clothing">服装</option>
<option value="books">图书</option>
</select>
</div>
<div>
<label for="status">状态：</label>
<select id="status" name="status">
<option value="">全部状态</option>
<option value="active">在售</option>
<option value="inactive">停售</option>
<option value="pending">待上架</option>
</select>
</div>
<div>
<button type="submit">筛选</button>
<button type="reset">重置</button>
</div>
</fieldset>
</form>
<table>
<caption>产品列表</caption>
<thead>
<tr>
<th>
<a href="#" title="按产品编号排序">
产品编号
</a>
</th>
<th>
<a href="#" title="按产品名称排序">
产品名称
</a>
</th>
<th>
<a href="#" title="按价格排序">
价格
</a>
</th>
<th>
<a href="#" title="按库存排序">
库存
</a>
</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>P001</td>
<td>智能手机</td>
<td>￥2,999</td>
<td>50</td>
<td>在售</td>
</tr>
<tr>
<td>P002</td>
<td>蓝牙耳机</td>
<td>￥299</td>
<td>100</td>
<td>在售</td>
</tr>
<tr>
<td>P003</td>
<td>平板电脑</td>
<td>￥1,999</td>
<td>0</td>
<td>停售</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>6.3.6 表格的高级应用
可编辑表格结构
使用HTML5表单元素创建可编辑的表格：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>可编辑表格</title>
</head>
<body>
<h1>员工信息管理</h1>
<form>
<table>
<caption>员工信息编辑表</caption>
<thead>
<tr>
<th>选择</th>
<th>工号</th>
<th>姓名</th>
<th>部门</th>
<th>职位</th>
<th>薪资</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="selected" value="001">
</td>
<td>001</td>
<td>
<input type="text" name="name_001" value="张三" required>
</td>
<td>
<select name="department_001">
<option value="tech" selected>技术部</option>
<option value="sales">销售部</option>
<option value="hr">人事部</option>
</select>
</td>
<td>
<input type="text" name="position_001" value="高级工程师">
</td>
<td>
<input type="number" name="salary_001" value="15000" min="0" step="100">
</td>
<td>
<button type="button">保存</button>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selected" value="002">
</td>
<td>002</td>
<td>
<input type="text" name="name_002" value="李四" required>
</td>
<td>
<select name="department_002">
<option value="tech">技术部</option>
<option value="sales" selected>销售部</option>
<option value="hr">人事部</option>
</select>
</td>
<td>
<input type="text" name="position_002" value="销售经理">
</td>
<td>
<input type="number" name="salary_002" value="12000" min="0" step="100">
</td>
<td>
<button type="button">保存</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button">批量删除</button>
<button type="button">添加新员工</button>
<button type="submit">保存所有更改</button>
</div>
</form>
</body>
</html>数据导入导出表格
创建支持数据导入导出的表格结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数据导入导出表格</title>
</head>
<body>
<h1>数据管理</h1>
<div>
<section>
<h2>数据导入</h2>
<form enctype="multipart/form-data">
<div>
<label for="file-upload">选择文件：</label>
<input type="file" id="file-upload" name="file"
accept=".csv,.xlsx,.xls">
</div>
<div>
<button type="submit">导入数据</button>
</div>
</form>
</section>
<section>
<h2>数据导出</h2>
<form>
<fieldset>
<legend>导出选项</legend>
<div>
<input type="radio" id="export-all" name="export-type" value="all" checked>
<label for="export-all">导出所有数据</label>
</div>
<div>
<input type="radio" id="export-selected" name="export-type" value="selected">
<label for="export-selected">导出选中数据</label>
</div>
<div>
<label for="export-format">导出格式：</label>
<select id="export-format" name="format">
<option value="csv">CSV</option>
<option value="xlsx">Excel</option>
<option value="json">JSON</option>
</select>
</div>
<div>
<button type="submit">导出数据</button>
</div>
</fieldset>
</form>
</section>
</div>
<table>
<caption>数据表格</caption>
<thead>
<tr>
<th>
<input type="checkbox" id="select-all" aria-label="全选">
</th>
<th>ID</th>
<th>名称</th>
<th>类型</th>
<th>创建时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="item-select" value="1">
</td>
<td>1</td>
<td>数据项一</td>
<td>类型A</td>
<td>
<time datetime="2024-01-15">2024-01-15</time>
</td>
<td>活跃</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item-select" value="2">
</td>
<td>2</td>
<td>数据项二</td>
<td>类型B</td>
<td>
<time datetime="2024-01-16">2024-01-16</time>
</td>
<td>停用</td>
</tr>
<tr>
<td>
<input type="checkbox" name="item-select" value="3">
</td>
<td>3</td>
<td>数据项三</td>
<td>类型A</td>
<td>
<time datetime="2024-01-17">2024-01-17</time>
</td>
<td>活跃</td>
</tr>
</tbody>
</table>
</body>
</html>6.3.7 表格最佳实践
表格性能优化
通过合理的HTML结构提高表格性能：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格性能优化</title>
</head>
<body>
<h1>大数据表格优化</h1>
<!-- 使用table-layout: fixed 的表格结构 -->
<table>
<caption>大数据表格（固定布局）</caption>
<colgroup>
<col style="width: 10%;">
<col style="width: 30%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>产品名称</th>
<th>价格</th>
<th>库存</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<!-- 数据行 -->
<tr>
<td>1</td>
<td>产品A</td>
<td>￥199</td>
<td>100</td>
<td>在售</td>
</tr>
<!-- 更多数据行... -->
</tbody>
</table>
<!-- 虚拟滚动的表格容器 -->
<div aria-label="数据表格容器">
<table>
<caption>虚拟滚动表格</caption>
<thead>
<tr>
<th>序号</th>
<th>数据项</th>
<th>值</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<!-- 动态加载的数据行 -->
<tr>
<td>1</td>
<td>项目1</td>
<td>值1</td>
<td>
<time datetime="2024-01-15">2024-01-15</time>
</td>
</tr>
<!-- 更多行将通过JavaScript动态添加 -->
</tbody>
</table>
</div>
</body>
</html>移动端友好的表格
创建适合移动设备的表格结构：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端友好表格</title>
</head>
<body>
<h1>移动端数据表格</h1>
<!-- 卡片式布局的表格 -->
<div>
<h2>产品信息（卡片视图）</h2>
<div>
<article>
<h3>iPhone 15 Pro</h3>
<dl>
<dt>品牌</dt>
<dd>Apple</dd>
<dt>价格</dt>
<dd>￥8,999</dd>
<dt>库存</dt>
<dd>50台</dd>
<dt>状态</dt>
<dd>在售</dd>
</dl>
</article>
<article>
<h3>Galaxy S24</h3>
<dl>
<dt>品牌</dt>
<dd>Samsung</dd>
<dt>价格</dt>
<dd>￥5,999</dd>
<dt>库存</dt>
<dd>30台</dd>
<dt>状态</dt>
<dd>在售</dd>
</dl>
</article>
</div>
</div>
<!-- 可滚动的表格 -->
<div>
<h2>完整数据表格</h2>
<div tabindex="0" role="region" aria-label="数据表格，可水平滚动">
<table>
<caption>产品详细信息表</caption>
<thead>
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>价格</th>
<th>屏幕尺寸</th>
<th>存储容量</th>
<th>处理器</th>
<th>电池续航</th>
<th>重量</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone 15 Pro</td>
<td>Apple</td>
<td>￥8,999</td>
<td>6.1英寸</td>
<td>128GB</td>
<td>A17 Pro</td>
<td>23小时</td>
<td>187g</td>
</tr>
<tr>
<td>Galaxy S24</td>
<td>Samsung</td>
<td>￥5,999</td>
<td>6.2英寸</td>
<td>256GB</td>
<td>Snapdragon 8 Gen 3</td>
<td>25小时</td>
<td>195g</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>本节要点回顾
- 复杂表格结构：使用rowspan、colspan等属性创建多层表头和复杂布局
- 可访问性设计：通过scope、headers属性和语义化标记提高表格可访问性
- 语义化数据：使用data、time等元素为表格数据添加语义信息
- 响应式设计：创建适应不同设备的表格结构和布局
- 高级应用：实现可编辑、可筛选、支持导入导出的表格功能
- 性能优化：通过合理的HTML结构和属性提高表格性能
相关学习资源
常见问题FAQ
Q: 什么时候使用scope属性，什么时候使用headers属性？
A: 对于简单的表格，使用scope属性（col、row）就足够了。对于复杂的多层表头或不规则表格，使用headers属性明确指定单元格之间的关系。
Q: 如何处理大量数据的表格性能问题？
A: 使用分页、虚拟滚动、固定表格布局（table-layout: fixed）、延迟加载等技术。在HTML层面，可以使用colgroup定义列宽，减少浏览器重排。
Q: 移动端如何显示复杂的表格？
A: 可以使用卡片式布局替代表格、水平滚动、隐藏不重要的列、或者使用响应式设计重新组织数据的显示方式。
Q: 如何提高表格的可访问性？
A: 使用caption元素提供表格说明、为表头使用th元素、添加scope或headers属性、确保键盘导航可用、提供表格摘要信息。
Q: 表格中可以嵌套其他表格吗？
A: 可以，但应该谨慎使用。嵌套表格会增加复杂性，影响可访问性和性能。通常建议重新设计数据结构或使用其他布局方式。
下一节预览：至此，我们已经完成了HTML5的核心内容学习。下一步可以继续深入学习HTML5的高级特性或开始CSS的相关内容。