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

テーブルがある風景 Cocoon(コクーン)

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

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

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

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

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

スポンサーリンク

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

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

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

チャンビア
チャンビア

っていうか離脱するかも

画像で表を入れちゃう?

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

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

ドンちゃん
ドンちゃん

たまにオフィスで表作って画像貼り付けている人見ます

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

HTMLテーブルの基本

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

覚えておくべきHTMLタグ

HTMLタグ 説明
<table>~</table> 表(テーブル)の構造上の箱。
<tr>~</tr> 表での横一行を意味する。
<th>~</th> 表で見出しとなるセル。
<td>~</td> 表でデータを入れるセル。
<thead>~</thead> テーブル内の行グループを見出し部分として定義する。
<tbody>~</tbody> テーブル内の行グループをデータ部分として定義する。
<tfoot>~</tfoot> テーブル内の行グループをフッター部分として定義する。

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

追記(’20/02)ブロックエディタ を使う場合、thead, tbody, tfootなどを明示しないと該当のブロックでエラーが出ることがあります。

クラシックエディタのみを使う場合は、thead, tbody, tfootは省略できます。

ワードプレスでの表・表組・テーブルの作り方(HTMLの基本要素)

テーブルタグの書き方

見出しを上にする

まず基本ですね。

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

見出しを横にする

これもよく見ますね。

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

縦方向(垂直)に結合する

「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>
見出し01 見出し02
縦方向の結合 データ
データ
データ

横方向(水平)に結合する

こちらは「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>
見出し01 見出し02
横方向の結合
データ データ
データ データ

列を折り返さない

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

<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>
見出し01 見出し02 見出し03
あいうえおかきくけこさしすせそたちつてと あいうえおかきくけこさしすせそたちつてと あいうえおかきくけこさしすせそたちつてと

th, tdタグに直接「nowrap」ワードのみ入れられるのですが、コーディング上望ましくないようです。以前、AMPを有効にしている際にエラーとなりました。「nowrap」を入れる場合は、styleプロパティで指定するようにしましょう。

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

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

OKパターン

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

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

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

最近のGoogleは、評価している記事に対しては表などの情報をそのまま検索上に出力することがあります。

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

ワードプレスでの表(テーブル)作り方

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

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

ドンちゃん
ドンちゃん

「Gutenberg」。このワード聞いて、今離脱しようとしてない?w

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

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

ワードプレスでの表・表組・テーブルの作り方(ブロックエディタで作る表・テーブル)
ブロックエディタで作る表・テーブル

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

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

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

HTMLコードで表を作成

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

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

ワードプレスでのHTMLコードの挿入方法
ワードプレスでのHTMLコードの挿入方法

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

ワードプレスでのHTMLコードの挿入方法
ワードプレスでの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. 見出しが上横両方にあるパターン

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

  • Gutenbergブロックの場合、「カスタムHTML」を選んでコピペ。
  • クラシックエディターの場合、「HTML挿入」でコピペ。

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

ワードプレスでの表・表組・テーブルの作り方(エクセルでテーブル作成するときに使ったダミーデータ)
今回のダミーデータ

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

見出しなしのパターン
人口 人口成長率(年)
2018 106512074 1.52%
2017 104918090 1.55%
2016 103320222 1.58%
2015 101716359 1.65%
2010 93726624 1.67%
見出しが上にあるパターン
人口 人口成長率(年)
2018 106512074 1.52%
2017 104918090 1.55%
2016 103320222 1.58%
2015 101716359 1.65%
2010 93726624 1.67%
見出しが左横にあるパターン
人口 人口成長率(年)
2018 106512074 1.52%
2017 104918090 1.55%
2016 103320222 1.58%
2015 101716359 1.65%
2010 93726624 1.67%
見出しが上横にあるパターン
人口 人口成長率(年)
2018 106512074 1.52%
2017 104918090 1.55%
2016 103320222 1.58%
2015 101716359 1.65%
2010 93726624 1.67%

表作成(おまけ:Cocoonのみ)

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

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

ワードプレスでの表・表組・テーブルの作り方(Cocoonテーマでのレスポンシブテーブル使用例、見出し固定)
Cocoonテーマでのレスポンシブテーブル使用例、見出し固定

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

まとめ

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

おしまい。

Cocoon(コクーン)
スポンサーリンク
\ 記事が役に立ったらシェア!/
このブログを購読してみる
スポンサーリンク
スポンサーリンク
cocoon-affiliate-tag-banner blog-icon-banner
バジェットな旅ログ

コメント

タイトルとURLをコピーしました