ブログ記事を毎日書いていると「表を使って内容を分かりやすくしたい。」と思うことありませんか？全くHTMlの知識がない初心者だと、テーブルを作成するのはハードルが高いですよね。
WordPressなら専門知識が全くなくても、簡単にテーブルを作成する事ができます。
目次
WordPressでテーブル（表）を作るには
テーブルを活用すると、視覚的に情報をわかりやすく伝える事ができますが、WordPressでテーブルを作るには大きく分けて3通りの方法があります。
- プラグインを使って表を作成する方法
- Word・Excelで作った表をコピペする方法
- HTMLでテーブルをコーディングする方法
それぞれについて詳しく解説していきましょう。
WordPressのプラグインを使ってテーブルを作る方法
それではまず初心者にもおすすめする一番導入しやすい方法「プラグイン」を使う方法をご説明していきます。知名度が高く信頼度の高いプラグインを2つご紹介いたします。
TinyMCE Advanced
「TinyMCE Advanced」はビジュアルエディターを拡張して簡単にテーブルを作成できるプラグインです。
まずは「TinyMCE Advanced」で検索するか、こちらのリンクよりアクセスしてください。プラグインをインストールしたら「有効化」しましょう。
管理画面の左側メニュー「設定」内に「TinyMCE Advanced」が追加されています。
メニュー内の「TinyMCE Advanced」をクリックすると「エディター設定」の画面になります。この画面で色々な機能をドラッグ＆ドロップで追加する事ができます。
では投稿ページにて実際にテーブルを作成して見ましょう。テーブルのマークが新しく追加されているので、クリックしてみましょう。
テーブルにマウスを合わせると、マス目の表が表示されますので、作りたい表の列と行を選択しましょう。そうすると表が本文に挿入されます。
TablePress
続いて「TablePress」をご紹介いたします。このプラグインは「TinyMCE Advanced」と異なり、動的なテーブルを作成する事ができます。
動的なテーブルの場合、テーブルの内容を検索したりする事ができます。また、csvなどのファイルを読み込むことも出来るため、情報量の多いデータを分かりやすくサイトに表示させたい場合におすすめです。
TablePressはこちら
Word・Excelを使ってテーブルを作る方法
日常的にWordやExcelを使っていたり、すでにWordやExcelで表ができている場合は、その表をコピー＆ペーストで投稿や固定ページに挿入する事ができます。
ビジュアルエディターを選択した状態でペーストをすると、WordやExcelで作った表がそのままテーブルとして挿入されます。
HTMLでテーブルを作る方法
それでは最後にHTMLでテーブルを作成する方法について解説をいたします。
下記テーブルを例にして解説いたします。
| セルA | セルB |
| セルC | セルD |
このテーブルの場合は下記のようなソースになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tbody> <tr> <td>セルA</td> <td>セルB</td> </tr> <tr> <td>セルC</td> <td>セルD</td> </tr> </tbody> </table> |
1つのセルを<td></td>で囲みます。
列を<tr></tr>で囲みます。
セルを増やしたい場合は<td></td>を、列を増やしたい場合は<tr></tr>を増やす事で追加する事ができます。
| セルA | セルB | セルC |
| セルD | セルE | セルF |
| セルG | セルH | セルI |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <tbody> <tr> <td>セルA</td> <td>セルB</td> <td>セルC</td> </tr> <tr> <td>セルD</td> <td>セルE</td> <td>セルF</td> </tr> <tr> <td>セルG</td> <td>セルH</td> <td>セルI</td> </tr> </tbody> </table> |
まとめ
WordPressはHTMLなどの専門知識がなくてもテーブルをサイトに表示させる事ができます。今回ご紹介した「TinyMCE Advanced」を使いこなせば、文字の装飾の幅がぐんと広がりますので、自分で操作しながら好きな機能を見つけて見てください。
