Markdown使用table標籤建立表格的問題
阿新 • • 發佈:2019-01-06
使用Markdown寫東西有時需要插入表格,方式有兩種:
- 1.使用Markdown的表格語法
- 2.使用html的
<table>
標籤來建立表格
但是某些Markdown編輯器中使用<table>
標籤會出現表格前有空行的情況。
問題復現
先看使用Markdown語法建立表格:
| Tables | Are | Cool |
|----------|:-------------:|------:|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
效果如下(分割線中間的表格)
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned | $1 |
同樣的表格使用<table>
標籤建立:
<table>
<tr>
<th>Tables</th>
<th>Are</th>
<th>Cool</th>
</tr>
<tr>
<td>col 1 is</td>
<td>left-aligned</td>
<td>$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td>centered</td>
<td>$12</td>
</tr>
<tr>
<td >col 3 is</td>
<td>right-aligned</td>
<td>$1</td>
</tr>
</table>
效果如下:(分割線中間的表格)
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned | $1 |
會發現表格前多了很多</br>
換行(注意效果裡的</br>
程式碼是我加的,因為CSDN的Markdwon不會有這種情況出現)。
解決方法
解決辦法是將程式碼改為緊湊模式,修改程式碼如下:
<table><tr><th>Tables</th><th>Are</th><th>Cool</th></tr><tr><td>col 1 is</td><td>left-aligned</td><td>$1600</td></tr><tr><td>col 2 is</td><td>centered</td><td>$12</td></tr><tr><td>col 3 is</td><td>right-aligned</td><td>$1</td></tr></table>
效果如下:(分割線中間的表格)
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned | $1 |
說明
- 1由於使用Haroopad編輯器寫東西再用Hexo釋出到Github上,所以會有這種情況出現。如果是其他編輯器,比如簡書,這個不會有,因為簡書壓根兒不支援
<table>
標籤的表格,CSDN上是支援的,不會出現以上問題。 - 2.使用哪種方式建立表格根據自己的需要而定,Markdown語法簡單,但是缺點是不支援列寬度定義,表格樣式定義,單元格合併等。
<table>
標籤相比較而言靈活很多。 - 3.很多時候直接寫表格程式碼是很累的,比較好的方案是在Excel中編輯,再生成程式碼,網上搜索相應工具也有很多,比如Tables Generator。
- 4.筆者使用Excel自行寫了個生成
<table>
程式碼的工具生成壓縮的表格程式碼,在EXCEL中編輯好表格,生成的表格程式碼列寬會根據Excel中的表格列寬轉成百分比,編輯後點擊生成表格程式碼
即在Excel檔案的同一目錄中出現Output.txt
檔案,將程式碼複製到Markdown中即可。