プラグインを使わずWordPressで表のセルを結合する方法とは

どうも、おとうです。

WordPressで表を作ったときに、どうしてもセル同士を結合したい！

でもできるだけプラグインは使いたくない。

そんな時に使えるちょい技です。

HTMLのタグを使おう！

HTMLというマークアップ言語を使って表を作ることで、プラグインを使わずにセルの結合をすることができます。

例えば、画像で見ると…

これをHTML表示にするとこうなります。

<figure class="wp-block-table aligncenter">
　<table>
　　<tbody>
　　　<tr>
　　　　<td class="has-text-align-center" data-align="center">1行-１列</td>
　　　　<td>1行-2列</td>
　　　　<td>1行-3列</td>
　　　</tr>
　　　<tr>
　　　　<td>2行-１列</td>
　　　　<td>2行-2列</td>
　　　　<td>2行-3列</td>
　　　</tr>
　　　<tr>
　　　　<td>3行-1列</td>
　　　　<td>3行-2列</td>
　　　　<td>3行-3列</td>
　　　</tr>
　　</tbody>
　</table>
</figure>

はい、何かいてあるかさっぱりですよね。

HTMLについては別の機会に説明するとします。

では具体的な方法を見ていきましょう。

横に結合したい場合

横のセル同士を結合したい場合には、<td>タグの中にcolspan=”結合したいセルの数”を入力します。

まずは表で見てみましょう。

次にHTMLタグで見てみましょう。

変わっている場所を太字で表しておきます。

<figure class="wp-block-table aligncenter">
　<table>
　　<tbody>
　　　<tr>
　　　　<td class="has-text-align-center" data-align="center">1行-１列</td>
　　　　<td colspan="2">1行-2列</td>
　　　</tr>
　　　<tr>
　　　　<td>2行-１列</td>
　　　　<td>2行-2列</td>
　　　　<td>2行-3列</td>
　　　</tr>
　　　<tr>
　　　　<td>3行-1列</td>
　　　　<td>3行-2列</td>
　　　　<td>3行-3列</td>
　　　</tr>
　　</tbody>
　</table>
</figure>

今回は１行目の２列目・３列目を結合しました。

２つのセルを結合するので、中の数字が「２」となっています。

また、１行目３列セルの<td></td>は削除しています。

縦に結合したい場合

縦のセル同士を結合したい場合には、<td>タグの中にrowspan=”結合したいセルの数”を入力します。

まずは表で見てみましょう。

次にHTMLタグで見てみましょう。

変わっている場所を太字で表しておきます。

<figure class="wp-block-table aligncenter">
　<table>
　　<tbody>
　　　<tr>
　　　　<td>1行-１列</td>
　　　　<td rowspan="2">1行-2列</td>
　　　　<td>1行-3列</td>
　　　</tr>
　　　<tr>
　　　　<td>2行-１列</td>
　　　　<td>2行-3列</td>
　　　</tr>
　　　<tr>
　　　　<td>3行-1列</td>
　　　　<td>3行-2列</td>
　　　　<td>3行-3列</td>
　　　</tr>
　　</tbody>
　</table>
</figure>

今回は２列目の１行目・２行目を結合しました。

２つのセルを結合するので、中の数字が「２」となっています。

また、２行目２列セルの<td></td>は削除しています。

まとめ

いかがでしたか？

HTMLについて勉強が必要ですが、やってみると意外と簡単です。

手間だと感じる方は、プラグインを利用して作った方がよいでしょう。