WordPressでブログを運営していると壁になるのが表やテーブルの作成。テーブルタグの直打ちは面倒くさいです。そこで、エクセルなどの表計算ソフトから貼り付けたり、アップロードするだけで、表やテーブルを作ってくれるプラグインをまとめました。

文字列を「|」で区切るだけでレスポンシブなテーブルが作れるJetpack Markdown がオススメ

Jetpack Markdownは、Markdown記法（簡単な記述でhtmlをコーディングする仕組み）を使うためのプラグインであって、テーブルを作るためだけのプラグインではありません。

[img-link url=”https://webshufu.com/markdown-on-save-improved/” title=”【Wordpress】ライティングを爆速化！Markdown導入プラグイン2つ＆記法を簡単に紹介｜ウェブシュフ”]

ただ、このmarkdown記法を使うと、表組みするのがとても楽になります。

「Jetpack Markdown」をインストール・有効化して、Wordpressの投稿画面テキストエディタに以下のように記入すると

得点表|英語|数学|国語|理科|社会
--|--|--|--|--|--
1学期|90|40|70|55|50
2学期|95|50|75|70|70
3学期|85|55|65|65|80

以下のようなHTMLタグが出力され

<table>
<thead>
<tr>
  <th>得点表</th>
  <th>英語</th>
  <th>数学</th>
  <th>国語</th>
  <th>理科</th>
  <th>社会</th>
</tr>
</thead>
<tbody>
<tr>
  <td>1学期</td>
  <td>90</td>
  <td>40</td>
  <td>70</td>
  <td>55</td>
  <td>50</td>
</tr>
<tr>
  <td>2学期</td>
  <td>95</td>
  <td>50</td>
  <td>75</td>
  <td>70</td>
  <td>70</td>
</tr>
<tr>
  <td>3学期</td>
  <td>85</td>
  <td>55</td>
  <td>65</td>
  <td>65</td>
  <td>80</td>
</tr>
</tbody>
</table>

以下のようなレスポンシブな表（テーブル）が表示されます。

得点表	英語	数学	国語	理科	社会
1学期	90	40	70	55	50
2学期	95	50	75	70	70
3学期	85	55	65	65	80

どう書けば、どんなHTMLが出力されて、どんな表が表示されるか、直感的にわかりますよね。

セルに長文を入力したときも柔軟に対応してくれます

セルに長文を入力すると、デザインが崩れて適切に表示されないのではないかと心配でしたが、柔軟に対応してくれました。

このような入力をすると

得点表|英語|数学|国語|理科|社会
--|--|--|--|--|--
1学期|90|40|70|55|50
2学期|95|50|75|70|70
3学期|85|55|65|65|80
総評|とても優秀です。この調子で頑張りましょう|ちょっと苦手ですが、かなり努力しましたね。もう一息|まずまずの成績で安定しています。|この調子で頑張れ|凄く頑張りましたね。100点目指してこれからも精進を！！

こんな表が表示されます。

得点表	英語	数学	国語	理科	社会
1学期	90	40	70	55	50
2学期	95	50	75	70	70
3学期	85	55	65	65	80
総評	とても優秀です。この調子で頑張りましょう	ちょっと苦手ですが、かなり努力しましたね。もう一息	まずまずの成績で安定しています。	この調子で頑張れ	凄く頑張りましたね。100点目指してこれからも精進を！！

結構頑張ってくれます。

ExcelやGoogleスプレッドシートの表を貼り付けるのも簡単

Mwrkdown記法では、エクセルやGoogleスプレッドシート等の表計算ソフトで作った表を貼り付けるのも簡単です。

まず表全体をコピーします。

これを一括置換機能のあるエディター（Wordpress投稿画面のテキストエディタではありません）に貼り付けます。

区切り文字（タブ又はスペース）を「|」に置換します。

これをコピーして、Wordpressの投稿画面のテキストエディタに貼り付けます。

cssで罫線をつけるなどスタイルを整えられる

テーブルに枠線、横線、縦線をつけたかったので、テーマのstyle.cssに次のようなCSSを書きました。

table {
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
    font-weight:bold;
    color: #000000;
    font-size: 14px;
    font-size: 1rem;
    line-height: 2;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
    width: 100%;
}
table caption{
    font-size: 16px;
    font-size: 1.142857143rem;
    margin: 24px 0;
    margin: 1.714285714rem 0;
}
td,th{
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    text-align:center;
}
th{
    font-weight:bold;
}

私は設定しませんでしたが、CSSで背景色、文字サイズ、余白、幅の変更など自在にカスタマイズ出来ます。

セルの結合やソートなどの複雑な機能は実現できず

このようにMarkdown記法でHTMLのテーブルを作るのは簡単です。

しかし作れる表は簡単なものに限られます。

セル同士の統合や並び替えなどの複雑な機能は実現できません。

こういう機能を手軽に使いたいなら、次で説明するTablePressの方が適しています。

参考エントリ

[img-link url=”http://bamka.info/markdown-table” title=”HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ | あなたのスイッチを押すブログ”]

HTML・CSS不要!!複雑な表も簡単に描けるTablePress

TablePressならHTMLやCSSの知識もなしでこんな感じのキレイな表（テーブル）が作れます。

WordPress内で表を編集する場合

管理画面の左サイドバーからTablePressをインストール・有効化後、管理画面左サイドバーの「TablePress」をクリックすると、以下のような画面になります。

テーブルを新規作成するときは、左サイドバーの「Add New table」をクリックします。すると以下のような画面になります。

テーブルの名前、説明文、行数、列数を設定して、「Add Table」ボタンを押してください。

これでテーブルのフォーマットが1つ出来ました。

次に一つ一つの欄に入力して行きます。

まず、左サイドバーの「All　Tables」をクリックします。するとこれまでに作ったテーブルの一覧が出るのですが、今のところさっき作った一個だけですね。

テーブル名をクリックしてください。（下図）

クリック後、少し下スクロールすると「Table Content」というタイトルの下に、セルがいくつも現れます。ここに適宜テキストや数を入力してください。（下図）

セルからセルへの移動にはtabキーが便利です。ソートも出来ます。値の入力が終わったら、一番下までスクロールして、「Save Changes」ボタンを押してください。

「Preview」ボタンで、今作った表のできばえを確認することも出来ます。

次に、管理画面左サイドバーの「投稿」→「投稿一覧」と進み、どれでもいいので投稿を1つ選んで投稿名をクリックしてください。

すると、投稿の編集画面になります。このときビジュアルエディタを使っている場合は以下のような形で、テーブル挿入用のボタンが現れます。

テキストエディタを使っている場合は以下のような感じです。

そのとき記事内でカーソルを表を入れたい場所に合わせ、テーブル挿入ボタンを押すと、表の挿入は完了です。

デフォルトでは、行数を12行以上にすると、自動的にページ送りを入れてくれます。

こういうのは自分でコーディングすると結構面倒くさいです。

表を多用するサイトを運営している方には、「TablePress」はとてもオススメです。

エクセルやGoogleスプレッドシートからのインポートも可能

「TablePress」はCSVファイルのインポートも可能。

エクセルやGoogleスプレッドシートで作った表を、そのままWordpressの中で利用できます。

以下、Googleドライブスプレッドシートで作った表をインポートして表示させてみました。

まずGoogle検索画面の上の方にある「ドライブ」をポチ。

インポートしたい表を選択します。

まだ、作っていない場合は「作成⇒スプレッドシート」で表を作ってください。

こんな感じの表をWordPressにインポートすることが出来るのです。

「ファイル」⇒「形式を指定してダウンロード」⇒「カンマ区切りの値（.csv、現在のシート）」の順に選択して.csvファイルをダウンロード。

次に、WordPress管理画面左サイドバーから「TablePress」⇒「Import file」と進んでください。

先ほどダウンロードしてきたばかりの.csvファイルを選んで

下の方にあるImportボタンをポチッ。

あとは、指示されたショートコードをコピーして、表を表示させたい場所に貼り付ければ完成です。

下スクロールすると表の構成を確認することも出来ます。

こんな感じの表を貼り付けることが出来ました。

TablePressを使えば、ExcellやOpen office culcなど、Googleドライブスプレッドシート以外の表計算ソフトで作った表も、.csvファイルでインポート可能です。

TablePressで大きな表を1から作るのは大変なので、表計算ソフトで効率よく表を作成してから、WordPressにインポートする方が効率的です。

表作成に便利なその他のプラグイン

私がテーブルや表を作成するプラグインとして強力プッシュするのは上の二つですが、そのほかにも色々プラグインがあります。

いろんな方がレビュー記事を上げてくれているので、参考にしてください。

どのプラグインも、WordPress管理画面左サイドバー⇒「プラグイン」⇒「新規追加」でインストールできます。

TinyMCE Advanced

Tyny mouse advancedはWordPress標準のビジュアルエディタを使いやすくするプラグインです。その機能の一つとしてテーブルを簡単に作れる機能を提供しています。

参考記事

[img-link url=”http://www.monochrome-photo.info/?p=2666″ title=”WordPressで、表組みを簡単に作りたい。TinyMCE Advanced | ものくろぼっくす”]

Easy Table

Easy table はMarkdown記法並みに簡単にテーブルが出来るプラグインです。

[table]
A1,B1,C1,D1
A2,B2,C2,D2
A3,B3,C3,D3
[/table]

という感じのショートコードで以下のようなテーブルが出力されます。

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

ウィジェットにも簡単に貼り付けられますよ。

参考記事

[img-link url=”http://netaone.com/wp/easy-table/” title=”Easy Table – テーブル（表）を簡単に作成・編集できるWordPressプラグイン – ネタワン”]

Pricing Table Ready!

その名の通り、価格比較などの用途に向いたテーブルを作ってくれますが、WordPress › WordPress Pluginsからは削除されてしまいました。有料バージョンはこちら⇒Pricing Table Ready! WordPress Plugin PRO version

色とりどりのテンプレートが5種類用意されていて、どれも完全にプロ仕様。ドラッグ&ドロップで表が作れるなど、使い勝手もとてもよさそうです。

参考記事

[img-link url=”http://officegilberto.net/archives/4198″ title=”きれいな価格表を作る　Pricing Table Ready! | オフィスジルベルト”]

レスポンシブ対応ならFooTable

閲覧デバイスの幅によって、テーブルに表示させる項目をしぼります。

PCなら5列、タブレットなら3列、スマホなら2列…と言った表示が可能になります。⇒Demo

参考記事

[img-link url=”http://kwski.net/jquery/1059/” title=”jQuery – レスポンシブに対応したテーブルを実装できる「FooTable」”]

WP-Table Reloaded

Table Press に似た雰囲気の表が作れます。

参考記事

[img-link url=”http://www.seotemplate.biz/blog/wordpress-plug/12955/” title=”WordPressに並べ替え・検索機能付きのテーブルを挿入する – WP-Table Reloadedの使い方 | WP SEOブログ”]