表格布局维护

旧页面常用 table、tr 和 td 组织多栏布局。它的列宽、垂直对齐和内容收缩规则可能被业务代码依赖，但这些元素表达的是数据关系，迁移时必须把视觉布局和语义表格区分开。

html

<table class="legacy-layout">
  <tr><td class="sidebar">菜单</td><td class="content">正文</td></tr>
</table>

维护时先记录实际列宽、最小内容、空单元格、table-layout、合并单元格和打印行为。直接替换成 Grid 可能改变高度分配、溢出和 DOM 顺序。真正的数据表格应保留表头和关联，真正的布局表格才进入迁移候选。

实验与练习

建立一个两列表格布局，分别切换 table-layout: auto 和 fixed，加入长文本并改变容器宽度。再用 Grid 重建同一视觉结果，比较 DOM 语义、溢出和键盘阅读顺序。

为旧页面保留一个基线副本，分别在 quirks mode、table layout、float 多列和现代布局下运行。记录 DOM、尺寸、换行和脚本选择结果，再一次只迁移一个约束；迁移后必须用相同输入比较截图和交互行为。

下一篇处理另一种存量多栏方式：浮动多栏布局。