HTML 表格：数据展示
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习如何创建 HTML 表格，用于展示结构化数据。
表格在展示数据对比、价格列表、时间表等场景中非常有用。
你将学到：
- 使用
<table>、<tr>、<td>创建表格 - 使用
<thead>、<tbody>、<tfoot>分组 - 使用
<th>定义表头单元格 - 使用
colspan和rowspan合并单元格
Beginner⏱ 15-20 min
Learning Objectives
- 掌握表格的基本结构
- 理解 thead、tbody、tfoot 的作用
- 学会使用 th 和 scope 属性
- 了解合并单元格的方法
Scenario
你正在为一个 SaaS 产品设计定价页面的价格对比表。
表格需要展示：
- 三个订阅方案（基础版、专业版、企业版）
- 每个方案的价格和功能对比
- 清晰的表头和分组
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5TablesDataAccessibility