Hugo中在Markdown中使用复杂表格

由于Markdown语法本身不包含复杂表格的插入，但是可以使用html语法来实现

Hugo中开启Html支持

1
2
3
4
5
6


config.yaml
 
markup:
  goldmark:
    renderer:
      unsafe: true

unsafe:
默认情况下, Goldmark 不会渲染原始 HTML 和潜在危险的链接。如果你有很多内联 HTML 和/或 JavaScript，你需要打开它。

html语法

复杂表格与简单表格最大的差异有两点：水平单元格的合并和纵向单元格的合并，通过html语法实现这两个操作本质就是：删除多余的空白单元格，然后使用某些单元格的colspan和rowspan属性进行扩展填充。

水平单元格的合并：基于colspan属性，即使一个单元格占多列的空间。纵向单元格的合并：基于rowspan属性，即使一个单元格占多行的空间。

合并行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<table>
    <tr>
        <td>列一</td>
        <td>列一</td>
   </tr>
    <tr>
        <td colspan="2">合并行</td>
    </tr>
    <tr>
        <td colspan="2">合并行</td>
    </tr>
</table>

显示效果:

列一	列一
合并行
合并行

合并列

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<table>
    <tr>
        <td>列一</td>
        <td>列二</td>
   </tr>
    <tr>
        <td rowspan="2">合并列</td>
        <td >行二列二</td>
    </tr>
    <tr>
        <td >行三列二</td>
    </tr>
</table>

显示效果：

列一	列二
合并列	行二列二
合并列	行三列二

合并行列

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<table>
    <tr>
        <td>列一</td>
        <td>列二</td>
   </tr>
   <tr>
        <td colspan="2">合并行</td>
   </tr>
   <tr>
        <td>列一</td>
        <td>列二</td>
   </tr>
    <tr>
        <td rowspan="2">合并列</td>
        <td >行二列二</td>
    </tr>
    <tr>
        <td >行三列二</td>
    </tr>
</table>

显示效果：

列一	列二
合并行
列一	列二
合并列	行二列二
合并列	行三列二