不推荐用table布局新闻列表，因其语义错误（应仅用于二维数据）、可访问性差、响应式困难、维护成本高；正确做法是用语义化的ul+li配合flex或grid布局。

表格布局设计新闻列表页在现代前端开发中已不推荐——table 语义是描述**数据关系型内容**（如成绩单、财务报表），不是页面结构。强行用 table 做新闻列表，会导致语义混乱、可访问性差、响应式困难，且维护成本高。

为什么不用 table 布局新闻列表

浏览器渲染时，table 元素会触发复杂的重排逻辑，宽度计算依赖所有单元格内容；一旦新闻标题长度不一或含图片，就容易撑破容器、换行错位；屏幕缩小时无法自然堆叠，必须额外写大量 @media hack 来修正。

• table 缺乏语义：屏幕阅读器会把新闻条目读成“第1行第1列”，而非“最新体育新闻”
• SEO 友好度低：搜索引擎难以识别哪块是标题、哪块是摘要、哪块是发布时间
• 移动端适配难：table-layout: fixed 强制截断文本，word-break 又可能割裂中文词

替代方案：用 ul + li 搭配 CSS 控制样式

新闻列表本质是**一组并列的、有顺序的内容项**，ul 或 ol 才是语义正确的选择。实际项目中几乎全部采用该方式。

• 去掉默认列表符号：li { list-style: none; }
• 清除默认内外边距：* { margin: 0; padding: 0; }（或更安全地只重置 ul, li）
• 每条新闻用 li 包裹，内部用 h3（标题）、p（摘要）、time（时间）等语义化标签
• 用 display: flex 或 grid 控制横向/纵向对齐，比 table 更灵活

• CBA季后赛首轮开打

  广东宏远主场迎战北京首钢，全场观众超12000人…

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  2026-10-08
• ...

如果硬要用 table（比如 legacy 系统改造）要注意什么

仅限必须兼容极老系统、或后端模板无法改动的场景。此时需严格约束结构和样式：

• 必须用 role="presentation" 告诉辅助技术“这不是数据表”：
  禁用 caption、th、scope 等语义化表头标签，避免误导
  固定列宽用 width 属性（非 CSS width），防止 IE8 及以下错乱
  图片必须设 height 和 width 属性，否则表格高度会随加载跳动
  不要嵌套 table —— 一条新闻一个 tr，别在 td 里再套 table

  真正卡点的地方从来不是“能不能实现”，而是“改完之后谁来维护、怎么加新字段、要不要适配折叠屏”。用 ul 写新闻列表，三年后加个“已读标记”只需改一行 CSS；用 table，大概率得重画整张表的 colspan 和 rowspan。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！