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>

顯示效果：

列一	列二
合併行
列一	列二
合併列	行二列二
合併列	行三列二