不推荐用实现品字形布局，因其违背语义化原则，且在响应式、维护性、可访问性上存在严重缺陷；仅在临时demo或兼容ie8及以下时才考虑。
用 <table> 实现品字形布局是可行的，但不推荐——它违背了语义化原则，且在响应式、维护性、可访问性上都有硬伤。如果你只是临时快速出个 demo，或必须兼容极老浏览器（如 IE8 及以下），才考虑表格方案。
<h3>为什么 <code><table> 不该用来做品字布局
<p>HTML 表格标签（<code><table>、<code><tr>、<code><td>）的语义是「结构化数据展示」，不是「页面区域划分」。用它布局会导致：
<ul>
<li>屏幕阅读器会把整个布局读成“一个三行两列的表格”，破坏信息层级</li>
<li>
<code>colspan 和 rowspan 嵌套后，CSS 控制列宽/对齐变得不可靠（尤其 table-layout: fixed 下）
<td> 默认不支持 <code>flex 或 grid，缩放时容易错位或溢出
<table> 品字布局的最小可行写法
<p>如果真要写，核心是用 <code><tr> 控制行，用 <code>colspan="2" 让顶部占满一行，再用两列分左右：
顶部 |
|
左 |
右 |
配套 CSS 只需基础重置：
.top, .left, .right {
width: 100%;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 0;
vertical-align: top;
}
注意：colspan="2" 必须和下面 <tr> 中的 <code><td> 数量一致，否则渲染可能错乱；IE 对 <code>colspan 的解析在某些嵌套场景下会丢高。
比表格更靠谱的替代方案
现代项目中，直接换掉表格，选以下任一即可：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 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> + <code>float：已过时，仅用于维护老系统；float: left/right后必须clear: both，否则父容器高度塌陷真正需要关注的，不是“怎么用表格实现”，而是“为什么还在用表格”。一旦开始写
colspan来撑布局，就等于主动放弃了语义、响应性和可测试性 —— 这些坑在联调阶段才会集中爆发。
