如何利用HTML表格制作九宫格？等宽等高单元格设置方案-html教程-PHP中文网

直接用做九宫格会出单元格宽高不一致、间隙控制失效、响应式缩放时比例崩坏三大问题；其语义专为数据表格设计，不支持aspect-ratio、媒体查询动态调列数，且无障碍与seo表现差，仅真实二维数据（如数独、课程表）才应使用。

如何利用html表格制作九宫格？等宽等高单元格设置方案

table 布局做九宫格会出什么问题

直接用 <table> 做九宫格，表面看结构清晰，但实际会踩三个硬坑：单元格宽高不一致、间隙控制失效、响应式缩放时比例崩坏。浏览器对 <code>table 的默认行为（比如 border-collapse: separate 下的 border-spacing）会让列宽受内容挤压，height 在多数情况下被忽略，除非所有 <tr> 和 <code><td> 都显式设高且父容器有固定高度。 <h3>强制等宽等高的 table 写法</h3> <p>如果非要用 <code>table，必须放弃“自适应”幻想，走固定尺寸路线：

<table> 设 <code>width: 300px; height: 300px;（不能只设宽或只设高）
每个 <tr> 设 <code>height: 100px;（300 ÷ 3），不能用百分比
每个 <td> 设 <code>width: 100px; height: 100px;，并加 box-sizing: border-box;
关闭默认间距：border-collapse: collapse;，否则 border-spacing 会吃掉空间

示例关键 CSS：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

.grid-table {
  width: 300px;
  height: 300px;
  border-collapse: collapse;
}
.grid-table tr { height: 100px; }
.grid-table td {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

为什么 table 不适合现代九宫格

真正卡住的不是写法，而是语义和行为限制：

<table> 是为**表格数据**设计的，无障碍读屏器会逐行朗读，把功能入口当数据表处理 <li>无法用 <code>aspect-ratio 或 padding-bottom 实现正方形自适应，因为 td 高度不响应父宽
媒体查询下改列数（比如手机端变 2×2）要重写整个 HTML 结构，没法靠 CSS 控制
IE8+ 虽支持，但 Flex/Grid 在 Chrome 57+/Firefox 52+/Safari 10.1+ 已全量覆盖，连 iOS 10.3 都支持 display: grid

真要用 table，只限这一个场景

仅当你要展示的是**真实二维数据表格**（比如数独题、乘法口诀表、课程表），且明确要求语义正确、可导出为 CSV、需屏幕阅读器按行列播报时，才该用 <table>。其他所有“看起来像九宫格”的 UI——图标入口、图片墙、卡片面板——都该换 <code>display: grid 或 flex。

最容易被忽略的一点：很多人以为 table “兼容老浏览器”是优势，但 IE10/11 对 Grid 的语法不兼容，对 table 的 height 支持又极不稳定，反而更难调；而现代方案在真实项目中早已无需考虑 IE。