教學 · Markdown → HTML
Markdown 表格轉 HTML 表格
豎線表格是最容易被人看到轉壞的那一處 Markdown。在 GitHub 上好好的，換個地方就變成一段全是豎線的文字。
這篇講哪種寫法能轉過來、轉完的 HTML 長什麼樣，以及哪三個錯誤會把表格變回文字。
一張表要滿足什麼才算表
豎線表格不屬於 CommonMark，它來自 GitHub 風格的 Markdown —— 也就是說轉換器得專門支援它，有些不支援。這個支援。
三樣東西缺一不可：標題列、下面那行連字號、至少一列內容。少任何一樣，出來的就是段落。
- 01標題列每格之間打一根豎線。行首和行尾那兩根可以不寫，但寫上更容易看出哪一列少了一格。
- 02緊接著寫連字號那行，中間不能空行。每欄至少三個連字號最保險。
- 03再寫內容列。原始碼裡不用對齊 —— 分格看的是豎線，不是欄。
| Part | Qty |
| ---- | --- |
| Bolt | 12 |
| Nut | 12 |<table>
<thead>
<tr>
<th scope="col">Part</th>
<th scope="col">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bolt</td>
<td>12</td>
</tr>
</tbody>
</table>scope 屬性是做什麼的
標題格出來是 <th scope="col">，不是加粗的 <td>。就靠這個屬性，螢幕閱讀器才能唸出「Qty，12」，而不是唸一個孤零零的數字、完全不知道它屬於哪一欄。
它不花什麼成本，卻是「一張表」和「一堆數字」的分界。用 div 拼出來的表格根本表達不了這件事 —— 這是不該那麼拼的最硬的理由。
對齊：帶冒號那一行
連字號那行裡的冒號按欄定對齊。左邊一個冒號是靠左，兩邊都有是置中，右邊一個是靠右 —— 數字欄要的就是最後這種。
轉出來的是 class，不是行內樣式：align-left、align-center、align-right。全站輸出都不留行內樣式，因為 style 屬性正是 CSS 注入進來的那道門。
所以整頁模式下對齊是直接生效的 —— <head> 裡的樣式表定義了這三個類別。片段模式把它們留給你自己的 CSS，這正是片段模式的意思：三行樣式，它就跟你的網站長得一樣，而不是跟你的網站打架。
| Item | Cost |
| :--- | ---: |
| Bolt | 0.40 |<th scope="col" class="align-left">Item</th>
<th scope="col" class="align-right">Cost</th>
...
<td class="align-left">Bolt</td>
<td class="align-right">0.40</td>表格轉成了一段文字
三個原因，按出現頻率排。
- 01標題列和連字號那行之間空了一行。表格解析器還沒看到它，它就已經被切成兩個段落了。
- 02某一格的文字裡有豎線。寫成 \| 轉義掉，否則那一格會被劈成兩格，整列就比標題列多出一格。
- 03連字號不夠。一欄一個連字號有的解析器認有的不認，三個是所有解析器都認的寫法。
格子裡能放的不只文字
行內 Markdown 在格子裡是有效的：粗體、斜體、行內程式碼、連結。區塊層級的不行 —— 清單、段落、圍籬程式碼區塊都不行。這是表格語法本身的限制，不是這個轉換器的。
格子裡換行要自己手寫一個 <br>。Markdown 裡的裸 HTML 在這兒是原樣透出去而不是轉義掉的，所以它有效，出去的時候和別的東西一樣過一遍淨化。
豎線表格變成 HTML 之後行為不一樣的地方，就這些了。轉換器接貼上的 Markdown，也接拖進來的 .md 檔案，什麼都不離開你的瀏覽器。
MD → HTML