テーブル（表組）を描く部分は、WordPressブロックエディターの弱点と言えます。それは決してクラシックエディターと比べてという話ではなく、従前からの弱点です。

この記事では、そんな中でテーブルをWordPressで簡単に、ノーコードで、キレイに、SEOに強い状態で描く方法についてご紹介します。

テーブル（table要素）とは

テーブル（表組）はエクセルなどで描き慣れている方が多いかと思いますが、そうである方ほど、WordPressの表現の自由の乏しさに残念な思いをされていることかと思います。

テーブルは視覚的に分かりやすい反面、目の不自由な方がスクリーンリーダーで読み上げるときの状況を想像してみてください。結構ややこしい構造を視覚的に伝えているということに気付かれるかと思います。以下の情報を、構造的にスクリーンリーダーなどの支援技術に伝える必要があります。

• 見出しであるということ
• 見出しの方向が縦なのか、横なのか
• そのセルは、どの見出しに対してのものなのか

このようなことまで考えるウェブデザインを、ウェブアクセシビリティと言います。

Googleはすべてのサイトをくまなく目で見てサイトを評価していると思いますか？Noであることはほぼ間違いないですよね（※）。スクリーンリーダーに正確に情報が伝えられるサイトというのは、Googleにも正確に情報が伝えられることになるのです。

※蛇足ですが、Googleは人の目で見た評価結果とAIの評価結果を照らし合わせてAIの精度を高めるということをしていると推測されます。

WordPressの標準で用意されているテーブルブロックは、なんとセルしか描けません。

アクセシビリティは、障がい者差別をなくすという意識が強いアメリカで特に進んでいる世界です。ちなみに日本はかなりの後進国です。まず法整備が遅れてきてます。ただし2021年5月の障害者差別解消法改正により、2024年6月3日までに民間企業もアクセシビリティ対応が義務化されることが決まっています。

WordPressはアメリカの企業が開発しているだけあって、それなりにアクセシビリティにコミットしています。だからこそなのかもしれませんが、意味的には見出しがつけられませんよ、ということをユーザーに示したいのか、セルごとに色を設定することさえできない状況です。いずれ進化するだろうと私は思ってたんですが、ブロックエディターが登場してもうだいぶ経つので、もうプラグインに任せてしまえという姿勢なのかもしれません。

できれば標準で対応していただきたいんですが・・

おすすめのプラグイン「Flexible Table Block」

おすすめのプラグインは、「Flexible Table Block」です。ちなみに開発者が日本人です。だからおすすめという訳でもないですが。

プラグインは、WordPress左側に表示されている「プラグイン」メニューで「新規追加」を押して、「Flexible Table Block」で検索すると出てくるので、それをインストールし、有効化します。

そうすると、ブロックの中に最初からある「テーブル」ブロックとは別に、「FlexibleTable」ブロックが表示されます。

このプラグインは最初からいい感じで登場しているとは思いますが、その後もかなり進化している感じがしています。

Flexible Table Blockの使い方

かなり直感的に使えるとは思いますが、よく必要とされると思う部分に絞って、一通りご説明します。

見出し（ヘッダー）有無、列数（カラム数）、行数を決める

「Flexible Table」を選択すると、次のような画面が表示されますので、以下は意識して入力した状態で「表を作成」ボタンを押下します。

• 「ヘッダーセクション」で、1行目を見出しにするかどうかを決める
• 「カラム数」で、列数を決める
• 「行数」で、行数を決める（書いてあるそのままですが・・）

各セルに文字を入力する

「表を作成」ボタンを押下すると次のようになると思います。

各セルにフォーカスを当てて、表示したい文字を入力しましょう。

え？何か変な文字が見えますか？品質と担当者に問題が多いサイトの改善相談が多いもので、心の叫びが表れてしまっているでしょうか。画像でalt属性を空にしているのでスクリーンリーダーに対しては装飾画像として伝えているものです。気にしないでください。

行または列を追加する

行または列を追加する場合、追加したい行または列のセルにフォーカスを当てて、テーブルマークの付いたアイコンをクリックします。ちなみにボタンのラベル名は、視覚的に見てる方だと分からないと思いますが「テーブルの編集」です。aria-labelでしっかりとラベルがつけられています。ちなみに「aria-label」で検索すると私の記事が上位に表示されます。

セルの結合をする

セルの結合をしたい場合、エクセルなどと同じように、Ctrlキーを押しながらセルを選択すると複数選択できるので、その状態で先ほどと同じテーブルマークの付いたアイコン（「テーブルの編集」ボタン）を押します。なお、Shiftを押しながら選択すると一度に複数のセルが選択されます。

色や、文字のセル内配置を変える

色や、文字のセル内配置の変更は、変更したい対象のセルを選択した状態で、右側のパネルに表示される設定部分で行います。

ボーダー色はグレーにするとキレイでしょう。当方のオリジナルテーマでは最初からそうなるようにCSSで設定してありますので、設定変更の必要はありません。

はい、とても分かりやすい（示すまでもない）表ができましたね。

「Flexible Table Block」でもできないこと

本当は、上に示している表は、事業者名の列を見出しにして、見出しが交差するテーブルにするべきなんですが、そこは現時点「Flexible Table Block」だとできないようです。

当方はHTMLを使ってコーディングをしていて「Flexible Table Block」は使っていないので、もし列にも見出しがつけられるようになっていることに気付かれた方は、問い合わせフォームで連絡をいただけると助かります。

交差する見出しをつけると、scope属性や、aria-label属性をつけるということを配慮しないといけないので、だいぶ開発が難しいのかもしれません。

BringFlowerがコーディングする表はそこまでやってます。ほとんどの日本のサイトは対応してません。そういうレベルの差の積み重ねがサイト全体のSEOの力の差として表れていると考えています。

まとめ

こんなアドバイスするはずもない悪徳業者に依頼するのはやめましょう。

あ、結局文字で書いてしまってるし。