表格对齐

分隔行除了声明「这里往下都是数据」，还兼职管一件正事：每一列的对齐方式。冒号写在左边就靠左，写在右边就靠右，两边都有就居中，一个都没有就交给默认样式。规则只有这一处要记——冒号只写在分隔行里，数据行一个都不用管。

三种对齐

| 左对齐 | 居中 | 右对齐 |
| :--- | :---: | ---: |
| A | B | C |

<table>
<thead>
<tr>
<th align="left">左对齐</th>
<th align="center">居中</th>
<th align="right">右对齐</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">A</td>
<td align="center">B</td>
<td align="right">C</td>
</tr>
</tbody>
</table>

冒号直接变成了单元格上的 align 属性，表头和数据行都带着它。

不写冒号就没有对齐属性

| 默认 | 左 | 中 | 右 |
| --- | :-- | :-: | --: |
| A | B | C | D |

<table>
<thead>
<tr>
<th>默认</th>
<th align="left">左</th>
<th align="center">中</th>
<th align="right">右</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td align="left">B</td>
<td align="center">C</td>
<td align="right">D</td>
</tr>
</tbody>
</table>

第一列一个 align 属性都没有——没有冒号就没有对齐声明，单元格内容怎么排由主题样式和浏览器默认行为决定。

短横线写几个都一样

分隔行的格子里短横线至少要有一个，写几个不影响对齐：

| 左 | 中 | 右 |
| :- | :-: | -: |
| A | B | C |

<table>
<thead>
<tr>
<th align="left">左</th>
<th align="center">中</th>
<th align="right">右</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">A</td>
<td align="center">B</td>
<td align="right">C</td>
</tr>
</tbody>
</table>

冒号最多只能有一个

这一格写了两个冒号，整行就不再是合法的分隔行，表格直接不成立：

| a |
| ::--- |
| 1 |

<p>| a |
| ::--- |
| 1 |</p>

| a | b |
| --- | --- |
| x: | y |

对齐的是内容，不是列宽

align 作用在每个单元格上，管的是「这一格里的内容往哪边靠」，不决定列有多宽。列宽由内容和表格布局算法一起算出来：内容越长，列越宽。想让某一列内容对齐，只需要让这一列的内容本身对齐。

还有一点值得知道：align 是 HTML 的表现属性，浏览器把它当成 text-align 来用。只要主题样式没有单独给单元格写 text-align，它就生效；一旦主题写了，CSS 优先，冒号就白写了。这也是同一份 Markdown 在不同站点看起来不一样的原因之一。

哪些列值得指定对齐

金额、版本号、日期这类字符宽度相同的内容，右对齐才有意义——个位、十位对齐之后，读者一眼就能看出两行差多少。状态、名称这类长度参差的文字列，居中比左对齐好看。而说明文字通常保持左对齐：它长短差异大，居中会让行首忽左忽右，反而更难读。

常见坑

练习

把下面这段内容改写成 Markdown 表格：金额列右对齐，状态列居中，说明列左对齐；说明列里有一处要用粗体。

金额 状态 说明
128.00 已完成 订单已结算
9.90 处理中 等待支付回调

| 金额 | 状态 | 说明 |
| ---: | :---: | :--- |
| 128.00 | 已完成 | **订单已结算** |
| 9.90 | 处理中 | 等待支付回调 |

小结

读完这一页，你应当能说出三种对齐各自的写法，能解释为什么不写冒号就没有对齐属性，能说清对齐管的是内容而不是列宽，也能在表格突然不成立时想到「冒号写多了」这个原因。