WordPressの「テーブル」ブロックで<th>タグをを使う方法と簡単なCSSデザインを紹介しています。

※ 現在は「テーブル」ブロックのカスタマイズに「ヘッダーセクション」「フッターセクション」が追加されており、必要性は低いです。

「テーブル」ブロックでthを挿入する方法とカスタマイズ

「テーブル」ブロックで<th>を挿入する方法になります。

自動で生成されるtable構造は以下の通りです。（2019年当時のもの）

<table class="wp-block-table">
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

デフォルトで<th>入れられても困るのですが、実際、 <th> を使いたい場面も少なくありません。
エディタの機能で<th>入れるコマンドがないので一度HTML編集にしてから<th>を入れて戻す方法があります。

<tr><th></th><th></th></tr>

HTMLにしてから戻すと消されるモノも多々ありますが、<th>は消えない仕様です。

th	th
td	td
td	td

GutenbergでのthをCSSでデザインする

テーブルを挿入するとクラス名に「wp-block-table」が入りますので、CSSでテーブルをカスタマイズする場合はこのクラス名に対してCSSを定義する事が可能です。

.wp-block-table th {
	background: #f5f5f5;
}

また右カラムにあるテーブルブロック選択中の「ブロック」ー「高度な設定」ー「追加 CSS クラス」からCSSクラスを追加できるので記事に合わせて変える事が可能です。

.wp-block-table my-table th {
	background: #f5f5f5;
 }