HTML表格通过table、tr、td/th标签构建结构，支持表头语义化、单元格合并、内联样式设置及富文本嵌套，实现数据清晰展示。
如果您希望在网页中展示结构化数据，HTML表格是一种基础且有效的方式。以下是绘制HTML表格并填充数据的具体步骤：
一、使用table、tr、td标签构建基本表格结构
HTML表格由
定义整体容器，表示一行，| 表示单元格。三者嵌套构成最简表格骨架，是填充数据的前提。
1、在HTML文档的 区域内输入标签作为表格起始。
2、在
内部添加标签，代表第一行。
3、在
内部插入多个| 标签，每个 |
内填入对应数据内容，例如 |
姓名 |
年龄 | 。
4、如需多行，继续在
内添加新的，并在其中嵌套相应数量的以保持列对齐。
二、添加表头使用th标签提升语义与样式
表头单元格应使用
|
替代 |
，它默认加粗居中，且具有更强的可访问性语义，便于屏幕阅读器识别列名。
1、将第一行的
|
全部替换为 |
，例如 |
产品名称 |
单价 |
库存 | 。
2、确保后续所有
中的| 列数与 |
列数严格一致，避免错位。
3、可在
外包裹标签添加表格标题，例如2025年Q1销售统计。
三、通过colspan和rowspan合并单元格以适配复杂数据布局
当某项数据需横跨多列或纵跨多行时，需用colspan（横向合并）或rowspan（纵向合并）属性调整单元格占位，保证数据逻辑清晰、视觉整齐。
1、在目标
或 |
标签内添加colspan="2"属性，使其占据两个相邻列宽。
2、在需要纵向延伸的单元格中添加rowspan="3"属性，使其跨越三行高度。
3、合并后需相应减少该行或该列中其他单元格的数量，例如某行含一个colspan="2"的
|
，则该行其余 |
总数应减1，防止列数溢出。
四、应用border、width、align等内联属性快速设置外观
在不引入CSS的前提下，可通过table标签及其子元素的原生属性控制边框、尺寸和对齐方式，实现基础可视化填充效果。
1、给
添加border="1"属性，使所有单元格显示1像素边框。
2、为
设置width="100%"或width="600"，分别实现响应式宽度或固定像素宽度。
3、在
或 |
中加入align="center"或valign="top"，控制内容水平居中或垂直顶对齐。
五、嵌套其他HTML元素到td中实现富文本数据填充
表格单元格支持嵌套任意合法HTML内容，可用于填充带格式的数据，如图片、链接、列表甚至小型表单，增强信息表达力。
1、在
|
内部直接插入，显示图标型数据标识。
2、将数值型数据包裹在标签中，例如| ¥99.00 | ，突 出价格信息。
3、在描述类单元格中插入
，呈现多点说明内容。 |
|
|
|
出价格信息。
