TinyMCE AdvancedでTableを作成する方法

tinymce-table
WordPressでテーブル(表)を作成する専用プラグインとしては、「TablePress」等がありますが、「TinyMCE Advanced」プラグインだけで、どこまで「TablePress」で作成したテーブル(上の図)に近づけられるか試してみました。

TinyMCE AdvancedでTableを作成する方法

「ビジュアル」モードの「テーブル」アイコンのプルダウンメニューから「テーブルを挿入」を選択し、4×2のテーブルを挿入します。(セルに文字が入力されていないと、表示されるテーブルが小さいため、セルに白色の文字を入力しています。)

テーブルを選択し、「テーブル」アイコンのプルダウンメニューから「表のプロパティ」を選択し、以下の図のように「幅」に100%を入力し、「OK」ボタンをクリックします。

tinymce-table-2
すると、テーブルが以下のようになります。

テーブルの各セルに文字・数値を入力します。

Library Time (ms) forward (ms) backward (ms)
Caffe *1 321 98 222

すると、等間隔だったセルが、セルに入力した文字・数値に合わせて自動的に調整されます。

上の行を選択し、「テーブル」アイコンのプルダウンメニューから「セルのプロパティ」を選択し、以下の図のように「セルの種類」のプルダウンメニューから「ヘッダーセル」を選択し、「OK」ボタンをクリックします。なお、セルを等間隔にする場合、このテーブルでは「幅」に25%(=100%÷4)を入力します。

tinymce-table-3
すると、上の行がヘッダーセルの書式に変更されます。

Library Time (ms) forward (ms) backward (ms)
Caffe *1 321 98 222

また、見た目の変化はありませんが、上の行を選択し、「テーブル」アイコンのプルダウンメニューから「行のプロパティ」を選択し、「行の種類」のプルダウンメニューから「ヘッダー」を選択し、「OK」ボタンをクリックしておきます。

下の行のセルを選択し、「テーブル」アイコンのプルダウンメニューから「セルのプロパティ」を選択し、以下の図のように「横配置」のプルダウンメニューから「左」「中央」「右」等を選択し、「OK」ボタンをクリックします。

tinymce-table-4

すると、以下のようにテーブルとなります。

Library Time (ms) forward (ms) backward (ms)
Caffe *1 321 98 222

更に、ヘッダーセルの背景色や、枠線の色を変更すると、以下のようなテーブルとなります。なお、「ビジュアル」モードでは、枠線が点線で表示されていますが、「プレビュー」では、枠線が実線で表示されます。

Library Time (ms) forward (ms) backward (ms)
Caffe *1 321 98 222

まとめ

tinymce-table

「TablePress」で作成した簡単なテーブル(上の図)であれば、「TinyMCE Advanced」プラグインだけでも、結構似た感じにできることが分かりました。