logo

HTML 表格：数据展示

✏️ 可编辑
加载编辑器...
实时预览
⌘+Enter 运行⌘+R 重置

关于此练习

在这个实验中，你将学习如何创建 HTML 表格，用于展示结构化数据。

表格在展示数据对比、价格列表、时间表等场景中非常有用。

你将学到：

  • 使用 <table>、<tr>、<td> 创建表格
  • 使用 <thead>、<tbody>、<tfoot> 分组
  • 使用 <th> 定义表头单元格
  • 使用 colspan 和 rowspan 合并单元格
入门⏱ 15-20 min

学习目标

  • 掌握表格的基本结构
  • 理解 thead、tbody、tfoot 的作用
  • 学会使用 th 和 scope 属性
  • 了解合并单元格的方法

场景说明

你正在为一个 SaaS 产品设计定价页面的价格对比表。 表格需要展示： - 三个订阅方案（基础版、专业版、企业版） - 每个方案的价格和功能对比 - 清晰的表头和分组

为什么这么做

  • HTML 决定语义和可访问性，是 CSS/JS 可维护性的基础。
  • 结构清晰比视觉效果更重要，后续样式和交互都会受益。
  • 语义标签能提升 SEO、可读性与团队协作效率。

动手练习

  • 用语义标签重构页面主结构。
  • 检查标题层级是否连续（h1 -> h2 -> h3）。
  • 为关键元素补齐可访问属性。

常见误区

  • 全部用 div，缺少语义分层。
  • 标题层级混乱，页面结构不可读。
  • 表单和媒体元素缺少必要属性。

本节交付物

一份语义化页面骨架模板（结构区块 + 标题层级 + a11y 清单）。

我的进度

完成步骤0 / 4
总尝试次数0
最佳分数0%

达标标准（可勾选）

完成当前 Lab 前建议确认

反思题（建议完成）

你这次最关键的语义结构调整是什么？

你补了哪些可访问性细节？

这份 HTML 结构可复用性如何？

标签

HTML5TablesDataAccessibility