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

WordPress(ワードプレス)のテーブル・表の作り方。セルを結合する方法。

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

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

WordPress(ワードプレス)のテーブル作成機能アイコン
WordPress(ワードプレス)のテーブル作成機能アイコン

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

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

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

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

WordPressでのテーブル・表の作り方
完成画像

見出しの「年齢」「性別」「エリア」ごとに、それぞれ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>4人</td><td>7人</td>
  </tr>

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

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

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

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

  • 収納される情報(箱の中身):21歳以上、20歳以下
  • 収納先(箱):年齢

ということです。重要なことは、収納先(中身ではなく箱)のHTML要素にたいして、「colspan=”2″」という属性を記述することです。

WordPressのテーブル・表の作り方
WordPressのテーブル・表の作り方 colspan=”2″の使い方

「colspan=”2″」の数字「2」は結合させたいセルの数に応じて変更させることが可能です。もし「3」と指定するなら、横に隣り合う3つのセルが結合され1つの箱に入るという感じです。

今回は横並びの隣合うセルを結合させましたが、実は縦に並ぶセルも結合させることができます。その場合は、「rowspan=” “」という属性を使います。詳しくは、HTMLの解説ページなどを検索して調べてみてください。

WordPressのブロックエディタの注意点:適切なHTMLコードが反映されない

今回、ここで1つ注意点があります。

WordPressの現行の最新(2020年9月時点)のブロックエディタでは、HTMLコードを以下の2つの方法でコピペして記述することが可能です。

方法1:「カスタムHTML」の新ブロックを作成して、その後、そこにHTMLコードをコピペする

方法2:「カスタムHTML」の新ブロックを作成しないで、そのままブロックエディタに単純にコピペする

今回作成するテーブル・表のHTMLコードは、方法1で作成してください。

WordPressのテーブル・表

方法2だと、ブロックエディタ上の見た目は「colspan=” “」が無視された状態で表示される可能性があり、「あれ?コードはあってるはずなのに、なぜ?」という罠にハマってしまいます。この点に注意してください。

稼げるプログラミングスキルを手に入れるために

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。