AFFINGER6 テーブルブロックの使い方｜セル結合の編集手順と見やすくするコツ

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6のテーブルブロックは、少し工夫するだけで「見やすく・伝わる表」に編集できます。

Question

テーブルブロックのセル（表）ってどうやって結合するの？

AFFINGER6でテーブル（表）を作っていると…

「セルを結合したいのに、ボタンが見当たらない」
「表を少し整えたいだけなのに、レイアウトが崩れる」
「HTML編集って難しそう…」

こんなふうに感じたことはありませんか？

AFFINGER6のテーブルブロックは、基本的な表作成は簡単ですが、セル結合などの細かい編集には少しコツが必要です。
やり方を知らないまま触ると、表が崩れてしまったり、修正に時間がかかってしまうこともあります。

この記事では、AFFINGER6のテーブルブロックでセル結合する方法を中心に、HTML編集（colspan・rowspan）の基本から、表を見やすく・使いやすく仕上げるコツまでを、初心者の方にも分かりやすく解説します。

「最低限ここだけ押さえればOK」というポイントに絞っているので、テーブル編集が苦手な方でも、読みながらそのまま真似できます。

こんな方におすすめ！

AFFINGER6でテーブル（表）を使っているが、セル結合の方法が分からない
表を少し整えたいだけなのに、レイアウトが崩れてしまう
colspan・rowspanといったHTML編集に苦手意識がある
見やすくて伝わりやすい表を作りたい
テーブル編集に毎回時間がかかってしまう

この記事でわかること！

AFFINGER6テーブルブロックの基本的な編集方法
HTML編集を使ったセル結合（colspan・rowspan）の手順
セル結合時に表が崩れないための注意点
セル結合が面倒なときの代替手段（プラグイン活用）

それではご覧ください。

AFFINGER6 テーブルブロックとは？（基本）

AFFINGER6のテーブルブロックは、表（テーブル）を簡単に作成できるWordPress標準ブロックです。
行数・列数を指定するだけで表を作成でき、セル内にテキストや数字を入力するだけで、比較表や一覧表を手軽に作れます。

特別な知識がなくても使えるため…

商品比較表
料金プラン表
機能一覧・スペック表

といった、ブログでよく使われる表を直感的に作れるのが特徴です。

テーブルブロックでできること

AFFINGER6のテーブルブロックでは、主に次のような編集ができます。

行・列の追加や削除
セル内のテキスト編集
見出し行・見出し列の設定
表全体の配置（中央・左寄せなど）

これらの基本操作だけでも、シンプルな表であれば十分に対応できます。

標準テーブルブロックの注意点

一方で、AFFINGER6のテーブルブロックにはできないこともあります。

編集画面上の操作だけではセル結合ができない
細かいレイアウト調整にはHTML編集が必要
複雑な表を作ると調整に時間がかかる

そのため、「セルを横や縦に結合したい」「見出しをまとめたい」といった場合は、HTML編集（colspan・rowspan）を使う必要があります。

基本的なテーブルブロックの使い方については、こちらの記事で詳しく解説しています。
あわせてご覧ください。

: AFFINGER6のテーブルブロック使い方ガイド｜商品比較・料金表もラクラク作成！

AFFINGER6の「テーブルブロック」の使い方をわかりやすく解説！商品比較表や料金表、対比表などを簡単に作るコツを初心者向けにご紹介します。表のカスタマイズや活用例もあり！

次の章では、実際に AFFINGER6のテーブルブロックでセル結合する具体的な手順を、画面の流れに沿って解説していきます。

AFFINGER6 テーブルブロックでセル結合する方法

AFFINGER6のテーブルブロックでは、編集画面上の操作だけでセル結合はできません。
セルを結合したい場合は、テーブルブロックを HTMLとして編集し、colspan や rowspan を使って調整します。

最初は少し戸惑いますが、やり方自体はシンプルです。

セル結合前の準備

まず、編集したいテーブルブロックをクリックします。
ブロックツールバー右側の「︙（オプション）」をクリックし、「HTMLとして編集」を選択してください。

編集中に表示が崩れても、保存前であれば元に戻せるので安心です。

横方向にセルを結合する方法（colspan）

横に並んだセルを結合したい場合は、colspan を使います。

手順

結合したい行の <td> タグを確認
結合後に残すセルに colspan="数字" を追加
結合対象となる不要な <td> タグを削除

記述例

<tr>
  <td>項目</td>
  <td colspan="2">内容</td>
</tr>

この例では、2列分のセルが1つに結合されています。

縦方向にセルを結合する方法（rowspan）

縦に並んだセルを結合したい場合は、rowspan を使います。

手順

一番上のセルの <td> に rowspan="数字" を追加
下にある結合対象セルの <td> を削除

記述例

<tr>
  <td rowspan="3">共通項目</td>
  <td>内容1</td>
</tr>

編集後は必ず「ビジュアル編集」に戻す

HTML編集が終わったら、必ず「HTMLとして編集」→「ビジュアル編集に戻す」を実行してください。

表示に問題がなければ、そのまま保存してOKです。

縦横の結合方法がわかったところで実例を見ていきましょう。

実例で分かる！セル結合の手順（HTML編集）

ここからは、実際のサンプルを使ってセル結合の手順を解説します。

まずは、以下のテーブルブロックを編集していきます。

テーブルブロックを挿入し、カラムを「4」、行数を「4」に設定します。

エディター画面でテーブルブロックを挿入し、カラム4・行数4で表を作成している設定画面

以下では、各セルに数字を入力したサンプル表を使って、セル結合の手順を解説します。

列のセル結合：ピンク色文字部のセル「2・3・4」
行のセル結合：水色文字部のセル「8・12・16」

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

こちらが、セル結合後の完成イメージです。

1	3列（カラム）を結合したセル（セル→2・3・4）
5	6	7	3行を結合したセル（セル→8・12・16）
9	10	11
13	14	15

テーブルブロックをHTMLとして編集する手順

エディター画面での作業です。

セルの結合は『HTML』で行います。

テーブルブロックをHTML表示に切り替える

テーブルブロックを選択して…

ツールバーのオプション（3点リーダー）をクリックしてドロップダウンメニューを開きます。
その中の『HTMLとして編集』をクリックします。

ツールバー右側のオプション（3点リーダー）をクリックし、ドロップダウンメニューを開いている画面

テーブルブロックが「HTML」として表示され、コードを直接編集したりカスタマイズすることが可能になります。

各セルに値が入っていないと…上のように表示されます。
かなり見にくい！

osaboo

HTMLを編集する

上のHTMLコードをわかりやすいように改行すると以下のようになります。

<tr></tr>が行セルのコードで、間に挟まれる<td></td>列セルのコードです。

<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody>

<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>

</tbody></table></figure>

1行のコードを抜粋すると以下になります。

<tr><td></td><td></td><td></td><td></td></tr>

1つの行に4個のセルがあることがわかると思います。

それでは、（横列）3つのセル<td></td>を結合させるコードに変更します。

結合するセル左端の<td>タグに colspan="3"を追加します。（右側の3列のセルが結合されます）
- colspan="3"は、列3個のセルを結合する命令分です。（数字は結合する数を表します）
- 右側2個のセル<td></td>を削除します。（不要なセルを削除します）

列：3個のセルを結合

<tr><td></td><td colspan="3"></td></tr>

続いて、（縦行）3つのセル<td></td>を結合させるコードに変更します。

結合するセル最上部の<td>タグに rowspan="3"を追加します。（下側の3行のセルが結合されます）
- rowspan="3"は、行3個のセルを結合する命令分です。（数字は結合する数を表します）
- rowspan="3"を入力した<td>タグの位置で、その下側のセルが結合されます。
- 下側2個のセル<td></td>を削除します。（不要な列セルを削除します）

行：3個のセルを結合（4列目を結合）

<tr><td></td><td></td><td></td><td rowspan="3"></td></tr>

完成すると以下のコードになります。

<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody>

<tr><td></td><td colspan="3"></td></tr>
<tr><td></td><td></td><td></td><td rowspan="3"></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>

</tbody></table></figure>

セル結合前後のコードを確認してみましょう。

今回のサンプルをHTMLとして表示すると、以下のようになります。（文字は未入力・デフォルトの状態）

見やすくするために改行を加えると、HTMLは以下のような形になります。

テーブルブロックのHTMLに改行を加えて見やすく整えたコードを、セル結合前と結合後で比較した表示例

セル結合手順のおさらい

テーブルブロックをHTML表示に切り替える
HTMLを編集する
- セル結合の列→ colspan="3"を<td>タグに追加して不要な<td>タグを削除する
- セル結合の行→ rowspan="3"を<td>タグに追加して不要な<td>タグを削除する
確認して完了

セル結合時の注意点（表が崩れないために）

AFFINGER6のテーブルブロックでセル結合を行う際は、いくつか注意しないと表示崩れや編集ミスが起きやすくなります。

colspan・rowspanの数は必ず揃える

colspan や rowspan で指定する数字は、元の行・列数と整合性が取れている必要があります。

例えば…

3列の表で colspan="4" を指定する
rowspanで結合した分のセルを削除し忘れる

こうした状態になると、表のレイアウトが崩れます。

👉 結合後の列数・行数を必ず意識するのがポイントです。

結合後にセルを追加・削除すると崩れやすい

セル結合を行ったあとに…

行を追加する
列を削除する

といった操作をすると、rowspan・colspanのバランスが崩れやすくなります。

表の構成が固まってからセル結合を行うと、修正の手間を減らせます。

HTML編集はコピーを取ってから行うと安心

HTML編集に慣れていない場合は、編集前にテーブル部分のHTMLをコピーしておくのがおすすめです。

万が一崩れても、すぐ元に戻せるので安心して作業できます。

見出し行・見出し列を活用する

比較表や一覧表では、見出し行・見出し列を設定するだけで可読性が大きく向上します。

項目名がひと目で分かる
スマホでも内容を追いやすい

AFFINGER6では、テーブル設定から簡単に指定できます。

セル結合は最小限にする

セル結合を多用すると、スマホ表示で見づらくなることがあります。

見出しをまとめたいときだけ使う
1行・1列ずつ意味を持たせる

この意識だけで、表の使いやすさがかなり変わります。

複雑な表はプラグインも検討する

HTML編集が頻繁に必要な場合は、Flexible Table Block などのプラグインを使うのも一つの方法です。

クリック操作でセル結合ができる
表の装飾や調整が簡単

「毎回HTMLを触るのが大変…」という方には特におすすめです。

Flexible Table Block については、こちらの記事で詳しく解説しています。あわせてご覧ください。

: Flexible Table Blockの導入と使い方【WordPressプラグイン】#AFFINGER6

WordPressで表をカンタンに作れるプラグイン「Flexible Table Block」の導入手順と使い方を初心者さん向けにやさしく解説。AFFINGER6でも使えて便利です！

まとめ！AFFINGER6のテーブルブロック編集は「仕組み」を知れば怖くない

AFFINGER6のテーブルブロックは、基本的な表作成であれば直感的に使えますが、セル結合などの細かい編集にはHTML編集が必要になります。

とはいえ、ポイントさえ押さえれば難しい作業ではありません。

横方向の結合は colspan
縦方向の結合は rowspan
結合後は不要な <td> を削除する
表の構成が固まってからセル結合を行う

これらを意識するだけで、表の崩れを防ぎながら編集できます。

また、セル結合を頻繁に使う場合や、複雑な比較表を作りたい場合は、テーブル専用プラグインを活用するのも有効です。

AFFINGER6のテーブルブロックをうまく使いこなせば、記事の情報整理や比較がしやすくなり、読者にとって理解しやすいコンテンツに仕上がります。

ぜひ今回の手順を参考に、表の編集にチャレンジしてみてください。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／