最简两行两列表格结构为：a1a2b1b2，全用、省略/、必须包裹、单元格数量一致、空单元格写或 。
用 <table> 写两行两列最简结构
<p>直接写 <code><table> + 两个 <code><tr>（行）+ 每行两个 <code><td>（单元格），就能满足基本需求。不需要 CSS、不依赖框架，浏览器原生支持，兼容性无压力。
<p>常见错误是把 <code><th> 当成必须项——其实两行两列纯数据表格，全用 <code><td> 更稳妥；还有人误套 <code><tbody> 或 <code><thead>，反而增加冗余。
<ul><li><code><tr> 必须包住 <code><td>，不能直接把 <code><td> 放在 <code><table> 下
<li>每行的 <code><td> 数量最好一致，否则渲染可能错位（尤其旧版 IE）
<li>空单元格别留空白，写成 <code><td> </td> 或 <td></td> 都行，但别只换行缩进
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
加边框和间距：用 border 和 cellspacing 还是 CSS？
border 和 cellspacing 还是 CSS？老教程常教用 border="1" 和 cellspacing="2" 属性，现在不推荐。这些是 HTML4 的废弃属性，HTML5 不再支持语义化，且无法精细控制。
正确做法是加一个 class，用 CSS 控制边框、内边距和外边距。这样可维护性强，响应式也方便。
立即学习“前端免费学习笔记（深入）”；
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
-
border-collapse: collapse要加，否则默认有双线缝隙 -
padding控制单元格内容离边距离，margin对<td> 无效，得作用于 <code><table> <li>如果只要“视觉上”两行两列但内容不均等，别靠合并单元格硬凑，先确认是否真需要 <code>rowspan/colspan - 不用
white-space: nowrap，否则长文本直接撑破容器 - 避免对
<td> 设固定像素宽度，优先用百分比或 <code>max-width - 如果内容含图片或嵌入元素，记得统一设
max-width: 100%，否则它们会破坏表格布局 - 检查是否能自然说出「行代表什么、列代表什么」，说不出来，大概率不是表
- 哪怕只有 2×2，只要数据有维度关系（如对比实验结果、配置项开关），就该保留
<table> <li>用 <code><caption></caption>补一句说明，比加注释或 title 属性更利于辅助技术识别
移动端适配时，两行两列容易被拉宽或换行？
默认 <table> 会随内容撑开，小屏下横向溢出很常见。这不是表格写错了，而是没设约束。
<p>关键不是删内容，而是加限制：给 <code><table> 设 <code>width: 100% + table-layout: fixed，再给 <td> 设 <code>word-break: break-word。
语义和可访问性：什么时候不该用 <table>？
<p>如果这两行两列只是用来排版按钮、图标或卡片，而不是表达行列关系的数据（比如「姓名/年龄」、「日期/操作」），那就不该用 <code><table>。
<p>屏幕阅读器会按表格逻辑读出「第1行第1列」，用户听到一堆「列标题、行组」反而困惑。这时候用 <code>div + Flex 或 CSS Grid 更合适，代码更轻，语义更准。
表格本身很简单，难的是判断它该不该出现——一旦把布局当语义用，后面加筛选、导出、键盘导航都会变麻烦。
表格本身很简单，难的是判断它该不该出现——一旦把布局当语义用，后面加筛选、导出、键盘导航都会变麻烦。
