【Cocoon】HTMLでテーブルのセルを結合する方法：コード実例付き

うと

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

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

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

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

こちらの記事では、実際の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>	<tｈ></tｈ>	<tｈ></tｈ>	</tr>	←</thead>
<tbody>→	<tr>→	<td>↓</td>	<td>↓</td>	←</tr>	←</tbody>
<tfoot>→	<tr>→	<td>↓</td>	<td>↓</td>	←</tr>	←</tfoot>

セルを結合するには

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

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

HTMLコード

<td rowspan="3">表示内容</td>

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

HTMLコード

<td colspan="3">表示内容</td>

縦（垂直方向）に結合する実例

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

１	２	３
３行結合	２－１	３－１
	２－２	３－２
	２－３	３－３
２行結合	２－４	３－４
２行結合	２－５	３－５

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

HTMLコード

<figure class="wp-block-table aligncenter">
<thead>
 <tr>
  <th>１</th>
  <th>２</th>
  <th>３</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td rowspan="3">３行結合</td>
  <td>２－１</td>
  <td>３－１</td>
 </tr>
 <tr>
  <td>２－２</td>
  <td>３－２</td>
 </tr>
 <tr>
  <td>２－３</td>
  <td>３－３</td>
 </tr>
 <tr>
  <td rowspan="2">２行結合</td>
  <td>２－４</td>
  <td>３－４</td>
 </tr>
 <tr>
  <td>２－５</td>
  <td>３－５</td>
 </tr>
</tbody></figure>

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

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

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

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

横（水平方向）に結合する実例

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

１	３	４	５
２列結合	３－１	４－１	５－１
３列結合		４－２	５－２
４列結合			５－３

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

HTMLコード

<figure class="wp-block-table aligncenter">
<thead>
 <tr>
  <th>１</th>
  <th>２</th>
  <th>３</th>
  <th>４</th>
  <th>５</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td colspan="2">２列結合</td>
  <td>３－１</td>
  <td>４－１</td>
  <td>５－１</td>
 </tr>
 <tr>
  <td colspan="3">３列結合</td>
  <td>４－２</td>
  <td>５－２</td>
 </tr>
 <tr>
  <td colspan="4">４列結合</td>
  <td>５－３</td>
</tr>
</tbody></figure>

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

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

１	２	３
縦・横に結合		３－１
縦・横に結合		３－２
１－３	２－３	３－３

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

HTMLコード

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

文字の中央揃え・右揃え

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

HTMLコード

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

右揃えのときは center を right にするだけです。

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の知識がそんなになくてもできるかな～？と思います。

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