Hugo の Markdown で複雑なテーブルを使用する

Markdown 構文自体には複雑なテーブルは含まれていませんが、HTML 構文のテーブルを使用して実装できます。デフォルトでは、Hugo は HTML 構文をサポートしていませんが、構成を通じて有効にすることができます。

Markdown 構文自体には複雑なテーブルの挿入が含まれていないため、HTML 構文を使用して実現できます。

Hugo で HTML サポートを有効にする

1
2
3
4
5
6


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

unsafe:
デフォルトでは、Goldmark は生の HTML と潜在的に危険なリンクをレンダリングしません。インライン HTML や JavaScript が大量にある場合は、これをオンにする必要があります。

html構文

複雑なテーブルと単純なテーブルの間には、水平セルの結合と垂直セルの結合という 2 つの大きな違いがあります。 HTML 構文を通じてこれら 2 つの操作を実現する本質は、冗長な空白セルを削除し、特定のセルの Colspan 属性と rowspan 属性を使用して塗りつぶしを拡張することです。

水平方向のセルの結合: 1 つのセルが複数の列のスペースを占めている場合でも、colspan 属性に基づきます。垂直セルの結合: 1 つのセルが複数の行のスペースを占めている場合でも、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>

表示効果:

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