「WordPressでテーブル（表）を作成したいんだけど、HTMLでシンプルに作りたい」
「いちいちコードを確認するのが面倒なのでHTMLのテンプレートが欲しい」
WordPress歴8年以上、数多くのテーブル（表）を作ってきて、プラグインや「EXCEL→HTML変換サイト」なども使ってきましたが、けっきょく手軽さとカスタマイズのし安さで、HTML直書きに落ち着きました。
今後「記事の中に表を入れたいな」と思ったときは、この記事からテンプレートをコピペしてすぐ使えますよ。
HTML（テンプレート）を挿入する
テーブル（表）を作成するための基本的なHTML（テンプレート）を4つ紹介します。コードをコピペすれば使えます。なお、見た目の装飾はテーマやスキンによって違ってきます。
シンプルなテーブル（表）
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
HTMLコード
<table> <tbody> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table>
見出し「行」のあるテーブル（表）
| A1 | B1 | C1 | D1 |
|---|---|---|---|
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
HTMLコード
<table> <thead> <tr> <th>A1</th> <th>B1</th> <th>C1</th> <th>D1</th> </tr> </thead> <tbody> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table>
見出し「列」のあるテーブル（表）
| A1 | B1 | C1 | D1 |
|---|---|---|---|
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
HTMLコード
<table> <tbody> <tr> <th>A1</th> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <th>A2</th> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <th>A3</th> <td>B3</td> <td>C3</td> <td>D3</td> </tr> <tr> <th>A4</th> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table>
見出し「行」と「列」のあるテーブル（表）
| A1 | B1 | C1 | D1 |
|---|---|---|---|
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
HTMLコード
<table> <thead> <tr> <th>A1</th> <th>B1</th> <th>C1</th> <th>D1</th> </tr> </thead> <tbody> <tr> <th>A2</th> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <th>A3</th> <td>B3</td> <td>C3</td> <td>D3</td> </tr> <tr> <th>A4</th> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table>
ExcelからHTMLタグに変換
Excelで作った表を貼り付けるだけで簡単にHTMLタグに変換してくれる無料サービスがあります。Googleスプレッドシートでも問題なく使えます。
いくつかありますが、おすすめはこちらの二つです。じっさいに試してみて、使いやすい方を使ってみるとよいでしょう。
Excel to Table
行と列で見出しのあるなしを設定できます。シンプルで使いやすい。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
見出しの設定以外にも、背景色を設定してCSSを出力したりと細かい設定ができます。
プラグインを使う
HTMLの知識がない方は、WordPressのプラグインを使うと簡単に表を作れます。
テーブル（表）作成のプラグインはいくつかありますが、定番はTablePressでしょう。
私も以前から愛用していて、このトネリコBLOGでも使っています。
HTMLを一切使わずにテーブルが作れて、記事内にショートコードを挿入するだけです。ショートコードなので、複数の記事に同じテーブルを使い回すことも簡単ですよ。
ブロックエディタで作成する
Gutenberg（グーテンベルク）のブロックディタには標準で表を作成する機能がついています。
私はいまだにテキストエディタを使っているので、あまり利用することはありませんが、こちらを使えば簡単に表を作成できます。
CSSを使えばさらに表現の幅が広がります
今回紹介したのは基本的なHTMLのテンプレートです。
CSSを使えばさらに表現の幅が広がり、セルごとに任意の色をつけたり、罫線の太さを変えたりすることもできますが、それはまた別の機会ということで。
コメント