Markdown之表格的處理

楊帆發表於2012-06-19

目前編輯器不支援表格,以往是通過截圖,呈現的效果並不好,Markdown支援html,所以我們可以用html來寫表格。但是......用html寫表格,實在太麻煩了,這裡有個簡單的轉換方法,供大家參考:

舉例,假設有這樣一個表格,內容如下:

時間 地點 人物
3月5日 北京 姚明
3月7日 上海 韓寒

處理方法如下:

  1. 從word或excel中複製表格

  2. 開啟此連結

  3. 貼上覆制的文字,然後按convert,就會得到這個表格的程式碼,如圖所示:

    enter image description here

簡要說明表格設定如下:

  1. 將第一個 <table>變成<table class="table table-bordered table-striped table-condensed">

    enter image description here

    為什麼要加它們呢?這三個是什麼意思呢?解釋如下:

    它們都會給表格帶上某種樣式,如果沒有的話,比較不好看:

    • table-bordered:帶圓角邊框和豎線
    • table-striped:奇偶行顏色不同
    • table-condensed:壓縮行距

    以上三個可以進行不同的組合,如果是很長的表格,建議只用後兩個。

  2. 另外,如果需要表頭跟內容不一樣,可以將<td>表頭內容</td>換成<th>表頭內容</th>

  3. 如果表格內文需要換行,可以在要換行的內容後加入<br>,後面的內容就會跑到下一行。

  4. 如果內文中有程式碼,需要特別顯示,可使用:<code>程式碼</code>

  5. 如果表格中有需要設為斜體的內容,可使用:<I>要設為斜體的內容</I>

  6. 如果有跨行或者跨列的單元格,可用<th colspan="跨列數">內容</th>
    跨行則是用rowspan="跨行數"

  7. 如果要調整某一列的寬度,可使用:<th width="寬度值或百分比">表頭內容</th>

  8. 如果要調整整個表格的寬度,可以參考berlinix的這篇文章:http://www.ituring.com.cn/article/details/8367

把最後得到的程式碼複製到文中,下面就是結果啦:

時間 地點 人物
3月5日 北京 姚明
3月7日 上海 韓寒

如果大家對此感興趣,這裡有一個進階資料:http://twitter.github.com/bootstrap/base-css.html#tables,感謝大胖指點^^

相關文章