html基础表格需按顺序嵌套表头数据，闭合完整；加css边框、内边距和对齐提升可读性；空表用colspan提示“暂无数据”。
用 HTML 表格标签构建基础表格，核心就四件事：定义容器、划出行、填入单元格、加表头（可选）。不需要复杂工具或框架，纯标签就能组织出清晰的二维数据结构。
必须掌握的四个基础标签
是整个表格的“外壳”，所有内容都得包在里面；
代表一行，有多少行就写多少个
是普通数据单元格，放具体数值、文字、链接等；
专用于表头（比如“姓名”“年龄”），浏览器默认加粗+居中，还自带语义信息，对屏幕阅读器友好。
写出一个能正常显示的基础表格
按顺序嵌套，别跳层、别漏闭合：
- 先写
- 里面第一行用
，每个列名用 包裹
- 后续每行数据也用
，每个值用 包裹
- 每一层标签都要有对应闭合（
|
|
、
|
|
、、）
示例代码：
| 产品 |
价格 |
库存 |
| 笔记本 |
¥599 |
12 |
| 鼠标 |
¥89 |
47 |
让表格看起来更清楚的三个关键点
刚写完的表格默认没边框、没间距、文字贴边——这不是错误，是规范行为。要让它可读，重点调三处：
- 加边框：用 CSS 写
table { border-collapse: collapse; } 消除双线间隙，再给 th, td { border: 1px solid #ccc; }
- 加内边距：给
th, td 加 padding: 8px; 避免文字紧贴边框
- 对齐方式：用
text-align: left; 或 center 控制文字水平位置，表头常用居中，数据常左对齐
空表格不能留白
如果数据还没加载，不要只写一个空
。浏览器可能忽略它，屏幕阅读器也读不出内容。稳妥做法是塞一行提示：
注意这里用了 colspan="3"，表示这个单元格横跨三列，避免列数错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
