通过HTML语义化标签与CSS结合实现响应式表格，使用thead、tbody、colgroup等结构化标签提升可访问性，配合媒体查询、data-label堆叠布局或横向滚动容器适配移动端，确保多设备下内容清晰可读。
HTML 本身没有“函数”概念，但可以通过组合使用 HTML 标签与 CSS 技术来构建响应式表格，并实现表格标签的高级应用。重点在于合理使用 table、thead、tbody、th、td、colgroup 等结构化标签，并结合现代 CSS 实现响应式布局和语义增强。
响应式表格的基本构建方法
为了让表格在小屏幕上可读，需避免横向滚动或内容重叠。以下是几种常见实现方式：
- 使用 CSS 媒体查询控制显示方式：在屏幕变小时将表格转换为块级展示，每行数据以堆叠形式呈现。
- 包裹表格在容器中并启用横向滚动：适用于列数较多但内容不宜重构的场景。
- 隐藏非关键列：通过 CSS 在小屏下隐藏次要信息，保留核心数据。
姓名 年龄 城市 职业 张三 28 北京 工程师 李四 32 上海 设计师
表格标签的高级语义化用法
正确使用语义标签能提升可访问性和 SEO 效果，同时便于样式控制。
- thead / tbody / tfoot 分离结构：有助于打印时分页，也方便 JavaScript 操作特定区域。
- colgroup 和 col 定义列样式：统一设置某列的宽度或背景色，减少重复样式。
- scope 属性增强可读性：为 th 添加 scope="row" 或 scope="col"，帮助屏幕阅读器理解关系。
| 产品 | 数量 | 描述 | 价格 |
|---|---|---|---|
| 手机 | 2 | 高性能智能手机 | ¥3999 |
移动端优化：堆叠式表格设计
当屏幕太窄时，可以利用 CSS 将每一行数据转化为类似卡片的堆叠布局。
立即学习“前端免费学习笔记（深入）”；
- 给每个 td 添加 data-label 属性，标明对应字段名，用于替代表头。
- 在小屏下隐藏原表头，用 ::before 伪元素显示 label 内容。
| 姓名 | 年龄 | 城市 | 职业 |
|---|---|---|---|
| 张三 | 28 | 北京 | 工程师 |
