この記事では、WordPressで表（テーブル）を作成する方法をブロックエディタを使用した方法とHTMLで直接記述する方法を紹介します。またテーブルの簡単なカスタムの方法とサンプルを紹介します。
ブロックエディタで表を作成
初めに、WordPressのブロックエディタのGutenberg（WordPress5.0以降標準エディタ）を使用して簡単に表を作成する方法を紹介いたします。
Gutenbergで表を作成するには、ブロックの追加から「表（テーブル）」を選択します。
列（縦軸）と行（横軸）の本数を求められます。それを任意の数入力したら「表を作成」のボタンを押して完成です。
表を選択した状態でエディタの右側にある設定でヘッダーとフッターの追加や色の変更が可能です。またブロック上のタブメニュー左でテーブルのスタイルを変更できます。
下記が実際に追加した表です。
| ヘッダーセクション | |
|---|---|
| 行1 | 行2 |
| 列1 | 列2 |
| フッターセクション |
下記は上記のテーブルのHTMLです。WordPressのテーブルはwp-block-tableのstyleが適応されています。
<figure class="wp-block-table is-style-regular">
<table class="has-subtle-pale-blue-background-color has-fixed-layout has-background">
<thead><tr>
<th>ヘッダーセクション</th>
<th></th>
</tr></thead>
<tbody>
<tr>
<td>行1</td>
<td>行2</td>
</tr><tr>
<td>列1</td>
<td>列2</td>
</tr>
</tbody>
<tfoot><tr>
<td></td>
<td><strong>フッターセクション</strong></td>
</tr></tfoot>
</table>
</figure>HTMLで表を作成
次にブロックエディタ（WordPressのクラス）を使わずに作成する方法です。いわばHTMLで直接表を作成する方法になります。
ブロックエディタのカスタムHTMLに下記の様に、tableタグで囲ってtbで囲った部分にテキストを記述していきます。tbodyはあっても無くてもOKです。ヘッダーエリアやフッターエリアを設けるならあった方が良いです。
<table>
<tbody>
<tr>
<td>行1</td>
<td>行2</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</tbody>
</table>見え方は下記の様になります。
| 行1 | 行2 |
| 列1 | 列2 |
HTMLで直接記述していく場合はスタイルを記述して形を整えていきましょう。
以上がWordPressで表を入れる方法とカスタムの見本でした。
tableはブログやHP制作で結構多用する要素なので、是非覚えて活用していきましょう。
下記のページにtable（表）のデザインの見本を色々作ってみました。是非参考にしてみて下さい。
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
