【Visual Studio Code】Markdownのテーブル結合方法

ツール

前提

Markdown Preview Enhancedという拡張機能を用います。

基本的な使い方はこちらの記事を参考にしてください。

【Visual Studio Code】Markdownの導入と基本的な使用方法
Visual Studio CodeでMarkdownを使うためにMarkdown Preview Enhancedという拡張機能を追加します。ここではMarkdown Preview Enhancedの基本的な使い方について説明していきます。

テーブルの結合方法

基本構文

テーブルの基本構文は以下になります。

|header1|header2|header3|
|:--|:-:|--:|
|hoge|fuga|piyo|
|hoge|fuga|piyo|
<table>
  <thead>
    <tr>
      <th style="text-align:left">header1</th>
      <th style="text-align:center">header2</th>
      <th style="text-align:right">header3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">hoge</td>
      <td style="text-align:center">fuga</td>
      <td style="text-align:right">piyo</td>
    </tr>
    <tr>
      <td style="text-align:left">hoge</td>
      <td style="text-align:center">fuga</td>
      <td style="text-align:right">piyo</td>
    </tr>
  </tbody>
</table>

設定の変更

テーブルの結合機能を使うためには、Markdown Preview Enhancedの設定を変更する必要があります。

VSCodeの設定画面から、「Markdown-preview-enhanced: Enable Extend Table Syntax」を検索し、チェックを付けてください。

デフォルトでは無効になっています。

テーブルの結合

横方向の結合

横方向の結合を行う場合は、何も設定しないか「>」を設定します。text-alignを気にする場合は、表示する文字のセル位置に気をつけてください。

|header1|header2|header3|
|:--|:-:|--:|
|hoge|fuga|piyo|
|hoge||piyo|
|>|fuga|piyo|
|hoge|fuga||
|hoge|>|piyo|
|hoge|||
|>|fuga||
|>|>|piyo|

縦方向の結合

縦方向の結合を行う場合は、「」を使います。

|header1|header2|header3|
|:--|:-:|--:|
|hoge|fuga|piyo|
|hoge|^|^|
|hoge|fuga|^|

組み合わせ

縦横ともに結合を行う場合は、次のようにします。

|header1|header2|header3|
|:--|:-:|--:|
|hoge|>|piyo|
|hoge|^|^|
|hoge|^|^|
|hoge||piyo|
|^|^|piyo|

 

- Visual Studio Codeのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました