最简可用表格只需<table>、<tr>、<th>、<td>四个标签，必须嵌套正确、列数对齐，<th>仅用于表头，border="1"确保边框可靠渲染，<caption>为可访问性必需且位置严格。
怎么用 <table> 搭出最简数据结构
不需要任何 CSS，只要 4 个标签就能跑起来：<table>、<tr>、<th>、<td>。别套 <thead> 或 <tbody>——那是语义增强用的，不是“能用”的前提。
常见错误是把 <tr> 直接塞进 <body>，浏览器会自动补 <table>，但 DOM 结构不可靠，后续加样式或 JS 绑定容易失效。
-
<th>只用于表头行（第一行），它默认加粗+居中，比用<td>+style="font-weight:bold"更语义、更轻量 - 所有
<tr>必须在<table>内部，哪怕只有一行数据 - 列数必须对齐：第二行
<td>个数 ≠ 第一行<th>个数，表格会错位，但不会报错，肉眼难察觉
colspan 和 rowspan 合并单元格时最容易漏的约束
合并不是“画线连起来”那么简单。colspan 是横向合并，rowspan 是纵向合并，但它们生效的前提是：被合并的单元格原本就该存在。
比如你想让第一行第一个单元格跨两列，写 <th colspan="2">姓名/年龄</th>，那这一行后面就只能再放一个 <th>（总共 2 列），否则列总数会超；如果硬多写一个，浏览器会把它当新列渲染，导致错行。
立即学习“前端免费学习笔记（深入）”；
-
colspan="3"表示“占 3 个原始列位置”，不是“合并后显示为 3 格宽” -
rowspan="2"的单元格所在行之后，下一行对应位置必须留空（即不放<td>），否则会被挤到右边 - 不要混用：
<td rowspan="2" colspan="2">是合法的，但调试时建议先单侧测试，避免行列错位叠加
为什么加 border="1" 而不是直接写 CSS
新手常以为加 style="border:1px solid #000" 更现代，但实际在纯 HTML 阶段，border="1" 更可靠——它强制触发浏览器的表格边框渲染逻辑，而 inline CSS 的 border 在某些旧环境（如邮件客户端、部分终端渲染器）里可能被忽略或重置。
更关键的是：border="1" 自动启用 border-collapse: collapse 效果，单元格边框不重叠；而手动写 CSS 时若漏掉这句，会出现双线边框，且 cellspacing 属性失效。
-
border="0"不等于“没边框”，而是“关闭边框渲染逻辑”，此时即使写style="border:1px"也可能不生效 - 如果真要用 CSS 控制，务必同时加
style="border-collapse: collapse"，否则td之间会有默认间隙 -
cellpadding和cellspacing是 HTML 属性，仅对border="1"环境有效；换成 CSS 后就得用padding和border-spacing
<caption> 不是装饰，是可访问性刚需
很多人把 <caption> 当成标题标签随便放，但它实际是表格的“唯一官方描述”，屏幕阅读器靠它识别表格用途。没它，辅助技术用户根本不知道这个表格是“员工名单”还是“菜单价格”。
位置必须紧贴 <table> 开始标签之后，不能套在 <div> 里，也不能放在 <thead> 前面——否则语义断裂，部分读屏软件会跳过。
-
<caption>内容应简洁说明表格目的，例如<caption>6月销售统计（按区域）</caption>，而不是“销售数据表” - 它默认居中，但无法用
align属性控制（已废弃），如需左对齐，得用 CSS：caption { text-align: left; } - 一个
<table>只能有一个<caption>，重复会导致验证失败，部分浏览器静默忽略第二个
<th scope="row">、哪一列该用 <th scope="col">——这关系到数据关联是否被机器正确理解。但对简单清单来说，先保证结构不出错，比追求完美语义更实际。 
