WordPressで表のセルを結合する方法【HTML/プラグイン】

当サイトはアフィリエイト広告を利用しています。

今回は、WordPressで表のセルを結合する方法をご紹介します。

WordPress標準のテーブルブロックではセルの結合はできませんが、今回ご紹介する方法なら自由にセルを結合できます。

セルを結合できなくてお困りの方はぜひ参考にしてみてくださいね。

目次非表示

WordPressで表のセルを結合する方法
- 方法1：カスタムHTMLブロックでHTMLタグを直打ちする
- 方法2：プラグイン「Flexible Table Block」を使う
複雑な表は画像で作ってしまうのもアリ！表を画像化する方法
まとめ

目次へ

WordPressで表のセルを結合する方法

WordPressで表のセルを結合する方法は以下のとおりです。

カスタムHTMLブロックでHTMLタグを直打ちする
プラグイン「Flexible Table Block」を使う

方法1：カスタムHTMLブロックでHTMLタグを直打ちする

1つ目は、カスタムHTMLブロックにHTMLタグを直打ちする方法です。

セルを結合するには、結合したいthタグまたはtdタグにcolspan="結合したいセルの数"またはrowspan="結合したいセルの数"を入力します。横に結合したい場合は「colspan」、縦に結合したい場合は「rowspan」を使います。

<table>
<thead><tr><th>見出し</th><th>見出し</th><th>見出し</th></tr></thead>
<tbody>
<tr><td>内容</td><td colspan="2">内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td></tr>
</tbody>
</table>

<table>
<thead><tr><th>見出し</th><th>見出し</th><th>見出し</th></tr></thead>
<tbody>
<tr><td>内容</td><td rowspan="2">内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td></tr>
</tbody>
</table>

どこにcolspanやrowspanを入れたらいいかわからない場合は、「Table Tag Generator」というtableタグの自動生成ツールを活用しましょう。

こちらのツールでは、表の行数・列数を指定し、結合したいセルをドラッグで選択して「結合」をクリックすると、「HTML」の部分にtableタグが自動生成されます。あとは自動生成されたtableタグをカスタムHTMLブロックにコピペすればOKです。