HTML表格通过table、tr、td/th标签构建基本结构，支持边框设置、单元格合并及嵌套布局；其中th用于表头，rowspan/colspan实现跨行跨列，HTML5推荐用CSS替代废弃的border等属性。
HTML表格通过
| 和 | 等标签组织行、列与单元格。以下是构建标准HTML表格结构的具体步骤：
一、使用table、tr、td标签搭建基础表格table元素作为容器定义整个表格区域，tr（table row）表示一行，td（table data）代表普通数据单元格。三者嵌套构成最简表格骨架。 1、在HTML文档中插入<table></table>标签对，作为表格的根容器。 2、在<table>内部添加<tr></tr>标签，表示第一行。 立即学习“前端免费学习笔记（深入）”； 3、在<tr>内部插入两个<td></td>标签，分别填充“姓名”和“年龄”文本内容。 4、再添加一个<tr></tr>标签，作为第二行，并在其中放入两个<td></td>，分别填入“张三”和“25”。 二、添加表头th标签区分标题行th（table header）用于定义表格标题单元格，浏览器默认加粗并居中显示，语义上明确标识列名或行名，提升可访问性与结构清晰度。 1、将第一行的<td>全部替换为<th>，例如<th>姓名</th><th>年龄</th>。 2、确保<th>仅出现在首行或首列，避免在数据行中混用。 3、可在<th>内嵌入<strong>或其他格式标签，但不应改变其语义作用。 三、设置表格边框与间距属性通过border、cellpadding、cellspacing等属性控制表格视觉边界与单元格内部/外部空白，使结构更易识别。这些属性可直接写在<table>标签内。 1、在<table>开始标签中添加border="1"，启用单像素边框。 2、添加cellpadding="5"，设定单元格内容与边框之间的距离为5像素。 3、添加cellspacing="2"，设定相邻单元格边框之间的间隔为2像素。 4、注意：HTML5已废弃这些属性，推荐改用CSS的border、padding、border-spacing替代。 四、合并单元格使用rowspan与colspanrowspan属性使单元格纵向跨多行，colspan使其横向跨多列，用于构建复杂表头或汇总行，增强表格信息表达能力。 1、在某<td>或<th>标签中添加rowspan="2"，表示该单元格占据当前行及下一行对应位置。 2、在另一<td>中添加colspan="3"，表示该单元格横跨三个列宽。 3、调整后续<tr>中的<td>数量，确保每行总列数一致，否则表格渲染可能出现错位。 五、嵌套表格实现局部复杂布局在某个<td>内部再次使用<table>标签，可创建子表格，适用于需要分区展示的场景，如带明细的订单项。 1、在一个<td>中直接写入新的<table><tr><td>子内容</td></tr></table>结构。 2、为子表格设置独立的border、width等属性，避免继承父表格样式干扰。 3、嵌套层级不宜超过两层，否则影响可维护性与屏幕阅读器解析。 |
|---|
