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

Sun, 15 May 2022 00:00:00 +0000

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

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

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

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

html構文

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

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

行を結合する

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

表示効果:

列一	列一
合并行
合并行

列を結合する

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

表示効果:

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

行と列を結合する

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

表示効果:

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

複雑なテーブル on KnightLiブログ

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

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

html構文

行を結合する

列を結合する

行と列を結合する