该用 <table>；当两列内容存在明确横向对应关系且每行表达同一维度对比时，应使用语义化的表格结构，否则用 div + Flex 更轻量、更可访问。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

对比表该用

还是

？

如果两列内容存在明确的「横向对应关系」——比如「功能 A / 功能 B」「iOS 版本 / Android 版本」「免费版 / 专业版」，且每行都表达同一维度的对比（如「支持导出」「响应式设计」「API 接口数」），那就该用 <table>。否则只是视觉上左右并排，没语义关联，用 div + Flex 更轻、更可访问。

<tr> 里必须套 <td>，不能直接写文字

常见错误是这样写：<table><tr>左侧内容</tr><tr>右侧内容</tr></table>——浏览器会忽略未包裹在 <td> 或 <th> 里的文本，渲染结果为空白或错位。

• 每一行必须用 <tr> 包裹，每个单元格必须用 <td>（数据）或 <th>（标题）包裹
• 对比表第一行通常是表头，推荐用 <th>；后续每行两个 <td>，一一对应
• 空单元格别留空白换行，写成 <td></td> 或 <td> </td>

双列对比表的最小可行 HTML 结构

不需要 <thead>、<tbody>，也不需要 border 属性——原生结构够用：

<table>
  <tr>
    <th>特性</th>
    <th>免费版</th>
    <th>专业版</th>
  </tr>
  <tr>
    <td>最大项目数</td>
    <td>3</td>
    <td>无限制</td>
  </tr>
  <tr>
    <td>自定义域名</td>
    <td>×</td>
    <td>✓</td>
  </tr>
</table>

注意：这是三列表格（标题列 + 两版对比），不是两列。真正的「双列对比」指只有两列内容（如 A vs B），此时第一列是描述项，第二列是对比结果，结构更简单：

立即学习“前端免费学习笔记（深入）”；

<table>
  <tr>
    <th>项目</th>
    <th>结论</th>
  </tr>
  <tr>
    <td>加载速度</td>
    <td>A 快 23%</td>
  </tr>
  <tr>
    <td>内存占用</td>
    <td>B 低 17%</td>
  </tr>
</table>

CSS 控制边框与对齐，别用 border="1"

border="1" 是 HTML4 废弃属性，HTML5 不再支持语义化，且无法控制线型、颜色、圆角等。正确做法是加 class 后用 CSS：

• 加 border-collapse: collapse 消除默认单元格间隙
• 用 border 给 <table> 或 <td> 设边框，优先设在 <td> 上更灵活
• 对齐用 text-align（<th> 默认居中，<td> 默认左对齐）
• 移动端易横向溢出？给 <table> 加 width: 100% 和 table-layout: fixed，再配合 word-break: break-word

复杂点在于语义判断——你写的真是“对比”，还是只是想让两段文字并排？后者用 Flex 就行，强行套 <table> 反而增加屏幕阅读器负担。