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