No results found

Markdown使用table标签创建表格的问题

使用Markdown写东西有时需要插入表格,方式有两种:

  • 1.使用Markdown的表格语法
  • 2.使用html的<table>标签来创建表格

但是某些Markdown编辑器中使用<table>标签会出现表格前有空行的情况。

问题复现

先看使用Markdown语法创建表格:

1
2
3
4
5
| 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>标签创建:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>换行。

解决方法

解决办法是将代码改为紧凑模式,修改代码如下:

1
<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>

效果如下:(分割线中间的表格)


TablesAreCool
col 1 isleft-aligned$1600
col 2 iscentered$12
col 3 isright-aligned$1


说明

  • 1由于使用Haroopad编辑器写东西再用Hexo发布到Github上,所以会有这种情况出现。如果是其他编辑器,比如简书,这个不会有,因为简书压根儿不支持<table>标签的表格,CSDN上是支持的,不会出现以上问题。
  • 2.使用哪种方式创建表格根据自己的需要而定,Markdown语法简单,但是缺点是不支持列宽度定义,表格样式定义,单元格合并等。<table>标签相比较而言灵活很多。
  • 3.很多时候直接写表格代码是很累的,比较好的方案是在Excel中编辑,再生成代码,网上搜索相应工具也有很多,比如Tables Generator
  • 4.笔者使用Excel自行写了个生成<table>代码的工具生成压缩的表格代码,在EXCEL中编辑好表格,生成的表格代码列宽会根据Excel中的表格列宽转成百分比,编辑后点击生成表格代码即在Excel文件的同一目录中出现Output.txt文件,将代码复制到Markdown中即可。

代码生成工具下载

文章目录
  1. 1. 问题复现
  2. 2. 解决方法
  3. 3. 说明
|