HTML5表格需用<table>定义结构，含<tr><th><td>等标签，支持<caption>标题、rowspan/colspan合并、CSS边框及<thead><tbody><tfoot>语义分组。
如果您希望在HTML5页面中创建结构化数据展示区域，则需要使用标准的表格标签来构建行列布局。以下是添加表格的具体步骤：
一、基础表格结构定义
HTML5中表格必须以<table>标签为容器，内部使用<tr>定义行、<td>定义普通单元格、<th>定义表头单元格。表头单元格默认加粗并居中，语义上表示列或行的标题。
1、在HTML文档的主体内容区域插入<table></table>标签对。
2、在<table>标签内添加<tr></tr>标签对，表示第一行。
立即学习“前端免费学习笔记（深入）”；
3、在<tr>标签内添加<th>姓名</th><th>年龄</th><th>城市</th>，构成带标题的首行。
4、再添加一个<tr></tr>标签对，在其中写入<td>张三</td><td>28</td><td>北京</td>，构成数据行。
二、添加多行数据及合并单元格
当需要扩展表格内容或调整布局时，可使用rowspan和colspan属性控制单元格跨行或跨列显示，避免重复嵌套结构，提升语义清晰度。
1、在某一行的<td>或<th>标签中添加rowspan="2"属性，使该单元格纵向占据两行高度。
2、在另一列的<td>标签中添加colspan="3"属性，使该单元格横向合并三个列宽。
3、确保被合并的单元格位置不与其他单元格产生重叠冲突，即后续对应位置不再放置独立<td>或<th>。
三、添加表格标题与说明
为增强可访问性与语义表达，应使用<caption>标签作为表格的唯一标题，置于<table>标签内部最上方，浏览器会将其渲染在表格顶部中央。
1、在<table>开始标签后立即插入<caption>员工信息表</caption>。
2、确保<caption>标签不嵌套在<tr>、<thead>等其他表格子标签内。
3、若需补充说明性文字，可在<table>外使用段落标签配合aria-describedby属性关联描述ID。
四、设置表格边框与样式基础
HTML5不再支持border属性直接写在<table>标签中，必须通过CSS控制视觉边框，但可保留border="1"作为向后兼容的简写方式（仅限基本显示）。
1、在<table>标签中添加border="1"属性，快速启用单像素边框。
2、若使用CSS，为<table>、<th>、<td>统一设置border: 1px solid #000。
3、为防止边框双线叠加，添加border-collapse: collapse到<table>的style属性中。
五、添加表头分组与语义结构
复杂表格应使用<thead>、<tbody>、<tfoot>明确划分区域，提升代码可读性与屏幕阅读器识别准确率，其中<thead>必须包含至少一行<tr>。
1、将所有<th>所在行包裹在<thead></thead>标签内。
2、将全部数据行放入<tbody></tbody>标签中。
3、如需底部汇总行，将其置于<tfoot></tfoot>内，且必须位于<tbody>之后、</table>之前。
