ワードプレスでの表（テーブル）作り方（Cocoonテーマ寄り）

ブログ書くときって表作るのってとっつきづらいですよね？

ワードプレスのビジュアルエディターで表を作るボタンも見当たらないし、プラグイン入れれば出来るらしいけど何を入れればよいのか…使っているワードプレステーマと干渉したらいやだし。

今回の投稿でワードプレスでの表（テーブル）の作り方をご紹介します。

このブログではCocoonテーマを使っています。なので内容的にはコクーン寄りな部分はありますが、初心者の方であればほかのワードプレステーマでも参考になるかも。

表を作るのは「手間」ですがそのひと手間で見る人の読みやすさ（可読性）が向上します。それと、記事の順位が上がりやすくなりますよ、多分【体感】。

表（テーブル、表組）でブログ記事を見やすく

自分がブログをやるようになり、数多くのブログを毎日読むようになりました（読み流しているとも言う）。書かれている内容にはよりますが、効果的に表が使われているブログは読みやすく、内容に集中できます。

一方で、スペック的な情報を文章だけ（段落「P」要素のみ）で書かれていると正直読みづらいです。

画像で表を入れちゃう？

記事を閲覧する人の視点では、表がHTMLのタグで表記されていようが、画像挿入されていようがどちらでも知りたいことはわかります。

それはそれで良いのですが、単純に見た目が同程度であれば、後者はSEO的に損をするような…

我らが神、グーグル様は表内の文字情報もしっかりとご覧になられています。（検索で引っかかることがある）画像がものすごく見やすいとかだと話しが変わると思いますが。

HTMLテーブルの基本

簡単に作れる方法やツールは記事後半にあります。ただ、テーブルは基本を知らないとなかなか痒いところに手が届きません。なので、基本的なタグは身につけておきたいところ。

覚えておくべきHTMLタグ

上記以外にもthead, tbody, tfootなんかもありますが私は使っていないです。コード挿入した後に、ワードプレスが勝手につけてきますが。CSS装飾する場合、こういうタグ使うんでしょうね。

テーブルタグの書き方

見出しを上にする

まず基本ですね。

<table>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データ</td>
			<td>データ</td>
		</tr>
	</tbody>
</table>

見出しを横にする

これもよく見ますね。

<table>
	<tbody>
		<tr>
			<th>見出し01</th>
			<td>データ</td>
		</tr>
		<tr>
			<th>見出し02</th>
			<td>データ</td>
		</tr>
	</tbody>
</table>

縦方向（垂直）に結合する

「row」は行って意味です。「rowspan」に数値を入れて結合する行数を指定します。

<table>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="3">縦方向の結合</td>
			<td>データ</td>
		</tr>
		<tr>
			<td>データ</td>
		</tr>
		<tr>
			<td>データ</td>
		</tr>
	</tbody>
</table>

横方向（水平）に結合する

こちらは「col (column)」で列です。「colspan」に数値を入れて結合する行数を指定します。「rowspan」もそうですが、起点となる場所から数値を入れます。

<table>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="2">横方向の結合</td>
		</tr>
		<tr>
			<td>データ</td>
			<td>データ</td>
		</tr>
		<tr>
			<td>データ</td>
			<td>データ</td>
		</tr>
	</tbody>
</table>

列を折り返さない

これ、スマホで見るとき結構難しいですよね…

<table>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
			<th>見出し03</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="white-space:nowrap">あいうえおかきくけこさしすせそたちつてと</td>
			<td>あいうえおかきくけこさしすせそたちつてと</td>
			<td>あいうえおかきくけこさしすせそたちつてと</td>
		</tr>
	</tbody>
</table>

NGパターン（AMP にした時エラーになります）

<td nowrap>あいうえおかきくけこ</td>

OKパターン

<td style="white-space:nowrap;">あいうえおかきくけこ</td>

テーブルにタイトル（キャプション）を入れる

これはやってもやらなくてもよいのですが、私はググ神へのメッセージ「こういう表がこの記事にあるよ」とおまじないでタイトルをいれることがあります。

<table>
	<caption>テーブルのタイトル</caption>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データ</td>
			<td>データ</td>
		</tr>
	</tbody>
</table>

ワードプレスでの表（テーブル）作り方

やり方としてはビジュアルエディターを使う方法と、HTMLでコード挿入する方法になります。

Gutenbergを使うのが今一番ホット

ワードプレス5.0より、新エディタ「Gutenberg」が導入されたのは2018年12月頃のお話。当ブログではすでに積極利用しています。

まぁ、使いづらい・とっつきづらいとご意見はありますが、表（テーブル）作成に関して言えば一番やりやすく、余計なプラグインが不要です。

アプローチとしては簡単ですが、テーブルヘッダー「th」が指定できなかったり、タイトル「caption」指定できなかったりと融通が利かないところもありますが… とはいえ

カンタンは「正義」です。

スマホでも表を挿入できるのはこのやり方のメリットですね。

HTMLコードで表を作成

原始的になりますが、HTMLコードで書いてしまうのが一番融通が利きます。

ワードプレス上だと若干厳しいので、コーディング用のエディタなどで予めコードを作っておいてそれをコピペするのが良いです。私はほぼこの方法で行っています。

▲ クラシックエディタの場合、矢印の </> ボタンでコード挿入ポップアップを呼び出します。

▲ 出てきたポップアップにあらかじめ準備していたHTMLコードをコピペ。これでテーブルができます。エディタ上もテーブルが見たまま形成されます。

▲ クラシックエディタ以外に、GutenbergではカスタムHTMLでの挿入があります。

エディタ+Emmetで高速テーブル作成

普段、ブログの下書きはコーディングエディタ（Sublime Text）とEmmetのプラグインで書いています。これに慣れるともう戻れません。

こんな感じのスニペットを書いて…

table>caption{テストテーブル}+(thead>tr>th{見出し0$}*3)+tbody>(tr>td*3)*3

タブ（「Tab」）押して展開すると表になります。

<table>
	<caption>テストテーブル</caption>
	<thead>
		<tr>
			<th>見出し01</th>
			<th>見出し02</th>
			<th>見出し03</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

スニペットなんて書けない…なんて思うかもしれませんが、何度か書いているうちに結構覚えちゃいます。忘れたらチートシート見ればいいし。

Emmetが使えるエディタは何種類かあるようですが、私は「恋に落ちるエディタ」とキャッチフレーズがつく “Sublime Text” を使っています。HTMLのタグ打ち以外にも便利な編集機能が豊富です。

次の書籍で基本を身につけました。本すべて読む必要なくて、半分くらいかな？キンドルPCで画面に写しながらコード打ってたら二日くらいで身につけられました。

エクセルからテーブル作成

既存のエクセルやGoogle スプレッドシートからコピペで表作成のHTMLコードを出力してくれる便利なサイト。普段はエディタでテーブル作っていますが、データが膨大な場合はこういうサイトも使っています。

見出しを「行」「列」意識してタグを作れる優れもの。

▲ 使い方は非常に簡単です。まず、見出しオプションを決めます。

1. 見出しなしのパターン
2. 見出しが上にあるパターン
3. 見出しが左横にあるパターン
4. 見出しが上横両方にあるパターン

そして、エクセルやグーグルスプレッドシートからセルデータをコピー&ペースト、「変換」します。

今回使うデータは次の通り。

コピペで出来たテーブルがこちら（タイトルは私がつけました）。

表作成（おまけ：Cocoonのみ）

スマホで横にスクロールさせる表

元々、Cocoonの標準設定で横に長い表をスクロールさせることが可能です。以下の記事ではスマホの場合のみ、横スクロールさせるカスタマイズをしています。

PCはスクロールオフ、スマホは左横見出しは固定するように調整しています。

まとめ

こんな感じで、表（テーブル）作り方をご紹介しました。もう少しJS入れたテーブルも使う予定なので、時間のあるときに付け加えておくと思います。

おしまい。