【2020年5月時点】WordPressで表を作成する方法まとめ

WordPressで表で作成する場合、HTMLで書く・Excel等からコピーするなどいくつか方法がある。Gutenbergになってからはブロックの追加からも表の作成が行えるようになったようなのでまとめて紹介してみたいと思う。

テーブルブロックの追加

以前はできなかったようだがGutenbergになってからはテーブルブロックから表の作成ができるようになった。

まずブロックを追加する(〇で囲まれた+の部分をクリックする)。

見当たらない場合は縦向きの三点リーダ(…)の部分をクリック→ブロックに変換をクリックする。

表(テーブル)を選択する。見当たらない場合はフォーマットをクリックして表(テーブル)を選択する。

列数・行数を決めてOKをクリックする。

これで表が挿入される。

プラグインを入れずにできるので一番お手軽なのだが欠点はデザインのカスタマイズ性が低いこと。表の幅を調整できなかったり、見た目については使用するテーマによって左右されたり。

 

Word・Excelなどからコピーする

Word・Excel・Googleスプレッドシートを使っている人ならこれが一番無難な方法。表を作成してコピーをし、記事内に貼り付けるだけで簡単に表を作成できる。

Word・Excel・Googleスプレッドシートで表を作成したら表全体をドラッグしてCtrl+Cを押す。

WordPressを開き、表を挿入したい部分にカーソルを移動させてCtrl+Vを押す。

先ほど作成した表が挿入される。

表のデザインも(一部を除き)コピーされるので見栄えも考慮したい場合はこれがおすすめ。ただし欠点として挿入後の表の編集がめんどくさいこと。貼り付けた表を編集したい場合は一旦消して貼りなおすか、HTMLモードに変更してHTMLをいじる必要がある。

 

プラグイン「Tiny MCE Advanced」を使う

Word・Excel・Googleスプレッドシートを持っていない人で表のデザインもある程度こだわりたい人ならこれ。まず「プラグイン」からTiny MCE Advancedを検索して導入する。

導入したら「設定」からTiny MCE Advancedを選択する。

「クラシック版の段落とクラシックブロックのツールバー」までスクロールして、「テーブル」をドラッグしてツールバーに入れて設定を保存する。

設定後記事を書く時に出てくるツールバーから表の作成ができるようになる。

表を作成したいところにカーソルを移動してツールバーからテーブルを選択する。

右側のマス目の部分をクリックすると表が挿入される。

表を作成した後に行(列)を追加・削除したかったりセルを結合させたり背景色をつけたい場合、編集したい部分をドラッグした後同じくツールバーからテーブルを選び編集する。

WordやExcelがない場合はこれが一番やりやすい方法だと思う。デザインもある程度カスタマイズできるるが、とことんこだわり始めると対応しきれないことも。

 

HTMLで直接書く

HTML編集から直接書き込んで表を作成する方法。当然のことながらHTMLでの表の書き方を覚えないといけないので手軽に表を作りたい場合は不向き。

ただデザインのカスタマイズの自由度は一番高い。HTMLの他にCSSも覚える必要があるがデザインにとことんこだわるのであればこれ一択。

HTMLで表を作成するときに参考になりそうなサイト↓

表(table)の作り方と装飾の変え方【HTML&CSS】
HTMLのtableの使い方をまとめました。セルを結合する方法やCSSでデザインを変える方法(隙間や幅、枠線)まで解説しています。

コメント

タイトルとURLをコピーしました