HTML5中使用、、、等标签可构建语义清晰的结构化表格，配合、、增强可访问性，通过rowspan/colspan实现单元格合并，并用CSS优化样式。
如果您希望在网页中以结构化方式展示行列数据，HTML5 提供了原生的 元素及其配套标签来构建标准表格。以下是使用 、、 和 标签制作基础表格的具体步骤：
一、理解表格基本结构与语义标签
HTML5 表格由 作为容器，内部通过 （table row）定义行，（table header）用于表头单元格（默认加粗居中），| （table data）用于普通数据单元格。正确嵌套这些标签是生成可访问、语义清晰表格的前提。
1、用
2、在 内部添加至少一个 元素表示一行。立即学习“前端免费学习笔记（深入）”；
3、在 中，使用 定义首行或首列的标题单元格，使用 | 定义其余数据单元格。
4、确保每行的单元格数量一致，避免跨行跨列未声明的错位。
二、编写带表头的三行四列表格
该方法适用于展示具有明确列名的静态数据，如学生成绩、产品参数等。表头使用 | 可提升屏幕阅读器识别率和样式控制能力。
1、输入 开始表格（border="1" 仅用于开发阶段可视化边框，正式环境应通过 CSS 控制样式）。
2、插入第一行：
| 姓名 |
语文 |
数学 |
英语 |
3、插入第二行：
| 张三 |
89 |
92 |
85 |
4、插入第三行：
| 李四 |
91 |
87 |
93 |
5、闭合表格：
三、为表格添加标题与描述性结构
使用 、 明确划分表头与主体区域，增强语义可读性和 CSS 选择灵活性。
1、在 开始后立即添加 学生成绩表。
2、将表头行包裹进 ...
3、将所有数据行统一放入 ... 中。
4、注意： 和
不是可选装饰，而是 HTML5 推荐的语义分组方式，对打印样式和响应式布局有直接影响。
四、合并单元格实现复杂布局
当需要跨行或跨列显示标题或汇总信息时，需使用 rowspan 和 colspan 属性。这两个属性必须写在被合并的起始单元格上，并跳过后续对应位置的单元格。
1、在 或 标签内添加 colspan="2" 实现横向合并两个列宽。
2、添加 rowspan="3" 实现纵向跨越三行高度。
3、合并后必须减少对应位置的 | 或 |
数量，否则表格结构将错乱。
4、例如：| 主科成绩 | 即可完成四列表头。
五、添加基础 CSS 样式提升可读性
纯 HTML 表格默认样式简陋，通过内联 style 属性可快速启用边框、间距与对齐，无需外部文件即可验证效果。
1、为 添加 style="border-collapse: collapse; width: 100%;" 消除默认单元格间隙。
2、为 和 设置 style="border: 1px solid #ccc; padding: 8px; text-align: left;"。
3、为 单独添加 style="background-color: #f2f2f2;" 区分表头背景。
4、避免在每个单元格重复写 style，建议后续迁移到 。
|
| |
|
|
| |
|
| |
| |
| |
