テーブルセルの結合

テーブルセルの結合

テーブルのセルの結合について確認してみる。ブロックエディタのデフォルトのテーブルではセルの結合はできなかったと思う。MCEなどの高度なプラグインを使えば、簡単にできるが、できればプラグインは使いたくない。カスタムHTMLやクラシックブロックなどを使えばどの程度までできるかを確認してみる。

ブロックエディタ標準装備のテーブル

4×2の表セル幅を固定○ヘッダーセクション×フッターセクション×
テキスト×背景×結合テスト
キャプションはテーブルの下にある。

htmlとして編集し、colspan=2 とすると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示され、「ブロックとしてリカバリを試行」しなくてはならない。「解決」を選ぶとTDが一つ削除された状態のひょうになる。「解決」の他に、「HTMLに変換」又は「クラシックブロックに変換」する選択肢があるようだ。

カスタムHTMLでテーブル

4×2の表セル幅を固定○ヘッダーセクション×フッターセクション×
テキスト×背景×結合テスト

リカバリで、「HTMLに変換」を選択してみた。colspan=2は削除されず、セルの結合ができている。class=”has-fixed-layout”のスタイルは効いていない。外側のfigure class=”wp-block-table”を外した所為もあるかも知れないが、元々エディタ内でもスタイルが効いていなかった。

あと、プレビューしないとビジュアルにならず、編集開始時はHTML表示のままになるようだ。

クラシックブロックでテーブル

4×2の表 セル幅を固定○ ヘッダーセクション× フッターセクション×
テキスト×背景× 結合テスト  
キャプションはテーブルの下にある。

リカバリで、「クラシックブロックに変換」を選択してみた。これもセルは結合できた。編集開始時もテーブルとして表示されている。プラグイン無しなら、クラシックブロックがベストかも知れない。

掲載日時: 2022年5月30日(月) 13:32