ブログで使えるテーブル表（table）のHTMLサンプル

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

WordPress Table

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

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

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

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

2021.10.22

2024.08.01

【WordPress】テーブル表の作成方法（プラグインなし）

WordPressの記事の中でテーブル表（table）を作るには、WordPressのデフォルトエディタである「グーテンベルク」や「ビジュアルエディタ」でできます。他にはプラグインを使って作成する方法もあります。テーブル作成用のWordPressプラグインで有名なのは「TablePress」...

テーブルのHTMLサンプル
テーブルは記事を読みやすくするアイテム

テーブルの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に対してスタイルを指定します。

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

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	5	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が中途半端な位置で改行されてしまうと、テーブル内に余計な空白ができて、気になってしまいます。そんなときは、英単語の自動改行を解除します。

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

コード例：

<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>