table实现页头页尾是权宜之计，因其语义错误、可访问性差、响应式困难、seo不友好且浏览器兼容问题多；应优先使用语义化标签+flexbox布局。
table 实现页头页尾布局在现代前端开发中不推荐使用，但如果你正维护老项目、受限于环境（如某些邮件模板、遗留 CMS 输出），或需要快速原型验证，它确实能“跑起来”。关键是要清楚代价和替代路径。
为什么用 table 做页头页尾是权宜之计
表格标签的语义是「展示二维数据」，不是「组织页面结构」。浏览器和屏幕阅读器会把 <table> 解析为数据容器，导致：<ul>
<li>辅助技术误判页面结构，影响可访问性</li>
<li>
<code>width="100%"、height 等属性在不同浏览器中渲染不一致（尤其 IE 和新版 Chrome）
<table> 后难以响应式适配——<code>cellpadding、cellspacing 无法用媒体查询控制<table> 布局中页头页尾的典型 HTML 结构<p>常见写法是用三行：第一行页头、中间内容区、第三行页尾。必须注意：<code><thead> 和 <code><tfoot> 是语义标签，**不能用于布局定位**——它们只影响打印样式和部分辅助技术行为，对视觉布局无实际作用。<p>正确做法是纯靠 <code><tr> + <code><td> 构建：<pre class="brush:php;toolbar:false;"></pre>
<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>
<ul>
<li>
<code>border="0" 必须显式设置，否则旧版浏览器默认显示边框
cellspacing="0" cellpadding="0" 防止单元格间/内出现不可控空白align="center" 或 valign="top" ——这些属性已废弃，CSS 替代更可靠<td> 设 <code>width 百分比再嵌套另一个 <table>，容易触发 IE 的“双倍边距”或塌陷问题<h3>遇到 <code>height 不生效或内容溢出怎么办
这是最常踩的坑：设置 <tr height="80px"> 在 Chrome/Firefox 中可能被忽略，尤其当 <code><td> 内有 padding、line-height 或 inline 元素时。<ul>
<li>优先用 <code>style="height: 80px;" 替代 height 属性（后者在 HTML5 中已过时）
<td> 内容不撑高：设 <code>style="vertical-align: top; padding: 0;"line-height: 80px; 并设 text-align: center; 比依赖 valign 更稳float: left），否则父 <td> 高度会坍缩<h3>真正该用什么替代 <code>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 布局一旦嵌套三层以上，连调试都得靠猜——这不是技术选择问题，是维护成本的临界点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
