テーブル(表)を作成・挿入できるプラグイン

WordPressには、テーブル作成挿入するためのプラグインがあります。中でも、機能が豊富なうえ日本語に対応している「TablePress」プラグインがおすすめです。

目次

WordPressでテーブル(表)を作成・挿入する

WordPressの標準機能には、テーブル(表)を手軽に作成するための便利機能がありません。基本的に、WordPressでテーブルを挿入するにはHTMLコードを入力する必要があります。

たとえば、下のようにシンプルなテーブルを表示させるだけでも・・・

A-1B-1C-1
A-2B-2C-2
A-3B-3C-3

初心者にとっては複雑に思えるHTMLコードを入力しなければなりません。

<table>
    <tr>
        <td>A-1</td>
        <td>B-1</td>
        <td>C-1</td>
    </tr>
    <tr>
        <td>A-2</td>
        <td>B-2</td>
        <td>C-2</td>
    </tr>
    <tr>
        <td>A-3</td>
        <td>B-3</td>
        <td>C-3</td>
    </tr>
</table>

では、WordPressでテーブルを挿入するには、HTMLの知識が必須なのでしょうか?いいえ、心配はいりません。WordPressには、HTMLに不慣れな人でも簡単にテーブルを作成・設定するためのプラグインがあります。おすすめは、「TablePress」プラグインです。

TablePress プラグインのインストール・有効化

TablePressは、WordPress 公式サイト(プラグインディレクトリ)に登録されています。管理画面[プラグイン]>[新規追加]を開き、TablePress で検索し、インストール・有効化してください。

TablePress プラグインのインストール・有効化

TablePress プラグインの使い方

TablePressは機能が豊富なため、その全ての使い方を紹介しきれません。ここでは、企業サイトでよく見かける、下のような「会社概要」の表をTablePress プラグインで作成する実例を紹介します。

TablePress プラグインで作成するテーブルの例

※表内のデータは架空のものです。

TablePress プラグインで会社概要の表を作成する

TablePress プラグインをインストール・ 有効化すると、管理画面の左メニューに[TablePress]が追加されます。

TablePress メニューが追加

[TablePress]をクリックすると、下図の画面が開きます。プラグイン内にはいくつかのメニューが用意されていて、画面上部または左側からアクセスできます。その中の[新規追加]または[新しいテーブルを追加]をクリックします。

TablePress 新規追加メニュー

テーブルの新規追加

以下の要領で入力します。

TablePress 新しいテーブルを追加 必要事項の入力

テーブルの名前:
管理しやすいように名前を付けます。(例:会社概要)

説明 (省略可):
ページ上で表の説明を加える必要がある場合に入力します。(例:株式会社ワープレの会社概要)

行数:
テーブルの行数を入力します。(今回の例では 7)

列数:
テーブルの列数を入力します。(今回の例では 2)

入力が完了したら、テーブルを追加をクリックします。

テーブルの内容を入力

「テーブルが正常に追加されました」とメッセージが表示されたら、テーブルのデータを入力します。下図のようなメッセージが表示された場合は、[非表示にする]をクリックします。

テーブルの内容を入力 メッセージを非表示にする

テーブルの内容を入力するには、以下の2つの方法があります。

  1. データを手動で入力する
  2. データをインポートする
データを手動で入力する

テーブルの内容に、必要事項を入力します。全ての項目を入力したら、変更を保存をクリックします。

TablePress プラグイン テーブルの内容を入力
データをインポートする

テーブルに使用するデータをエクセルなどで作成済みの場合、インポート機能が便利です。

TablePress プラグイン インポート機能

作成済みのデータをコピーします。(下図はエクセルの例)

テーブル用データをコピー

[インポートのソース:]で、[手動入力]を選択し、[データをインポート:]の入力欄にコピーしたデータを貼り付けます。今回の例の場合、[新規作成、置換、追加から選択:]で[既存のテーブルを置き換え]を選択し、[置換/追加対象のテーブル:]で[ID 1:会社概要]を選択します。最後に、インポートをクリックします。

TablePress プラグイン インポート データ貼り付け

ここまでで、テーブルの作成が完了しました。今度は、作成したテーブルを記事編集画面で挿入する作業です。ここでは、「会社概要」というページを固定ページで作成し、テーブルを挿入します。

固定ページにテーブルを挿入

先ほど作成したテーブルの[テーブル情報]にあるショートコード(例:[table id=1 /])をコピーします。

TablePress プラグイン ショートコードをコピー

固定ページの本文入力欄にショートコードを貼り付けます。

TablePress プラグイン ショートコードを貼り付け

ページ上でどのように表示されるかを確認するため、プレビューをクリックしてみましょう。

TablePress プラグイン プレビュー確認

テーブルは正常に表示されましたが、完成イメージとは少し異なります。ここからは、簡単なカスタマイズをしていきます。

テーブルのカスタマイズ

今回は、以下の項目について修正します。

  • セルの幅を変更する
  • 枠線を追加する
  • 見出しの位置を変更する

セルの幅を変更する

TablePress プラグインで作成したテーブルは、各列が同じ幅になります。今回の例では1列目がやや広すぎるので、少し狭くしてみます。

セルの幅を変更する前

たとえば、1列目を20%、2列目を80%に変更するには、先ほど貼り付けたショートコードを以下のように修正します。

[table id=1 column_widths="20%|80%" /]

このとき、テキストエディタで編集してください。

テーブルのカスタマイズ セルの幅を変更する

プレビューで確認すると、幅が変更されました。

テーブルのカスタマイズ セルの幅を変更できた

今回の例では2列でしたが、たとえば4列のテーブルで幅を変更したい場合は、10%|20%|30%|40%のように記述します。このとき、比率の合計が100%となるようにしてください。また、セルの幅はピクセル(px)で指定することもできます。


次の「枠線を追加する」「見出しの位置を変更する」については、CSS(カスケーディング・スタイル・シート)を使用します。CSSについては、下記が参考になります。

枠線を追加する

枠線を追加するために、TablePress プラグインの「カスタムCSS」機能を使います。[プラグインのオプション]をクリックします。

TablePress プラグインのオプション

今回の例では、テーブル内の全セルにグレー色(カラーコード:#DCDCDC)の枠線を追加することにします。このとき、CSSには以下の記述をします。

#tablepress-1 td {
    border: 1px solid #DCDCDC;
}

TablePress プラグインで作成したテーブルのHTMLタグには、各々に独自のID・クラスが設定されます。たとえば、<table>タグは、 <table id=”tablepress-x” class=”tablepress tablepress-id-x”> のようにID・クラスが設定されます。「x」には、テーブルのIDが入ります。

先ほどのCSSコードを[カスタムCSS:]に記述し、変更を保存をクリックします。

TablePress プラグイン カスタムCSS

プレビューで確認すると、各セルに枠線が追加されました。

テーブルのカスタマイズ 枠線を追加できた

見出しの位置を変更する

今回の例では、見出しを1列目にしたいのですが、作成されたテーブルの見出しは1行目になっています。

テーブルの編集画面を開く

[すべてのテーブル]をクリックし、テーブル名の下にある[編集]をクリックします。

TablePress プラグイン テーブルの編集画面を開く
1行目の見出しを解除する

画面を下にスクロールして、[テーブルのオプション]の[テーブルの最初の行をテーブル見出しにする]のチェックを外し、画面下部の変更を保存をクリックします。

TablePress プラグイン 1行目の見出しを解除する
1列目に見出しの色を設定する

今回の例では、1列目のセルの背景を濃いグレー色(カラーコード:#A9A9A9)に、文字色を白(カラーコード:#FFFFFF)に変更します。このとき、CSSには以下の記述をします。

#tablepress-1 td.column-1 {
    background-color: #A9A9A9;
    color: #FFFFFF;
}

TablePress プラグインで作成したテーブルの<td>タグは、 <td class=”column-x”> のようにクラスが設定されます。「x」は、左から何列目にあるかで決まります。

プレビューで確認すると見出しの位置が変更され、イメージ通りのテーブルが完成しました。

TablePress プラグイン テーブルのカスタマイズ完了

TablePress プラグインには、この他にもさまざまな機能があります。セルにリンクや画像を挿入する機能や、行や列を追加・削除する機能、隣り合うセルどうしを結合する機能など、直感的に操作することができます。ぜひ試してみてください。

目次