不能用做页面布局，因其专用于数据表格；必须用等语义标签，css控制样式，禁用border属性和固定宽高，确保可访问性、响应式与打印正确。
直接用 <table> 做统计数据表格没问题，但“布局”二字是陷阱——它常被误用来指代整页排版，而真正的统计表格只负责行列数据本身；页面级布局该用 <code>flex 或 grid，否则语义错乱、可访问性崩坏、小屏直接报废。
为什么不能用 <table> 套整个报表页
<p>表格标签不是容器，是数据结构声明。用 <code><table> 嵌套 <code><tr><td> 拼 header/sidebar/main，会导致：
<ul>
<li>屏幕阅读器把导航栏读成“第1行第1列”，完全丢失语义</li>
<li>
<code>colspan/rowspan 一多，CSS 控制宽度、换行、对齐就失控
overflow: auto 只作用于 <table> 自身，无法局部滚动
<li>后续加虚拟滚动、拖拽排序、键盘焦点管理时，DOM 和事件委托逻辑全乱</li>
<h3><code><thead>、<code><tbody>、<code><caption></caption> 不是可选项
它们是浏览器和辅助技术识别表格结构的基础设施，缺一不可：
-
<caption></caption>必须紧跟在<table> 后，内容要描述用途，比如 <code><caption>2024年Q3各渠道转化率统计（单位：%）</caption> <thead> 包裹表头行，<code><th scope="col"> 显式声明该列标题管整列；若某行是“合计”，则用 <code><th scope="row">合计</th><tbody> 是数据主体，多个 <code><tbody> 可用于分组（如按月份拆），打印时浏览器默认每页重复 <code><thead> <h3>边框必须用 CSS，禁用 <code>border属性border="1"是 HTML5 过时属性，它会干扰 CSS 层叠逻辑，且无法支持现代设计需求：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 浏览器渲染时，
border="1"+ 默认单元格间距会产生双线边框，必须靠border-collapse: collapse强制修复 - 屏幕阅读器无法从内联属性中提取语义，
scope才是关键 - 移动端缩放时，硬编码的
width="560"会导致横向溢出；应设table { width: 100% }+ 媒体查询响应 - 精确控制需组合：
border设线型/颜色/粗细，border-collapse: collapse合并边框，empty-cells: hide隐藏空单元格边框
合并单元格的校验逻辑容易错位
colspan和rowspan不是视觉拉宽，而是修改表格行列拓扑结构：-
colspan="2"表示当前单元格横跨 2 列，意味着它右侧不能再有<td> 或 <code><th> —— 否则实际列数会超出表头定义 <li> <code>rowspan="3"要求下方连续两行对应位置留空（即不写<td>），否则会被当成新单元格，导致错行 <li>常见错误：<code><th colspan="2">总销售额</th>后紧跟<td>华东</td> <td>120</td>→ 实际变成 3 列，但表头只声明了 2 列，语义断裂
真正难的不是写出来，而是让表格在屏幕阅读器里读得对、在手机上不横向滚动、在打印时每页带表头、在 JS 更新时事件不丢失——这些细节一旦漏掉，专业性就塌了一半。
- 浏览器渲染时，
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
