ワードプレスのテーブル（表）カスタマイズはプラグイン無しで自由自在

ワードプレスでプラグインを使わずに好みの「テーブル（表）」を作っちゃおう！
『追加CSSクラス』と『再利用ブロック』を使うカスタマイズです。
最近、『追加CSSクラス』の使い方を知ったので、使いたくって使いたくって…。

2019年夏！HTML＆CSSカスタマイズ3部作です。（笑）

ワードプレス標準のブロックエディターで「テーブル（表）」を作ると、「見出し（th）」が使われていません。
見出し要素があるなら、「これは見出しですよ！」と伝えた方が、SEO的にも良さそうです。

元々のテーブルもある程度残したままで、『再利用ブロック』で見出し付きテーブルを用意します。

なお、現在『 WordPress 5.2 “Jaco” 』。
使用しているテーマは『Simplicity 2』。
テーブルをカスタマイズするようなプラグインは一切無しの状態です。

▪︎contents▪︎

見出し（th）付きテーブル３種

自分が必要なテーブルは、大抵は左側が見出しだな〜。
その他に用意したいのは、上側見出し、上と左のダブル見出しかな〜。

では、3種類のテーブルを用意します。
それぞれの『追加CSSクラス』のクラス名を「table-a」「table-b」「table-c」としました。

クラス名は任意ですが、半角英数字・ハイフン・アンダーバーで分かりやすくですね。

先に完成品を披露です、ジャーン！
今後のカスタマイズを考え、画像を貼っています。

「table-a」は左見出しで横ストライプ↓

「table-b」は上見出しで縦ストライプ↓

「table-c」は上＆左見出しで内側はシンプル無地↓

シンプルだけど、結構こだわりました。

HTMLはクラス名とthの場所が違うだけ

HTMLはワードプレス標準のテーブルを基に、それぞれ＜table class=”○○○　table-○　○○○”＞と、クラス名が入っています。
よく見ると、th（見出しタグ）の場所が違いますね。
左上から右下に向かって必要な数だけth（見出しタグ）とtd（１つのデータタグ）が書いてありますね。
横1行分がtr（横行タグ）で挟まれていて、これで改行というのがわかります。

横行を増やしたければ、tr（横行タグ）を追加してthかtdを挟む。
縦列を増やしたければ、tr（横行タグ）の中にthかtdを入れる。
HTML初心者でも理解しやすい！

「table-a」のHTML↓

<table class="wp-block-table table-a is-style-stripes">
<tbody>
　<tr>
　　<th>th見出しA</th>
　　<td>A------1</td>
　　<td>A------2</td>
　　<td>A------3</td>
　</tr>
　<tr>
　　<th>th見出しB</th>
　　<td>B------1</td>
　　<td>B------2</td>
　　<td>B------3</td>
　</tr>
　<tr>
　　<th>th見出しC</th>
　　<td>C------1</td>
　　<td>C------2</td>
　　<td>C------3</td>
　</tr>
　<tr>
　　<th>th見出しD</th>
　　<td>D------1</td>
　　<td>D------2</td>
　　<td>D------3</td><
　/tr>
</tbody></table>

「table-b」のHTML↓

<table class="wp-block-table table-b is-style-regular">
<tbody>
　<tr>
　　<th>th見出しA</th>
　　<th>th見出しB</th>
　　<th>th見出しC</th>
　　<th>th見出しD</th>
　</tr>
　<tr>
　　<td>B------0</td>
　　<td>B------1</td>
　　<td>B------2</td>
　　<td>B------3</td>
　</tr>
　<tr>
　　<td>C------0</td>
　　<td>C------1</td>
　　<td>C------2</td>
　　<td>C------3</td>
　</tr>
　<tr>
　　<td>D------0</td>
　　<td>D------1</td>
　　<td>D------2</td>
　　<td>D------3</td>
　</tr>
</tbody></table>

「table-c」のHTML↓

<table class="wp-block-table table-c is-style-regular">
<tbody>
　<tr>
　　<th></th>
　　<th>th見出しA</th>
　　<th>th見出しB</th>
　　<th>th見出しC</th>
　</tr>
　<tr>
　　<th>小見出しA</th>
　　<td>B------1</td>
　　<td>B------2</td>
　　<td>B------3</td>
　</tr>
　<tr>
　　<th>小見出しB</th>
　　<td>C------1</td>
　　<td>C------2</td>
　　<td>C------3</td>
　</tr>
　<tr>
　　<th>小見出しC</th>
　　<td>D------1</td>
　　<td>D------2</td>
　　<td>D------3</td>
　</tr>
</tbody></table>

これらをそれぞれ、投稿画面の1ブロックを『HTMLとして編集』にしてコピペ、『再利用ブロックに追加』します。

CSSはクラス名ごとに僅かな変化

CSSは出来るだけまとめました。

table{border-collapse:collapse !important;
　margin:0 auto;
}
table, th, td {border:none;
}
td,th{border-width: 1.7px 0px !important;
　border-color: #ddddd4 !important;
　padding:9px !important;
　line-height:1.4;
}
th{background:#fff2e5 !important;
　border-bottom:2px solid #eb7500 !important;
 color:#eb7500 !important;
}
/*table-a横ボーダー*/
.table-a tr:nth-child(odd){background:#fff9f4 !important;
}
/*table-ｂ縦ボーダー*/
.table-b tr td:nth-child(odd){background:#fff9f4 ;
}
.table-b tr td:nth-child(even){background: #ffffff ;
}
/*table-ｃ td無地*/
.table-c th {background:none !important;
}
.table-c tr:nth-child(1) th{background-color: #fff2e5  !important
}
/*tdセンター*/
.td-center td{text-align:center; 
}

途中までは共通の指定、後ろに個々の指定を付け足しています。
上記のCSSだと、元々のワードプレス標準テーブルも少々変化します。

!important が多いのが気になりますが、付けないと反映されませんでした。
（できるだけ !important は使わない方が良い）

テーマやプラグインの作用によっては同じCSSでは上手くいかない、もしくは、もっと省略してもOKかもしれません。
元々のワードプレスの優先度が強烈っぽい⁈（汗）
＃で始まる色指定は、「原色大辞典サイト」などを参考にしてください。

最後の行にCSSクラス「td-center」がありますが、td内の文を中央寄せにする記述です。
テーブルによって、文のボリュームによって、中央寄せの方が美しいと思ったら利用してください。
デフォルトではtdは左寄せ、見出し（th）は中央寄せになっています。
『追加CSSクラス』は半角スペースを入れながら、1つのブロックに複数指定することもOKですので。

ワードプレス投稿画面『高度な設定』→『追加CSSクラス』に半角スペースを入れて記入します。

完全に3つのクラスに分けてCSSを書くのも有りです。
色も枠線も自由自在に変えられますしね。
もちろん、もっと多くのテーブルデザインを作っておいてもOK！

CSSを記述する場所は以下のどちらか。
●ダッシュボード左の『外観』→『カスタマイズ』→『追加CSS』へ。
●ダッシュボード左の『外観』→『テーマエディター』→『スタイルシート (style.css)』へ。
スタイルシートに書き込む場合は、利用しているテーマの子テーマに。（子テーマを利用している場合）

作ったテーブルの使い方

カスタマイズしたテーブルを使うときは、『再利用可能』ブロックから呼び出して、必要な行数・列数に応じてHTMLを改造。
（ここはHTML画面で頑張る！）

＊再利用ブロックのまま編集すると、他で使っている同じブロックもリンクしてしまうので、呼び出した後に「通常ブロックに変換」してから改造してください。

↓再利用ブロックの便利は使い方はコチラの記事も是非！

テーブルカスタマイズまとめ

『CSSクラス名』入れたHTMLを『再利用ブロック』に登録する。
追加CSSでそれぞれのデザインを楽しく指定。
th、td、trの意味がわかれば呪文のようなHTMLも読めてきます。

追加CSSクラス・プラグイン・標準のテーブルの違いを考えて、一番ピッタリの作り方を見つけてください。

	追加CSSクラス	プラグイン	標準のテーブル
デザイン	自由自在	まあまあ自由？	種類少ない
見出しth	自由自在	無い？tdで代用？	無し
手軽さ	少々難しい設定してしまえば楽！	直感的	簡単