WordPressでテーブル(表)を作成する専用プラグインとしては、「TablePress」等がありますが、「TinyMCE Advanced」プラグインだけで、どこまで「TablePress」で作成したテーブル(上の図)に近づけられるか試してみました。
TinyMCE AdvancedでTableを作成する方法
「ビジュアル」モードの「テーブル」アイコンのプルダウンメニューから「テーブルを挿入」を選択し、4×2のテーブルを挿入します。(セルに文字が入力されていないと、表示されるテーブルが小さいため、セルに白色の文字を入力しています。)
あ | あ | あ | あ |
あ | あ | あ | あ |
テーブルを選択し、「テーブル」アイコンのプルダウンメニューから「表のプロパティ」を選択し、以下の図のように「幅」に100%を入力し、「OK」ボタンをクリックします。
すると、テーブルが以下のようになります。
あ | あ | あ | あ |
あ | あ | あ | あ |
テーブルの各セルに文字・数値を入力します。
Library | Time (ms) | forward (ms) | backward (ms) |
Caffe *1 | 321 | 98 | 222 |
すると、等間隔だったセルが、セルに入力した文字・数値に合わせて自動的に調整されます。
上の行を選択し、「テーブル」アイコンのプルダウンメニューから「セルのプロパティ」を選択し、以下の図のように「セルの種類」のプルダウンメニューから「ヘッダーセル」を選択し、「OK」ボタンをクリックします。なお、セルを等間隔にする場合、このテーブルでは「幅」に25%(=100%÷4)を入力します。
すると、上の行がヘッダーセルの書式に変更されます。
Library | Time (ms) | forward (ms) | backward (ms) |
---|---|---|---|
Caffe *1 | 321 | 98 | 222 |
また、見た目の変化はありませんが、上の行を選択し、「テーブル」アイコンのプルダウンメニューから「行のプロパティ」を選択し、「行の種類」のプルダウンメニューから「ヘッダー」を選択し、「OK」ボタンをクリックしておきます。
下の行のセルを選択し、「テーブル」アイコンのプルダウンメニューから「セルのプロパティ」を選択し、以下の図のように「横配置」のプルダウンメニューから「左」「中央」「右」等を選択し、「OK」ボタンをクリックします。
すると、以下のようにテーブルとなります。
Library | Time (ms) | forward (ms) | backward (ms) |
---|---|---|---|
Caffe *1 | 321 | 98 | 222 |
更に、ヘッダーセルの背景色や、枠線の色を変更すると、以下のようなテーブルとなります。なお、「ビジュアル」モードでは、枠線が点線で表示されていますが、「プレビュー」では、枠線が実線で表示されます。
Library | Time (ms) | forward (ms) | backward (ms) |
---|---|---|---|
Caffe *1 | 321 | 98 | 222 |
まとめ
「TablePress」で作成した簡単なテーブル(上の図)であれば、「TinyMCE Advanced」プラグインだけでも、結構似た感じにできることが分かりました。