WordPressでテーブル(表)作成!HTMLテンプレート×4

※当ページのリンクには広告が含まれています。

WordPressでテーブル(表)作成!HTMLテンプレート×4 WordPress(ワードプレス)
スポンサーリンク

「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

行と列で見出しのあるなしを設定できます。シンプルで使いやすい。

Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited
Excel表からHTMLテーブルへ一発変換。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

見出しの設定以外にも、背景色を設定してCSSを出力したりと細かい設定ができます。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

プラグインを使う

HTMLの知識がない方は、WordPressのプラグインを使うと簡単に表を作れます。

テーブル(表)作成のプラグインはいくつかありますが、定番はTablePressでしょう。

TablePress – Tables in WordPress made easy
EmbedbeautifulandinteractivetablesintoyourWordPresswebsite’spostsandpages,withouthavingtowritecode!

私も以前から愛用していて、このトネリコBLOGでも使っています。

HTMLを一切使わずにテーブルが作れて、記事内にショートコードを挿入するだけです。ショートコードなので、複数の記事に同じテーブルを使い回すことも簡単ですよ。

ブロックエディタで作成する

Gutenberg(グーテンベルク)のブロックディタには標準で表を作成する機能がついています。

私はいまだにテキストエディタを使っているので、あまり利用することはありませんが、こちらを使えば簡単に表を作成できます。

CSSを使えばさらに表現の幅が広がります

今回紹介したのは基本的なHTMLのテンプレートです。

CSSを使えばさらに表現の幅が広がり、セルごとに任意の色をつけたり、罫線の太さを変えたりすることもできますが、それはまた別の機会ということで。

コメント

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