HTML表格通过table、tr、td/th标签构建基本结构，支持边框设置、单元格合并及嵌套布局；其中th用于表头，rowspan/colspan实现跨行跨列，HTML5推荐用CSS替代废弃的border等属性。

HTML表格通过

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

标签定义基本结构，配合、

和

等标签组织行、列与单元格。以下是构建标准HTML表格结构的具体步骤：

一、使用table、tr、td标签搭建基础表格

table元素作为容器定义整个表格区域，tr（table row）表示一行，td（table data）代表普通数据单元格。三者嵌套构成最简表格骨架。

1、在HTML文档中插入

标签对，作为表格的根容器。

2、在

内部添加标签，表示第一行。

立即学习“前端免费学习笔记（深入）”；

3、在

内部插入两个标签，分别填充“姓名”和“年龄”文本内容。

4、再添加一个

标签，作为第二行，并在其中放入两个，分别填入“张三”和“25”。

二、添加表头th标签区分标题行

th（table header）用于定义表格标题单元格，浏览器默认加粗并居中显示，语义上明确标识列名或行名，提升可访问性与结构清晰度。

1、将第一行的

。

2、确保

全部替换为

，例如

姓名

年龄

仅出现在首行或首列，避免在数据行中混用。

3、可在

内嵌入或其他格式标签，但不应改变其语义作用。

三、设置表格边框与间距属性

通过border、cellpadding、cellspacing等属性控制表格视觉边界与单元格内部/外部空白，使结构更易识别。这些属性可直接写在

标签内。

1、在

开始标签中添加border="1"，启用单像素边框。

2、添加cellpadding="5"，设定单元格内容与边框之间的距离为5像素。

3、添加cellspacing="2"，设定相邻单元格边框之间的间隔为2像素。

4、注意：HTML5已废弃这些属性，推荐改用CSS的border、padding、border-spacing替代。

四、合并单元格使用rowspan与colspan

rowspan属性使单元格纵向跨多行，colspan使其横向跨多列，用于构建复杂表头或汇总行，增强表格信息表达能力。

1、在某

中的

或	标签中添加rowspan="2"，表示该单元格占据当前行及下一行对应位置。 2、在另一	中添加colspan="3"，表示该单元格横跨三个列宽。 3、调整后续
数量，确保每行总列数一致，否则表格渲染可能出现错位。 五、嵌套表格实现局部复杂布局 在某个	内部再次使用标签，可创建子表格，适用于需要分区展示的场景，如带明细的订单项。 1、在一个 中直接写入新的 子内容 结构。 2、为子表格设置独立的border、width等属性，避免继承父表格样式干扰。 3、嵌套层级不宜超过两层，否则影响可维护性与屏幕阅读器解析。