【Visual Studio Code】Markdownのテーブル結合方法
VSCode
Markdown
2021/08/16
前提
前提条件として、Visual Studio Code で「Markdown Preview Enhanced」を使用します。 その他のエディタなどでは機能しないことがありますのであらかじめご了承ください。
「Markdown Preview Enhanced」の基本的な使い方についてはこちらを参照してください。
設定の変更
テーブルの結合を行うためには、「Markdown Preview Enhanced」の設定を変更する必要があります。
Visual Studio Code の設定で「Markdown-preview-enhanced: Enable Extended Table Syntax」を検索し、チェックをつけてください。 デフォルトでは無効となっています。
基本構文
テーブルの基本構文は以下になります。
Markdown
|header1|header2|header3|
|:------|:-----:|------:|
|hoge |fuga |piyo |
|hoge |fuga |piyo || header1 | header2 | header3 |
|---|---|---|
| hoge | fuga | piyo |
| hoge | fuga | piyo |
テーブルの結合
横方向
横方向にセルを結合する場合は、何も設定しないか>を設定します。
文字の位置を指定する場合は、表示する文字のセル位置に注意が必要です。
Markdown
|header1|header2|header3|
|:------|:-----:|------:|
|hoge |fuga |piyo |
|hoge | |piyo |
|> |fuga |piyo |
|hoge |fuga | |
|hoge |> |piyo |
|hoge | | |
|> |fuga | |
|> |> |piyo || header1 | header2 | header3 |
|---|---|---|
| hoge | fuga | piyo |
| hoge | piyo | |
| fuga | piyo | |
| hoge | fuga | |
| hoge | piyo | |
| hoge | ||
| fuga | ||
| piyo | ||
縦方向
縦方向にセルを結合する場合は、^を設定します。
Markdown
|header1|header2|header3|
|:------|:-----:|------:|
|hoge |fuga |piyo |
|hoge |^ |^ |
|hoge |fuga |^ || header1 | header2 | header3 |
|---|---|---|
| hoge | fuga | piyo |
| hoge | ||
| hoge | fuga |
混合
上記 2 つは組み合わせることができます。
Markdown
|header1|header2|header3|
|:------|:-----:|------:|
|hoge |> |piyo |
|hoge |^ |^ |
|hoge |^ |^ |
|hoge | |piyo |
|^ |^ |piyo || header1 | header2 | header3 |
|---|---|---|
| hoge | piyo | |
| hoge | ||
| hoge | ||
| hoge | piyo | |
| piyo | ||