table实现页头页尾是权宜之计，因其语义错误、可访问性差、响应式困难、SEO不友好且浏览器兼容问题多；应优先使用语义化标签+Flexbox布局。
table 实现页头页尾布局在现代前端开发中不推荐使用，但如果你正维护老项目、受限于环境（如某些邮件模板、遗留 CMS 输出），或需要快速原型验证，它确实能“跑起来”。关键是要清楚代价和替代路径。
为什么用 table 做页头页尾是权宜之计
表格标签的语义是「展示二维数据」，不是「组织页面结构」。浏览器和屏幕阅读器会把 <table> 解析为数据容器，导致：
- 辅助技术误判页面结构，影响可访问性
-
width="100%"、height等属性在不同浏览器中渲染不一致（尤其 IE 和新版 Chrome） - 嵌套
<table>后难以响应式适配——cellpadding、cellspacing无法用媒体查询控制 - SEO 工具可能忽略或降权这类非语义化结构
<table> 布局中页头页尾的典型 HTML 结构
常见写法是用三行：第一行页头、中间内容区、第三行页尾。必须注意：<thead> 和 <tfoot> 是语义标签，**不能用于布局定位**——它们只影响打印样式和部分辅助技术行为，对视觉布局无实际作用。
正确做法是纯靠 <tr> + <td> 构建：
立即学习“前端免费学习笔记（深入）”；
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80" bgcolor="#14191e"><!-- 页头 --></td>
</tr>
<tr>
<td><!-- 主内容区域，可再嵌套 table 或 div --></td>
</tr>
<tr>
<td height="60" bgcolor="#333"><!-- 页尾 --></td>
</tr>
</table>-
border="0"必须显式设置，否则旧版浏览器默认显示边框 -
cellspacing="0" cellpadding="0"防止单元格间/内出现不可控空白 - 避免用
align="center"或valign="top"——这些属性已废弃，CSS 替代更可靠 - 不要给
<td>设width百分比再嵌套另一个<table>，容易触发 IE 的“双倍边距”或塌陷问题
遇到 height 不生效或内容溢出怎么办
这是最常踩的坑：设置 <tr height="80px"> 在 Chrome/Firefox 中可能被忽略，尤其当 <td> 内有 padding、line-height 或 inline 元素时。
- 优先用
style="height: 80px;"替代height属性（后者在 HTML5 中已过时） - 确保
<td>内容不撑高：设style="vertical-align: top; padding: 0;" - 如果页头含文字，加
line-height: 80px;并设text-align: center;比依赖valign更稳 - 页尾固定高度时，避免在其中放浮动元素（
float: left），否则父<td>高度会坍缩
真正该用什么替代 table 做页头页尾
除非你被明确限制只能用 HTML4 且禁用 CSS，否则请直接用语义化标签 + Flexbox：
<header style="height: 80px; background: #14191e;"></header> <main></main> <footer style="height: 60px; background: #333;"></footer>
再加一句 CSS：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { flex: 1; }- 这样页头页尾高度严格受控，主内容自适应填充剩余空间
- 所有现代浏览器（包括 Safari 12+）都支持，无需 polyfill
- 后续加响应式（比如移动端页头变矮）只需改 media query 里的
height，不用动 HTML 结构
复杂点在于老系统里经常混用内联样式和外部 CSS，而 table 布局一旦嵌套三层以上，连调试都得靠猜——这不是技术选择问题，是维护成本的临界点。
