WordPressテーブル機能で比べてみるTHE THORとSWELL

このブログではワードプレステーマ「THE THOR」と「SWELL」で使える機能一つひとつ取り上げて真剣レビューする連載を続けています。

今回は情報の整理に役立つ「テーブル機能」で比べてみました。

テーブルは一覧性が高く理解促進におおいに役立つ一方で、画面の小さいスマホで見るとかなり窮屈な見た目になりやすいので、使いどころが悩ましい機能です。

わたし自身はTHE THORよりもSWELLをおすすめしているのですが、「テーブル」という機能に限って比べてみると、手放しにSWELLをおすすめすることが難しかったです。
（正確にはSWELLというよりブロックエディターのテーブルがちょっとおすすめしにくい。）

このあたりの理由について、順を追って詳しく説明したいと思います。

この記事のSWELL公式マニュアルはこちら

「テーブルブロック」で使えるSWELLのオリジナル機能 | 【公式サイト】WordPressテーマ SWELL

THE THOR テーブル機能

まずはTHE THORのテーブルの解説から…

テーブルデザイン一覧

基本（default）

点線

色の設定

THE THORではテーブルの色を細かく設定することができます。

例えばこんな感じ

テーブルデザインの設定方法

THE THORのテーブルデザインは「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「テーブル設定（個別ページ用）」で行います。

「テーブル設定（個別ページ用）」では、先ほど紹介したデザインと各要素の色が指定できる項目が並んでいます。

お好みで設定してください。

テーブルの色は、ヘッダーセルを除いてエディターからでも直接変更することができます。

テーブルの使い方

THE THOR（正確にはビジュアルエディター）のテーブルの設置方法はとてもシンプルです。

テーブルの設置

ヘッダーの設定

各要素の色の変更

THE THORではエディターからセルの色、線の色やスタイルを変更することができます。

変更する場合は、「テーブル＞セル」の「セルのプロパティ」を開いてください。

「高度な設定」タブでセルの色を変更できます。

セルの結合

THE THORではブロックエディターではできないセルの結合が可能です。

結合したいセルを選択した状態で「テーブル＞セル」の「セル結合」をクリックするだけで結合できます。

スマホテーブル横スクロール機能

THE THOR には「スマホテーブル横スクロール」という機能があります。

SWELL テーブルブロック

ここからはSWELLのテーブルブロックの解説です。

テーブルスタイル一覧

SWELLでは、4種類のスタイルを選ぶことができます。

デフォルト

ストライプ

シンプル

二重線

表の設定

表のセル幅を固定

セルの文字数に関係なく、セル幅を均等に表示します。

ヘッダーセクション

テーブルの先頭行に見出しとなるヘッダーが追加されます。

フッターセクション

テーブル最後尾行にフッターが追加されます。

見た目はヘッダーほど変わらないです。

背景色の設定

セルの背景色を4色から選択できます。

設定イメージ

SWELLのテーブルで注意したいこと

テーブル設定

1列目（つまり左端の縦列）を見出し風（tdをth風）にできたり、各列の最低幅の設定ができたりします。

ここの設定は上述の「表の設定」とマージしても良いんじゃないかな？って思ってます。

1列目のtdをth風にしたイメージ

スマホでの追加設定

テーブルはPCでは見やすいですが、スマホではどうしても窮屈になってしまいがちです。

SWELLではスマホの画面サイズでもテーブルが読みやすくなるような追加設定ができます。

縦並びにする

「ヘッダーセクション」はなし、「1列目のtdをth風に」はONにすると見やすくなります。

テーブルヘッダーを固定表示する

横スクロール可能にする

表の横幅は 800px になります

表の右上に「スクロールできます」というガイドテキストが表示されます。
（親切ですね。）

テーブルブロックの使い方

テーブルの設置

ブロックエディターではセルの結合ができません。

まとめ

複雑なテーブルを作るならTHE THOR（ビジュアルエディター）がおすすめ

両テーマ比較してみて、テーブル機能を利用するにあたって、多くのニーズに応えられるのはTHE THOR（ビジュアルエディター）の方だと思いました。

テーブルデザインの設定のしやすさ、見た目の良さはSWELL（ブロックエディター）だと思いますが、セルの結合や色のカスタマイズがTHE THORに比べると貧弱です。

せめてヘッダーセクションとテーブル背景色が自由に設定できると嬉しいのですが…。

スマホに配慮するならテーブルはなるべく使わない

ただし、SWELL（ブロックエディター）のテーブル機能がTHE THOR（ビジュアルエディター）より劣っていてもあまり問題にならないと考えています。

なぜなら今の時代、デバイスの主流はスマホだからです。

テーブルは情報が整理されて見やすいですが、それは大きな画面で見ることが前提です。

画面サイズが限られたスマホでは、以前ほど有効なデザインではないと考えています。

テーブルの代わりにリスト形式の表示がおすすめ

スマホだとテーブルはむしろ見えづらいとなると代わりのデザインが必要になります。

わたしの中のひとつの答えが縦に並べるリスト表示の活用です。

SWELLではカラムブロックの「スマホでの列数設定」を2列に指定することができるので、このように2つの項目を横並びにすることができます。

カラムブロック＆リストブロック

他にも説明リストブロックとリストブロックあたりを使うとテーブルのように情報を整理しつつ、スマホでも見やすいデザインになります。

説明リストブロック＆リストブロック

見出し1

• リスト1
• リスト2
• リスト3

見出し2

1. リスト1
2. リスト2
3. リスト3

説明リストは横並び表示もできて便利です。

見出し1

• リスト1
• リスト2
• リスト3

見出し2

1. リスト1
2. リスト2
3. リスト3

見出しの部分はアコーディオンに替えるのもアリです。

アコーディオンブロック＆リストブロック

このように伝えたい内容に鑑みて適宜デザインを使い分けしていくのが最適解だと思います。

SWELLのブロックはスマホでも見やすい

テーブル機能はSWELLの方が劣後するという結論ではありましたが、デバイスの主流がスマホであることを考えるとテーブル機能のマイナス部分の影響は小さいと思います。

むしろ、ブロックエディターがテーブル機能を拡充しないのはこういったデバイス事情を考慮してのことなのではとさえ思えてきました。

先ほど紹介した通り、SWELLにはスマホでも見やすいオリジナルブロックが多数用意されています。

これだけ見やすいブロックがあるなら、テーブル機能のマイナスなんて些細なことです。

ワードプレスに標準搭載されているブロックもより使いやすいようにカスタマイズされているところも嬉しいポイント。

この記事が役にたったらようでしたら、SWELL公式サイトもご覧になっていただけますか？

ここでは紹介しきれない素晴らしい機能が盛りだくさんです。