【Cocoon】HTMLでテーブルのセルを結合する方法

HTMLでテーブルのセルを結合する方法
この記事は約8分で読めます。
うと
うと

Cocoonのテーマでは、テーブルが結合できない…

Cocoonでは、テーブル)のブロックを追加することができます。

ですが、エクセルのように簡単にセルを結合することができません

プラグインなどを利用せずにセルを結合したい場合は、HTMLで入力すれば結合することができます

こちらの記事では、実際のHTMLを実例に解説しています。

テーブルを構成するHTML

テーブル(表)のHTMLは<table></table>で囲まれています。

その中に、要素を含むことによってヘッダー・フッターなどを指定します。

要素名称
<thead>Table Header表のヘッダー
<tbody>Table Body表の本体部分
<tfoot>Table Footer表のフッター

さらにその中に、要素を含むことによって表が完成します。

要素名称
<th>Table Headerヘッダー
<tr>Table Row行(横方向)
<td>Table Data列(縦方向)

具体的には、<tr>で行を作り、その中に<th>や<td>を挟んで列を増やしていくイメージです。

<thead> →<tr> <th></th> <th></th> </tr> ←</thead>
<tbody><tr>→<td>↓</td> <td>↓</td> ←</tr> </tbody>
<tfoot><tr>→<td>↓</td> <td>↓</td> ←</tr> </tfoot>

セルを結合するには

セルの要素となる部分に、rowspan=”” またはcolspan=”” を追加すると、結合することができます。

3つのセルを結合する場合は、tdに「rowspan」を追加します。

HTMLコード
<td rowspan="3">表示内容</td>

3つのセルを結合する場合は、tdに「colspan」を追加します。

HTMLコード
<td colspan="3">表示内容</td>

縦(垂直方向)に結合する実例

これだけでは分かりにくいかもしれませんので、実際にこのような表を作ってみましょう!

3行結合 2-1 3-1
2-2 3-2
2-3 3-3
2行結合 2-4 3-4
2-5 3-5

こちらのコードをコピーしてカスタムHTMLで貼り付けしてみてください。

<figure class="wp-block-table aligncenter">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">3行結合</td>
<td>2-1</td>
<td>3-1</td>
</tr>
<tr>
<td>2-2</td>
<td>3-2</td>
</tr>
<tr>
<td>2-3</td>
<td>3-3</td>
</tr>
<tr>
<td rowspan="2">2行結合</td>
<td>2-4</td>
<td>3-4</td>
</tr>
<tr>
<td>2-5</td>
<td>3-5</td>
</tr>
</tbody></figure>

テーブル自体は中央揃えにしています。

プレビューに変更すると、表示できているかと思います。

中身を編集しながらやってみてると、分かりやすいですし、理解が深まります。

いらない行を消したり増やしたりして、好きなようにカスタマイズしてみてみてください。

横(水平方向)に結合する実例

つぎは、横に結合してみましょう。

2列結合 3-1 4-1 5-1
3列結合 4-2 5-2
4列結合 5-3

上の表のコードは以下の通りです。

<figure class="wp-block-table aligncenter">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">2列結合</td>
<td>3-1</td>
<td>4-1</td>
<td>5-1</td>
</tr>
<tr>
<td colspan="3">3列結合</td>
<td>4-2</td>
<td>5-2</td>
</tr>
<tr>
<td colspan="4">4列結合</td>
<td>5-3</td>
</tr>
</tbody></figure>

縦横どちらも結合する実例

つぎは、縦・横同時に結合してみましょう。

縦・横に結合 3-1
3-2
1-3 2-3 3-3

上の表のコードは以下の通りです。

<figure class="wp-block-table aligncenter">
<thead></thead><tbody>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="2" rowspan="2">縦・横に結合</td>
<td>3-1</td>
</tr>
<tr>
<td>3-2</td>
</tr>
<tr>
<td>1-3</td>
<td>2-3</td>
<td>3-3</td>
</tr>
</tbody></figure>

文字の中央揃え・右揃え

セルを中央揃えしたいときは以下のように追記してください。

HTMLコード
<td rowspan="3" class="has-text-align-center" data-align="center">表示内容</td>

右揃えのときは centerright にするだけです。

HTMLコード
<td rowspan="3" class="has-text-align-right" data-align="right">表示内容</td>

文字を太字にする

太字にしたい箇所は<strong></strongで挟むだけでOKです。

HTMLコード
<td rowspan="3" class="has-text-align-center" data-align="center">
<strong>表示内容</strong>
</td>

まとめ

いかがでしたか?

HTMLの知識がそんなになくてもできるかな~?と思います。

どうしても、もっと簡単にしたい場合はプラグインを導入したり、有料テーマを購入することをおすすめします。

コメント