应避免用布局文章内容，因其是语义容器而非排版工具，滥用会导致响应式失效、seo下降、屏幕阅读器误读；文章列表应使用flex或grid布局，仅当内容为天然二维数据表时才可用并补全等语义结构。
别用 <table> 布局文章内容——它不是排版工具，是语义容器，硬套会导致响应式失效、SEO 下降、屏幕阅读器误读，后期改一列宽可能要翻三页代码。
<h3>为什么 <code><table> 一用就出问题
<p>浏览器按表格逻辑强制解析嵌套结构，不是“看起来像两栏”就真能当布局用：</p>
<ul><li>
<code>width: 100% 在多层 <table> 嵌套中常被忽略，移动端直接横向溢出
<li>搜索引擎把 <code><tr> 当数据行理解，不会识别“文章标题”“发布时间”这类语义
<li>屏幕阅读器按“第1列：标题，第2列：时间”播报，把文章列表读成 Excel 表格</li>
<li>加个新字段就得查 <code>colspan="2" 和 rowspan 是否匹配，稍错位整行错乱
替代方案：用 flex 实现文章列表并排
想让标题左对齐、时间右对齐，或标题+摘要+操作按钮横向排列，display: flex 是最轻量、可控性最强的解法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器加
display: flex; align-items: center;，子元素自动水平对齐 - 标题用
flex: 1;占满剩余空间，时间用margin-left: auto;推到最右 - 移动端加
flex-direction: column;就自然堆叠，不用写colspan或改 HTML 结构 - 必须设
min-width: 0;防止长标题撑破容器（尤其在flex: 1下）
如果非要用 <table> 展示文章元数据
<p>仅当内容天然满足「行列交叉有明确含义」——比如「文章名 × 发布时间 × 阅读数」构成一张可排序、可筛选的数据表，才考虑用 <code><table>。此时必须补全这些细节，否则 Safari 和安卓 WebView 会渲染异常：
<ul><li>显式包裹 <code><thead> 和 <code><tbody>，否则 <code>overflow-x: auto 下表头无法固定
<th> 加 <code>scope="col"，否则读屏软件不知道它管哪一列
<div style="overflow-x: auto">，否则宽表格在小屏直接被切掉右边
<li>加 <code>table { border-collapse: collapse; } 和 td, th { vertical-align: middle; padding: 8px 12px; }，避免文字悬浮或边框重叠真正难的不是写出能显示的表格，而是判断什么时候该停手——文章列表不是二维数据，它是一组独立语义单元，用 <article></article> + flex 或 grid 才是边界清晰的做法。
