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