Markdown: 表テーブルを作る <table>

表テーブル <table>

Markdownで表テーブルを作る場合は、 次のように |(縦棒)、-(ハイフン)、:(コロン)を使います。

| Head1 | Head2 | Head3 |
| :---- | :---: | ----: |
| Data1 | Data2 | Data3 |
| Data4 | Data5 | Data6 |

Markdownでの表テーブル作成は、3つの部分から構成されています。

  • ヘッダー部分
  • アラインメント部分(揃え方)
  • データ部分

上に記載したサンプルテーブルを元に、それぞれ解説していきます。

ヘッダー部分

ヘッダー部分は1行目です。

| Head1 | Head2 | Head3 |

表テーブルの列の名前を表示する部分です。
通常、ヘッダーは太字で表示され 「ヘッダー部分の列数 = 表テーブルの列数」となります。

アラインメント部分(揃え方)

アラインメント部分は2行目です。

| :---- | :---: | ----: |

アラインメント部分はデータの揃え方です。
:(コロン)と -(ハイフン)の位置で、 左揃え・中央揃え・右揃えを決めます。 設定されるのは列単位で、個別の指定はできません。

揃え方記法
左揃え:---(または ---)
中央揃え:---:
右揃え---:

-(ハイフン)は何個記述してもかまいません。 通常は最低3個必要とされていますが、サービスやツールによります。 例としてVSCodeでは -(ハイフン)が1つでも認識してくれます。

データ部分

データ部分は3行目以降の部分で、上のサンプルでは次の2行がデータ部分です。

| Data1 | Data2 | Data3 |
| Data4 | Data5 | Data6 |

データ部分はデータを記述する部分です。 行数は何行でも記述できます。

列数に関しては、ヘッダー部分の列数よりもデータ部分の列数が多い場合は無視されます。 あくまでヘッダー部分の列数がテーブル全体の列数となります。
逆にデータ部分の列数が少ない場合は、空白が入ります。

Markdown

ではMarkdown記法と、対応するHTMLを見ていきます。

データ部分が2行3列で、 左から左揃え、中央揃え、右揃えとなっています。

| Head1 | Head2 | Head3 |
| :---- | :---: | ----: |
| D1 | D2 | D3 |
| D4 | D5 | D6 |

HTML

上のアラインメント部分で指定した揃え方(text-align) が反映されているのがわかります。

<table>
<thead>
<tr>
<th style="text-align:left">Head1</th>
<th style="text-align:center">Head2</th>
<th style="text-align:right">Head3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">D1</td>
<td style="text-align:center">D2</td>
<td style="text-align:right">D3</td>
</tr>
<tr>
<td style="text-align:left">D4</td>
<td style="text-align:center">D5</td>
<td style="text-align:right">D6</td>
</tr>
</tbody>
</table>