WordPressで二重構造（入れ子構造）のテーブル・表を作る方法。属性「colspan=””」を使う。

今回は、WordPress（ワードプレス）で、セルを結合したテーブル・表（二重構造の表？）を作る方法を解説します。

なお、WordPressに搭載されている標準のブロックエディターにはテーブルを作成するための便利な「テーブル」機能がついています。次の画像で見てください。

この機能を使えばすぐにテーブル・表を作ることは可能です。

しかし今回はこの標準機能を使わずに、HTMLの勉強もかねてHTMLのタグを実際に入力する方法で作成していきます。少し面倒ですが、がんばりましょう。やはりHTMLタグを手動入力するほうが地力がつきますし、応用力がつくと思いますから。

Contents

1 出来上がったテーブル・表
2 HTMLタグの要素に属性「colspan」を指定することがポイント
3 WordPressのブロックエディタの注意点：適切なHTMLコードが反映されない

出来上がったテーブル・表

今回作成するテーブル・表は次のようなものです。

見出しの「年齢」「性別」「エリア」ごとに、それぞれ2つずつの要素を含んでいることがわかると思います。

一方で、一番基本的な表だと次のようになります。

2つ並べてみましょう。違いは明らかですね。

今回はこの下のテーブル・表を作ることを目指します。

HTMLタグの要素に属性「colspan」を指定することがポイント

ではさっそく今回のHTMLタグを示します。

<figure class="wp-block-table"><table><tbody>
  <tr>
    <th colspan="2">年齢</th>
    <th colspan="2">性別</th>
    <th colspan="2">エリア</th>
  </tr>
  <tr>
    <td>21以上</td><td>20歳以下</td>
    <td>男</td><td>女</td>
    <td>関西</td><td>関東</td>
  </tr>
  <tr>
    <td>5人</td><td>6人</td>
    <td>8人</td><td>3人</td>
    <td>４人</td><td>７人</td>
  </tr>

</tbody></table></figure>

ポイントは、表の見出しである3つの「th」要素のところに、それぞれ「colspan=”2″」という属性がついてることです。

この「colspan=”2″」は、「2つ」の横に隣り合うセルを結合させる機能があります。

ここでは、見出しの「年齢」は、「21歳以上」と「20歳以下」の2つの要素を含んでいますので、年齢の中で、それらをまとめて放り込むわけです。