布局表格是个陷阱
了解为何使用表格布局会让屏幕阅读器产生困惑。
布局表格是个陷阱 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
表格曾经用于页面布局
多年前，开发者使用 table 元素构建页面布局。这种做法至今仍存在于旧代码中，并且仍会造成实际的无障碍问题。
布局表格为何有害
屏幕阅读器会将每个表格都视为数据表格。对于您的布局，它会读出行、列和单元格数量，让用户被毫无意义的结构信息淹没。
阅读顺序出现错误
布局表格经常将内容分散到顺序混乱的单元格中。视觉顺序与阅读顺序逐渐偏离，使用户无所适从。
使用 CSS 进行布局
现代布局应交给 CSS。请使用 flexbox 或 grid 来排列页面，并且只在确实表示表格数据时使用 table 元素。
.cards { display: grid; grid-template-columns: 1fr 1fr; }使用 Flexbox 处理一维布局
当您需要将项目排列成一行或一列时，flexbox 是自然的选择。它能够适应内容，同时不会引入表格语义。
.row { display: flex; gap: 1rem; }使用 Grid 处理二维布局
对于同时包含行和列的布局，CSS grid 提供了真正的布局系统。它将页面的外观与标记的含义分离开来。
保持语义清晰
使用 CSS 布局后，您的 HTML 可以使用真正的地标，例如 header、nav 和 main。屏幕阅读器用户获得的是有意义的页面地图，而不是单元格数量。
最后手段：role=presentation
如果确实无法移除遗留的布局表格，请添加 role=presentation。这样会去除表格语义，使辅助技术忽略这个网格。
<table role="presentation"> ... </table>Presentation 是补丁，不是方案
请将 role=presentation 视为临时补救措施。真正的解决方案是迁移到 CSS，从根本上移除问题，而不是仅仅将其隐藏。
如何识别布局表格
没有标题、没有 th，并且单元格中放的是完整页面区域而不是数值，这些都是危险信号。这种模式几乎总是表示需要重构的布局表格。
一个表格，一个用途
请对任何表格进行一个简单的测试：它是否用行和列呈现彼此相关的数据？如果不是，它就是布局表格，应当用 CSS 替代。
快速检查
您接手了一个页面，而它纯粹使用表格来定位多列内容。
回顾：数据使用表格，布局使用 CSS
绝不要使用 table 进行页面布局。请使用 flexbox 或 grid，仅在真实数据场景中使用 table，并且只将 role=presentation 作为遗留代码的临时措施。
常见问题解答
「布局表格是个陷阱」课时是免费的吗？
是的 — 「布局表格是个陷阱」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「布局表格是个陷阱」这节课中我会学到什么？
了解为何使用表格布局会让屏幕阅读器产生困惑。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「布局表格是个陷阱」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。