Markdown 表格的對齊方式寫在分隔列裡,而不是資料儲存格中。左側冒號表示靠左,兩側冒號表示置中,右側冒號表示靠右。
三種對齊形式
| 名稱 | 狀態 | 時長 |
| :--- | :----: | -------: |
| Build | Passed | 42 s |
| Deploy | Waiting | 3 min |
上面的原始碼分別使用了 :---、:---: 和 ---:。連字號數量通常可以變化,但至少寫三個最穩妥。多出來的空格只是為了讓原始碼更容易閱讀,通常不會影響渲染結果。
依語意選擇對齊方式
靠左最適合名稱、說明、URL 和其他文字。讀者會從同一個起始邊緣開始掃讀。
置中適合簡短的分類值,例如 yes/no、圖示或建置狀態。不要把長句置中,因為起始位置不斷變化會降低掃讀效率。
靠右適合價格、數量、時長、百分比和其他方便比較的數值型內容。Markdown 渲染器仍然會把它們當作文字,因此靠右不會帶來試算表那種排序或計算能力。
讓原始碼更易維護
把每個儲存格補齊到相同寬度,原始碼會更整齊,便於審閱,但這不是必須的。下面這兩個表格在渲染後通常一樣:
| Key | Value |
| :-- | ----: |
| A | 10 |
如果值經常變動,應該使用格式化工具,而不是手工數空格。格式化器在處理 emoji 或寬字元 CJK 時要注意顯示寬度,JavaScript 的字串長度不等於視覺寬度。
排查對齊失效
如果所有欄都變成靠左,先確認目標平台是否支援 GitHub Flavored Markdown 表格。CommonMark 本身並沒有定義表格語法。接著檢查分隔列的儲存格數量是否和表頭一致,並確認沒有未跳脫的直線導致多出一欄。
可以在 Markdown 表格產生器 裡切換欄位對齊,並立即查看生成的分隔列。