Hexo中插入HTML表格出现过多空白的解决办法

早先我写博客的时候，就发现Hexo中插入HTML表格会留出大量空白。虽然markdown语法也是可以生成表格的，但是写的时候特别麻烦，所以我一直是直接插入的HTML表格的，仅仅是因为简单高效。当时，我刚搭建好这个博客,所以对hexo并不是很了解。我当时以为这只是在我个人markdown语法用的不对或者是编辑器造成的，造成了表格出现大量空白，此后也并没有解决这件事，遇到需要表格的文章时，都是直接插入图片代替的，大家在一些文章中可以看到表格基本都是用图片代替了。最近我又写博客的时候，又出现了这个问题，才发现这也许是hexo的一个bug。

下面开始分析并解决这个问题。

我用下面的HTML代码做一个表格。

<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>冰羽</td>
    <td>男</td>
  </tr>
</table>

Tips: 出现的大量空白是为了演示使用，这里会出现一个表格。

姓名	性别
冰羽	男

可以看到在atom编辑器中预览的时候，并没有出现大量的空白。这说明并不是编辑器的问题。而我用markdown语法写出的内容也没有任何涉及到表格的，也绝对不是markdown语法的问题。

我们可以在浏览器中右击“查看源代码”，找到这个表格会看到，多出很多<br>标签来。html中<br>标签用于换行。

我后来在hexo的Issues中也发现了其他人出现了这个问题。然后开始各种找解决办法,下面给出两种解决办法。

解决方法1

将代码改为紧凑模式，修改代码如下

<table><tr><th>姓名</th><th>性别</th></tr><tr><td>冰羽</td><td>男</td></tr></table>

也就是说代码标签之间不要留白，全部改为紧贴着的。

Tips：这里会出现一个表格，没有大量空白。

姓名	性别
冰羽	男

我们还可以利用这个Table Generator在线工具来编辑表格，提供了html表格和markdown表格来生成用于hexo的表格。

解决方法2(推荐)

{% raw %}
html tags & content
{% endraw %}

我们可以利用上面的格式来编写表格，我个人认为这种最为简单便捷。
我们只需要把代码修改为以下这样即可。

{% raw %}  
<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>冰羽</td>
    <td>男</td>
  </tr>
</table>
{% endraw %}

姓名	性别
冰羽	男

生成的表格同样不会出现大量空白。

本文作者：冰羽
本文地址： https://bingyublog.com/2018/08/20/hexo中插入HTML表格出现过多空白的解决办法/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！