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> | <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」を追加します。
<td rowspan="3">表示内容</td>横３つのセルを結合する場合は、tdに「colspan」を追加します。
<td colspan="3">表示内容</td>縦（垂直方向）に結合する実例
これだけでは分かりにくいかもしれませんので、実際にこのような表を作ってみましょう！
| １ | ２ | ３ |
|---|---|---|
| ３行結合 | ２－１ | ３－１ |
| ２－２ | ３－２ | |
| ２－３ | ３－３ | |
| ２行結合 | ２－４ | ３－４ |
| ２－５ | ３－５ |
こちらのコードをコピーしてカスタム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>プレビューに変更すると、表示できているかと思います。
中身を編集しながらやってみてると、分かりやすいですし、理解が深まります。
いらない行を消したり増やしたりして、好きなようにカスタマイズしてみてみてください。
横（水平方向）に結合する実例
つぎは、横に結合してみましょう。
| １ | ２ | ３ | ４ | ５ |
|---|---|---|---|---|
| ２列結合 | ３－１ | ４－１ | ５－１ | |
| ３列結合 | ４－２ | ５－２ | ||
| ４列結合 | ５－３ | |||
上の表のコードは以下の通りです。
<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>縦横どちらも結合する実例
つぎは、縦・横同時に結合してみましょう。
| １ | ２ | ３ |
|---|---|---|
| 縦・横に結合 | ３－１ | |
| ３－２ | ||
| １－３ | ２－３ | ３－３ |
上の表のコードは以下の通りです。
<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>文字の中央揃え・右揃え
セルを中央揃えしたいときは以下のように追記してください。
<td rowspan="3" class="has-text-align-center" data-align="center">表示内容</td>右揃えのときは center を right にするだけです。
<td rowspan="3" class="has-text-align-right" data-align="right">表示内容</td>文字を太字にする
太字にしたい箇所は<strong></strong＞で挟むだけでOKです。
<td rowspan="3" class="has-text-align-center" data-align="center">
<strong>表示内容</strong>
</td>まとめ
いかがでしたか？
HTMLの知識がそんなになくてもできるかな～？と思います。
どうしても、もっと簡単にしたい場合はプラグインを導入したり、有料テーマを購入することをおすすめします。
コメント