WordPressは、投稿エディタでテーブル(table)が直感的に作成できます。

WordPress Table

WordPressは直感的にテーブルが作成できる。

ただ、標準的なテーブルは作成できますが、例外的なテーブルの作成には向いていません。

見やすくて綺麗なテーブルにしようと思うと、どうしてもHTMLCSSを手書きで書くほうが早い。というわけで、この記事では当ブログでもよく使用しているテーブルを自身のメモ代わりとしてHTMLサンプルを紹介しています。よければコピペでご利用ください。

WordPressのブロックエディタでテーブルを作成する方法はこちらでも解説しています。

テーブルのHTMLサンプル

コピペで使えますが、テーマによっては見え方(デザイン)が違ってきますので、都度調整してください。

1行目を見出しにする

1
2 3 4

コード例:

<table>
	<thead>
		<tr>
			<th colspan="3">1</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
ポイント
theadは見出し、colspanは横セルの統合を意味しています。colspanには統合するセル数を表記しましょう。ここでは3つのセルを統合しているので、3としています。

横幅を調整

1 2 4
4 5 6

コード例:

<table>
	<tr>
		<td style="width: 20%;">1</td>
		<td style="width: 40%;">2</td>
		<td style="width: 40%;">4</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
</table>
ポイント
widthで横幅を指定します。合計して100%になるようにしてください。

背景色を指定

1 2
3 4

コード例:

<table>
	<tr>
		<td style="width: 30%; background-color:#fafafa;">1</td>
		<td style="width: 70%;">2</td>
	</tr>
	<tr>
		<td style="width: 30%; background-color:#fafafa;">3</td>
		<td style="width: 70%;">4</td>
	</tr>
</table>
ポイント
背景色はbackground-colorで指定します。#fafafaはカラーコードです。カラーコードはこちらのサイトを参考にしてください。

文字を上下・左右に中央寄せ

文字の中央寄せ。まずは横の中央寄せから。

1 2 3
4 5 6

コード例:

<table style="text-align:center;">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
</table>
ポイント
text-align:center; で横に中央寄せにします。一部のセルだけ中央寄せにしたい場合は、<td style=”text-align:center;”></td>とtdに対してスタイルを指定します。

次は縦に中央寄せ。左のセルのみ、上下の中央に表示しています。

1 2
3
4

コード例:

<table>
<tr>
<td style="vertical-align: middle;">1</td>
<td>2
3
4</td>
</tr>
</table>
ポイント
vertical-align: middle; で縦に中央寄せにします。

枠線を太くする

一部の枠線(border)の太さを変更します。これはWordPressのエディタでも変更可能です。

1 2 3
4 5 6
7 8 9

コード例:

<table>
	<tr style="border-bottom:solid 2px;">
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>
ポイント
1行目の枠線の下をborder-bottomで記述しています。枠線の上はborder-bottom、右はborder-right、左はborder-leftで指定できます。

セルを横に統合

1 2 3
4 5
6 7 8

コード例:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td colspan="2">4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>
ポイント
colspanでセルを統合しています。数字の「2」は統合するセル数です。

セルを縦に統合

1 2 3
4 5 6
7 8

コード例:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td rowspan="2">5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
	</tr>
</table>
ポイント
rowspanでセルを統合しています。数字の「2」は統合するセル数です。

横スクロール

テーブルを横スクロールに対応します。スマホだと縦に長くなりがちなテーブルも横スクロールで解決しますね。

HORIZON Ankle TENJIKU
価格 33,800円 19,800円 33,800円
特徴 横スクロール型のコーポレートサイト WooCommerce対応のネットショップ ラグジュアリーな中華レストランのWebサイト

コード例:

<div style="overflow: auto; white-space: nowrap;">
	<table>
		<tr>
			<td></td>
			<td>HORIZON</td>
			<td>Ankle</td>
			<td>TENJIKU</td>
		</tr>
		<tr>
			<td>価格</td>
			<td>33,800円</td>
			<td>19,800円</td>
			<td>33,800円</td>
		</tr>
		<tr>
			<td>特徴</td>
			<td>横スクロール型のコーポレートサイト</td>
			<td>WooCommerce対応のネットショップ</td>
			<td>ラグジュアリーな中華レストランのWebサイト</td>
		</tr>
	</table>
</div>
ポイント
overflow: auto;は、子要素がはみ出した場合にスクロールさせる記述で、white-space: nowrap;は、テキストを自動的に改行させないための記述です。

英単語の自動改行を解除

領域が限られているテーブルで、英単語が自動改行されると見づらくなってしまいます。特にURLが中途半端な位置で改行されてしまうと、テーブル内に余計な空白ができて、気になってしまいます。そんなときは、英単語の自動改行を解除します。

1 2 英単語の自動改行をword-breakで防ぎます。 4

コード例:

<table>
	<tr>
		<td style="width:25%;">1</td>
		<td style="width:25%;">2</td>
		<td style="word-break: break-all; width:25%;">英単語の自動改行をword-breakで防ぎます。</td>
		<td style="width:25%;">4</td>
	</tr>
</table>
ポイント
word-break: break-all;を入れておくと、英単語が自動改行されずに済みます。

テーブルは記事を読みやすくするアイテム

テーブルの本質は、情報の整理にあります。テーブルは情報を視覚的に整理できるので、それだけで文章が読みやすくなるのです。

読みやすい記事は、ユーザーからの評価も高くなるため、結果として検索エンジン対策にもつながります。テーブルを上手に活用することは、ブログ運営ではとても重要になります。

そんなテーブルをもっと活用しようということで本記事を書きました。