DESIGN

【クラシックエディタで編集】AFFINGER6でテーブル(表)を作る方法

WordPressのブロックエディタ「Gutenberg」は自動的にHTMLのコーディングもされ非常に便利な機能です。

そこに人気のテーマ「AFFINGER6」の機能を加えるとデザインも格段に改善し、自分が望むようなページを作ることができます。

ただ一点、テーブル(表)に関しては不満な点があります。「theadタグ」「tbodyタグ」「tfootタグ」などのタグのコーティングが思い通りにできない点です。

thタグなど正しくコーディングすることでSEOにも効果があると考えられます。

そこで今回はクラシックモードでテーブル(表)のソースを整え、さらに枠線や背景色もしっかりと描く方法を紹介したいと思います。

完成形

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
国内平均 2,670,279 7,935.56 654.59
各都市の人口・面積・人口密度

テーブル(表)に「theadタグ」「tbodyタグ」「tfootタグ」などもしっかりとコーディングして、見出しの背景色を変え、枠線も描くことで見やすいテーブル(表)に仕上げます。

AFFINGER6でテーブル(表)を作成する

「新規投稿を追加」か「投稿を編集」のページで画面左上の「ブロック挿入ツールを切り替え」ボタンを選択してブロック挿入ツールを表示します。

ブロック挿入ツールから「テーブル」を選択します。

テーブル作成に必要な表形式のデータを挿入します。

カラム数

カラム数を設定します。カラム数はテーブル(表)の横軸、列の部分になります。

行数

行数を設定します。行数はテーブル(表)の縦軸の部分になります。

スタイル

AFFINGER6の機能を利用してテーブル(表)のデザインを変更します。

画面右上の歯車マークの「設定」ボタンを選択してテーブルの設定画面を表示します。

行と列に構造化して情報を表示するコンテンツを作成します。

デフォルト

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

デフォルトのまま制作したテーブル(表)です。こちらをベースをほかのスタイルも見てみます。

合わせてhtmlのソースも確認していきます。

 html
<figure class="wp-block-table is-style-regular">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>
			<tr>
				<td>大阪府</td>
				<td>8,807,279</td>
				<td>1,905.34</td>
				<td>4,622.42</td>
			</tr>
			<tr>
				<td>愛知県</td>
				<td>7,516,008</td>
				<td>5,173.15</td>
				<td>1,452.89</td>
			</tr>
			<tr>
				<td>福岡県</td>
				<td>5,123,371</td>
				<td>4,986.86</td
				<td>1,027.37</td>
			</tr>
			<tr
				<td>北海道</td>
				<td>5,181,776</td>
				<td>78,421.36</td>
				<td>66.08</td>
			</tr>
		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

ストライプ

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

テーブル(表)の背景色が交互になります。

 html
<figure class="wp-block-table is-style-stripes">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

<figure class="wp-block-table is-style-stripes">

スクロール(SP)

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

スマートフォンでテーブル(表)を見ると横スクロールするようになります。
個人的には一番使用頻度の高いテーブル(表)です。

横に長いテーブル(表)の場合はこちらを推奨します。

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

<figure class="wp-block-table is-style-scroll-box">

中央寄せ

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

テキストが全て中央寄せになります。

 html
<figure class="wp-block-table is-style-st-centertable">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

<figure class="wp-block-table is-style-st-centertable">

ラインのみ

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

デフォルトと比べて縦線がなくなりました。

 html
<figure class="wp-block-table is-style-st-table-line">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

<figure class="wp-block-table is-style-st-table-line">

ラインのみ2

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

「ラインのみ」と「ラインのみ2」は違いが分かりません。

 html
<figure class="wp-block-table is-style-st-table-line-2">
	<table>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

<figure class="wp-block-table is-style-st-table-line-2">

表の設定

theadタグ」「tbodyタグ」「tfootタグ」などのタグを設定するために表の設定を利用します。

ヘッダーセクション

表の設定の「ヘッダーセクション」をチェックして、「theadタグ」を追加します。

ヘッダーラベル ヘッダーラベル ヘッダーラベル ヘッダーラベル
都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度

テーブル(表)の上部に「ヘッダーラベル」が追加されました。

なぜかヘッダーセクション部分のボーダーが表示されないのが不思議です。こちらは後ほど修正します。

テーブルはスクロール(SP)を使用しています。

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>ヘッダーラベル</th>
				<th>ヘッダーラベル</th>
				<th>ヘッダーラベル</th>
				<th>ヘッダーラベル</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>都道府県</td>
				<td>人口</td>
				<td>面積</td>
				<td>人口密度</td>
			</tr>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

ソースを確認すると「thead」が追加されたのが分かると思います。

「ヘッダーセクション」に「都道府県」「人口」「面積」「人口密度」をコピー&ペーストしてテーブル(表)を整えます。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
各都市の人口・面積・人口密度
 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

フッターセクション

続いて「フッターセクション」も追加したいと思います。表の設定の「フッターセクション」をチェックして、「tfootタグ」を追加します。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
フッターラベル フッターラベル フッターラベル フッターラベル
各都市の人口・面積・人口密度

テーブル(表)の上部に「フッターラベル」が追加されました。

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
		<tfoot>
			<tr>
				<td>フッターラベル</td>
				<td>フッターラベル</td>
				<td>フッターラベル</td>
				<td>フッターラベル</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

せっかくなので項目を追加してみました。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
国内平均 2,670,279 7,935.56 654.59
各都市の人口・面積・人口密度
 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
		<tfoot>
			<tr>
				<td>国内平均</td>
				<td>2,670,279</td>
				<td>7,935.56</td>
				<td>654.59</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

見出しを設定

テーブル(表)の見出しを設定していきます。見出しは各項目のタイトルのような部分のことを指します。
今回、制作しているテーブル(表)の見出しは画像の赤い部分になります。

見出しに変更するためには「tdタグ」と「thタグ」に変更する必要があります。ヘッダーセクションは自動的に「thタグ」が設定されていますがそれ以外の部分は手動で変更する必要があります。

まずはビジュアル編集からHTML編集に切り替えます。

オプションを選択します。

オプションの中から「HTMLとして編集」を選択します。

HTMLのソースが表示されます。改行がされずに1行で記載されているので少し見づらいですが、ソースを整えると以下のようになります。

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>東京都</td>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>
			<tr>
				<td>大阪府</td>
				<td>8,807,279</td>
				<td>1,905.34</td>
				<td>4,622.42</td>
			</tr>
			<tr>
				<td>愛知県</td>
				<td>7,516,008</td>
				<td>5,173.15</td>
				<td>1,452.89</td>
			</tr>
			<tr>
				<td>福岡県</td>
				<td>5,123,371</td>
				<td>4,986.86</td
				<td>1,027.37</td>
			</tr>
			<tr
				<td>北海道</td>
				<td>5,181,776</td>
				<td>78,421.36</td>
				<td>66.08</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>国内平均</td>
				<td>2,670,279</td>
				<td>7,935.56</td>
				<td>654.59</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

「tbody」部分と「tfoot」部分の見出し部分を「tdタグ」から「thタグ」に書き換えます。

「<td>」と「</td>」を「<th>」と「</th>」に書き換えます。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
国内平均 2,670,279 7,935.56 654.59
各都市の人口・面積・人口密度

書き換えましたが見た目に変化はありません。ですがこれが正しいコーディングになります。

 html
<figure class="wp-block-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>東京都</th>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>
			<tr>
				<th>大阪府</th>
				<td>8,807,279</td>
				<td>1,905.34</td>
				<td>4,622.42</td>
			</tr>
			<tr>
				<th>愛知県</th>
				<td>7,516,008</td>
				<td>5,173.15</td>
				<td>1,452.89</td>
			</tr>
			<tr>
				<th>福岡県</th>
				<td>5,123,371</td>
				<td>4,986.86</td
				<td>1,027.37</td>
			</tr>
			<tr
				<th>北海道</th>
				<td>5,181,776</td>
				<td>78,421.36</td>
				<td>66.08</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>国内平均</th>
				<td>2,670,279</td>
				<td>7,935.56</td>
				<td>654.59</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

追加CSSクラス

ここからは見た目をきれいにしていきたいと思います。

現状ではヘッダーセクション部分の枠線が無く、見出し(th)との違いも見た目では分からないので変化をつけたいと思います。

テーブルの高度な設定の中から「追加CSSクラス」にクラスを追加します。
今回は「basic-table」というスタイル名で記載しています。(スタイル名は自由に決めてください。)

 html
<figure class="wp-block-table basic-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>東京都</th>
				<td>14,011,487</td>
				<td>2,194.05</td>
				<td>6,386.13</td>
			</tr>

			~省略~

		</tbody>
		<tfoot>
			<tr>
				<th>国内平均</th>
				<td>2,670,279</td>
				<td>7,935.56</td>
				<td>654.59</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

CSSを追加するために左側のメインメニューから「外観」「カスタマイズ」を選択します。

追加CSSに以下の内容をコピー&ペーストします。

 css
.basic-table {
	border-collapse: collapse;
}

.basic-table thead th,
.basic-table thead td {
	position: static;
}

.basic-table th {
	background-color: #eee !important;
	border: 1px solid lightgray !important;
	white-space: nowrap;
}

.basic-table td {
	border: 1px solid lightgray !important;
}

追加CSSを登録することでテーブル(表)が以下のようになりました。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
国内平均 2,670,279 7,935.56 654.59
各都市の人口・面積・人口密度

枠線の色を変える

枠線を変える場合は「border」の色を変更すると変えることができます。

 css
.basic-table th {
	background-color: #eee !important;
	border: 1px solid lightgray !important;
	white-space: nowrap;
}

.basic-table td {
	border: 1px solid lightgray !important;
}

色はカラーネームか16進表記で指定することができます。

背景色を変える

枠線を変える場合は「background-color」の色を変更すると変えることができます。

 css
.basic-table th {
	background-color: #eee !important;
	border: 1px solid lightgray !important;
	white-space: nowrap;
}

枠線と同様に色はカラーネームか16進表記で指定することができます。

数字を右寄せにする

数字はテーブル(表)の左寄せより右寄せの方が見やすいのでHTMLにclassを追加して右寄せに変更します。

数字が記載されているコードに「class="has-text-align-right"」を追加します。

都道府県 人口 面積 人口密度
東京都 14,011,487 2,194.05 6,386.13
大阪府 8,807,279 1,905.34 4,622.42
愛知県 7,516,008 5,173.15 1,452.89
福岡県 5,123,371 4,986.86 1,027.37
北海道 5,181,776 78,421.36 66.08
国内平均 2,670,279 7,935.56 654.59
各都市の人口・面積・人口密度
 html
<figure class="wp-block-table basic-table is-style-scroll-box">
	<table>
		<thead>
			<tr>
				<th>都道府県</th>
				<th>人口</th>
				<th>面積</th>
				<th>人口密度</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>東京都</th>
				<td class="has-text-align-right">14,011,487</td>
				<td class="has-text-align-right">2,194.05</td>
				<td class="has-text-align-right">6,386.13</td>
			</tr>
			<tr>
				<th>大阪府</th>
				<td class="has-text-align-right">8,807,279</td>
				<td class="has-text-align-right">1,905.34</td>
				<td class="has-text-align-right">4,622.42</td>
			</tr>
			<tr>
				<th>愛知県</th>
				<td class="has-text-align-right">7,516,008</td>
				<td class="has-text-align-right">5,173.15</td>
				<td class="has-text-align-right">1,452.89</td>
			</tr>
			<tr>
				<th>福岡県</th>
				<td class="has-text-align-right">5,123,371</td>
				<td class="has-text-align-right">4,986.86</td
				<td class="has-text-align-right">1,027.37</td>
			</tr>
			<tr>
				<th>北海道</th
				<td class="has-text-align-right">5,181,776</td>
				<td class="has-text-align-right">78,421.36</td>
				<td class="has-text-align-right">66.08</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>国内平均</th>
				<td class="has-text-align-right">2,670,279</td>
				<td class="has-text-align-right">7,935.56</td>
				<td class="has-text-align-right">654.59</td>
			</tr>
		</tfoot>
	</table>
	<figcaption>各都市の人口・面積・人口密度</figcaption>
</figure>

これでテーブル(表)が完成です。これを参考にテーブル(表)を作っていただければ幸いです。

-DESIGN