不推荐用<table>实现品字形布局，因其违背语义化原则，且在响应式、维护性、可访问性上存在严重缺陷；仅在临时demo或兼容IE8及以下时才考虑。
用 <table> 实现品字形布局是可行的，但不推荐——它违背了语义化原则，且在响应式、维护性、可访问性上都有硬伤。如果你只是临时快速出个 demo，或必须兼容极老浏览器（如 IE8 及以下），才考虑表格方案。
为什么 <table> 不该用来做品字布局
HTML 表格标签（<table>、<tr>、<td>）的语义是「结构化数据展示」，不是「页面区域划分」。用它布局会导致：
- 屏幕阅读器会把整个布局读成“一个三行两列的表格”，破坏信息层级
-
colspan和rowspan嵌套后，CSS 控制列宽/对齐变得不可靠（尤其table-layout: fixed下） - 无法响应式：
<td>默认不支持flex或grid，缩放时容易错位或溢出 - 后续想加动画、JS 交互（比如点击切换左右区）时，DOM 结构僵硬难操作
<table> 品字布局的最小可行写法
如果真要写，核心是用 <tr> 控制行，用 colspan="2" 让顶部占满一行，再用两列分左右：
<table>
<tr>
<td colspan="2"><div class="top">顶部</div></td>
</tr>
<tr>
<td><div class="left">左</div></td>
<td><div class="right">右</div></td>
</tr>
</table>
配套 CSS 只需基础重置：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.top, .left, .right {
width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 0;
vertical-align: top;
}
注意：colspan="2" 必须和下面 <tr> 中的 <td> 数量一致，否则渲染可能错乱；IE 对 colspan 的解析在某些嵌套场景下会丢高。
比表格更靠谱的替代方案
现代项目中，直接换掉表格，选以下任一即可：
- Flexbox：用
display: flex+flex-direction: column套一层，再对底部子容器用display: flex分左右 —— 兼容性好（IE10+），代码清晰 - CSS Grid：用
grid-template-areas: "top top" "left right"—— 代码最短，逻辑最直，但 IE 完全不支持，Safari 10.1 之前对grid-template-areas有 bug - 纯
<div>+float：已过时，仅用于维护老系统；float: left/right后必须clear: both，否则父容器高度塌陷
真正需要关注的，不是“怎么用表格实现”，而是“为什么还在用表格”。一旦开始写 colspan 来撑布局，就等于主动放弃了语义、响应性和可测试性 —— 这些坑在联调阶段才会集中爆发。
