Markdown: 表テーブルを作る <table>
Markdownで表テーブルを作成する方法を解説します。
表テーブルを作る場合は、
次のように |（縦棒）、-（ハイフン）、:（コロン）を使います。
| Head1 | Head2 | Head3 | | :---- | :---: | ----: | | Data1 | Data2 | Data3 | | Data4 | Data5 | Data6 |
Markdownでの表テーブル作成は、
「ヘッダー部分」「アラインメント部分（揃え方）」「データ部分」
の3つの部分から構成されています。
上に記載したサンプルテーブルを元に解説していきます。
ヘッダー部分
ヘッダー部分は1行目です。
| Head1 | Head2 | Head3 |
表テーブルの列の名前を表示する部分です。
通常、ヘッダーは太字で表示され
「ヘッダー部分の列数 = 表テーブルの列数」となります。
アラインメント部分（揃え方）
アラインメント部分は2行目です。
| :---- | :---: | ----: |
アラインメント部分はデータの揃え方です。
:（コロン）と -（ハイフン）の位置で、
左揃え・中央揃え・右揃えを決めます。
設定されるのは列単位で、個別の指定はできません。
| 揃え方 | 記法 |
|---|---|
| 左揃え | :---（または ---) |
| 中央揃え | :---: |
| 右揃え | ---: |
-（ハイフン）は何個記述してもかまいません。 通常は最低3個必要とされていますが、サービスやツールによります。 例として「Visual Studio Code」では -（ハイフン）が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>