html表格不该用于页面布局，因其语义本为二维数据展示；误用会导致响应式失效、seo下降、可访问性中断及维护困难，仅当内容可被excel处理时才适用。
HTML表格布局不是排版技巧问题，而是语义误用问题——<table> 标签只该用于二维结构化数据，不能当页面骨架用。
<h3>为什么 <code><table> 不该用来做整体页面布局
<p>浏览器会强制按表格逻辑解析嵌套结构，导致以下实际后果：</p>
<ul><li>响应式断点失效：<code>width: 100% 在多层 <table> 嵌套中常被忽略，移动端直接横向溢出
<li>SEO 友好性下降：搜索引擎把 <code><tr> 当数据行理解，不会识别“导航栏”“侧边栏”这类语义
<li>可访问性（a11y）中断：屏幕阅读器按表头-数据关系播报，把菜单当“第1列：首页，第2列：关于”读出来</li>
<li>维护成本飙升：改一个列宽要查三层 <code><td colspan="2">，稍不注意就错位
<h3>什么情况下必须用 <code><table>
<p>仅当内容天然满足「行列交叉有明确含义」时才用，比如：</p>
<ul>
<li>课程表：<code>星期一 和 第3节 交汇处是「高等数学」
基础版 行 × API调用次数 列 = 「1000次/月」判断标准很简单：能否把这张表复制进 Excel 并直接排序、筛选、求和？能，就该用 <table>；不能，就该换方案。
<h3>替代 <code><table> 做并排/分栏的现代写法
<p>想让表格和右侧内容（如说明文字、图片、操作按钮）并排？别套 <code><table>，直接用容器级 CSS：
<ul>
<li>单行并排（最常用）：<code>display: flex 父容器 + flex: 1 内容区 + 固定宽侧边栏
display: grid + grid-template-columns: 240px 1fr 320px
float: left + clear: both 底部清浮，但必须加 min-width: 0 防文本撑破关键不是“怎么写”，而是父容器是否开启了对应布局上下文——没设 display: flex 却给子元素写 flex: 1，等于没写。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
真要用 <table> 时最容易翻车的细节
<p>哪怕只是展示数据，下面这些点漏掉一个，表格就会在真实环境里出问题：</p>
<ul><li><code><thead> 和 <code><tbody> 必须显式包裹，否则 Safari 在 <code>overflow-x: auto 下表头无法固定
rowspan：超过 2 行时，某些安卓 WebView 会渲染错位<div style="overflow-x: auto">，否则宽表格直接切掉右边内容
<li>所有 <code><th> 加 <code>scope="col" 或 scope="row"，否则读屏软件不知道它管哪一列
表格真正的难点从来不在“怎么画格子”，而在于边界意识——清楚知道它该出现的位置，以及什么时候必须放手。
