HTML5用创建结构化表格，含定义行列，支持边框样式、rowspan/colspan跨格、标题及/分区，并可通过外层实现响应式滚动。
如果您希望在网页中展示结构化数据，HTML5 提供了原生的 标签来创建表格。以下是使用 、、 和 标签添加行列数据表格的具体方法：
一、基础表格结构搭建
表格由 元素定义，内部用 表示行， 表示表头单元格（默认加粗居中）， 表示普通数据单元格。必须确保每个 都位于 内部，且 或 必须嵌套在 中，否则语义无效。
1、编写
2、在 内添加一个 |
立即学习“前端免费学习笔记（深入）”；
3、在该 中插入多个 | 列标题 | 4、再添加一个或多个 |
| 数据内容 |
二、添加带边框和间距的可视化表格
HTML5 本身不强制渲染边框，需通过内联 style 属性或 CSS 控制视觉样式。使用 border、cellspacing（已废弃，建议用 CSS 替代）和 cellpadding（同理）可快速获得可见表格结构，但现代写法推荐仅用 style 属性实现兼容性更强的效果。
1、在 标签中添加 style="border-collapse: collapse;" 合并边框。
2、为 和 统一设置 style="border: 1px solid #000; padding: 8px;"。
3、为 单独添加 style="background-color: #f2f2f2;" 以区分表头。
三、添加跨行与跨列单元格
当需要合并垂直方向的多行或水平方向的多列时，可使用 rowspan 和 colspan 属性。这两个属性值为正整数，表示该单元格应占据的行数或列数，同时需相应减少其他行/列中的单元格数量以保持结构平衡。
1、在某个 或 标签中添加 rowspan="2" 实现跨两行。
2、在另一个单元格中添加 colspan="3" 实现跨三列。
3、检查后续 中的 数量是否与表头总列数一致（已扣除被跨占的列）。
四、添加表格标题与描述
为提升可访问性和语义准确性，HTML5 推荐使用 开始标签之后。此外，可用 、、 显式划分表格逻辑区域，有助于屏幕阅读器解析和 CSS 精准控制。
1、在 内第一行插入 销售统计表。
2、将表头行包裹在 ...
3、将所有数据行包裹在 ...
五、添加响应式表格最小适配方案
在窄屏设备上，宽表格易出现横向滚动或内容截断。一种轻量级 HTML5 兼容方案是将表格包裹在具有固定宽度和自动横向滚动的容器中，无需 JavaScript 即可实现基本可读性。该方法不改变表格语义，仅增强移动端浏览体验。
1、在外层添加一个 标签，并设置 style="overflow-x: auto; max-width: 100%;"。
2、将完整的 内部。
3、为 设置 style="min-width: 600px;"，确保内容不因缩放过度压缩。
|
| |
|
| |
| | | |
| |
