HTML4 table布局虽能用但不推荐，因其仅适用于表格数据，用于页面布局会导致语义混乱、响应式失效、可访问性差及维护困难；Flexbox对新手更友好，需注意父容器设置display: flex、主轴与交叉轴对齐属性分工，以及现代浏览器兼容性良好。
HTML4 table 布局还能用吗？
能，但不推荐—— 对新手其实比想象中更友好，前提是避开几个典型误区： 表面看， 比空学属性更有效的是动手做具体事。下面三个例子覆盖 80% 的日常布局需求，代码少、效果直观： 立即学习“前端免费学习笔记（深入）”； FlexBox 的复杂点不在语法，而在理解“主轴/交叉轴”和“容器属性 vs 项目属性”的分工。一旦卡住，盯着控制台里元素的 computed styles 看 用于布局在现代开发中已被明确废弃。W3C 在 HTML4 末期就强调
table 只应用于**表格数据**（如成绩单、财务报表），而非页面结构。强行用 table 做导航栏或三栏布局，会导致语义混乱、响应式失效、屏幕阅读器无法正确解析，且嵌套 多层后维护成本极高。 Flexbox 是不是新手友好？
@@######@@display: flex 必须加在**父容器**上，子元素自动变成 flex 项目——很多人误加在子元素自己身上row（水平），想垂直堆叠得显式写 flex-direction: column
justify-content 控制主轴对齐，align-items 控制交叉轴对齐——名字容易记混，建议用“主轴 = flex-direction 方向”来辅助判断为什么别用 table 做布局，哪怕它“看起来简单”
内容
width 在 td 上常被忽略，必须靠 table-layout: fixed + col 标签）td 无法像 flex 项目那样用 flex-wrap 换行或用 order 调整顺序table 当作一份数据表读出，导航区域被识别成“含 3 行 1 列的表格”，毫无意义td 垂直居中？得写 vertical-align: middle，但父 tr 高度若未定义，它照样不生效——而 flex 的 align-items: center 一行解决新手起步建议：从 flex 实现三个真实小场景开始
display: flex + justify-content: space-between + flex: 1 给 logo 和菜单项分配空间display: flex + flex-wrap: wrap，子卡片设 flex: 0 0 calc(33.333% - 20px)（留间隙）min-height: 100vh + display: flex + justify-content: center + align-items: center
flex-direction 和 justify-content 实际值，比查文档更快定位问题。/* 一个居中卡片的最小可行示例 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
