テーブルブロックのセルを結合
WordPressのテーブルブロック
WordPressのテーブルブロックで、簡単に表を作れます。プラグインを利用せず、テーブルブロックでセルを結合する手順を記載します。
プラグインを過去に使用していて、プラグインを削除した場合
“〇〇” ブロックはサイトでサポートされていません。ブロックをインストールするか、カスタム HTML ブロックへ変換するか、または完全に削除してください。
というエラーが表示されます。
できる限りプラグインを利用しない方が良いかと思います。
横のセルとの結合
縦のセルとの結合
テーブルブロックのセルを結合するコード WordPress
プラグインを利用せず、セルを結合する手順です。
次のコードを入力するだけ
コードを入力すると、次のようになる
削除するコード/テーブルブロックのセルを結合
2つのセルを結合した場合、不要となる1つのセルを削除します。
セルに不要と書いておくとわかりやすいです。
詳しくは下の手順をご参考ください。
WordPressのテーブルブロックで横のセルを結合する手順
結合して不要となるセルに「不要」と記載しておくとわかりやすい
まず表を作る
- 「+」でテーブルブロックを追加する
- 行数と列を入力し表を作る
表の横のセルを結合する（平日のセルを結合する場合）
- セルを結合し不要になるセルに「不要」と入力
- 三点アイコン（オプション）→「HTMLとして編集」
- 結合する平日の前の
<td>にcolspan="2"を追加し<td colspan="2">にする <td>不要</td>を削除する- ビジュアル編集に戻し確認する
三点アイコン（オプション）→「HTMLとして編集」
colspan="2"を追加し、不要を削除
横のセルを結合した場合のコード
<td colspan="2">~</td> WordPressのテーブルブロックで縦のセルを結合する手順
結合して不要となるセルに「不要」と記載しておくとわかりやすい。
表の横のセルを結合する（平日のセルを結合する場合）
- セルを結合し不要になるセルに「不要」と入力
- 三点アイコン（オプション）→「HTMLとして編集」
- 結合する平日の前の
<td>にrowspan="2"<tdにするrowspan="2" <td>不要</td>を削除する- ビジュアル編集に戻し確認する
rowspan="2"
縦のセルを結合した場合のコード
<td rowspan="2">～</td> ヘッダーの横のセルを結合する
まずヘッダー付きの表を作る
- 「+」でテーブルブロックを追加する
- 行数と列を入力し表を作る
- 「設定」→「ブロック」→「設定」へ
- ヘッダーをONにする
ヘッダーの横のセルを結合するセルを結合する（平日のセルを結合する場合）
- セルを結合し不要になるセルに「不要」と入力
- 三点アイコン（オプション）→「HTMLとして編集」
- 結合する平日の前の
<th>にcolspan="2"を追加し<td colspan="2">にする <th>不要</th>を削除する- ビジュアル編集に戻し確認する
colspan="2"を追加し、不要を削除
ヘッダーの横のセルを結合した場合のコード
<th colspan="2">～</th> ヘッダーの縦のセルを結合する/テーブルブロック
ヘッダーの縦のセルを結合する（平日のセルを結合する場合）
- セルを結合し不要になるセルに「不要」と入力
- 三点アイコン（オプション）→「HTMLとして編集」
- 結合する平日の前の
<th>にrowspan="2"<tdにするrowspan="2" <th>不要</th>を削除する- ビジュアル編集に戻し確認する
rowspan="2"
ヘッダーの縦のセルを結合した場合のコード
<th rowspan="2">～</th>ヘッダーの行を増やす手順
上記のようにヘッダーの行を増やすには、ヘッダーを選択し、通常の行を挿入する手順と同じく、「行を上に挿入」または「行を下に挿入」で増やすことができます。
表の枠線・スタイルの変更【TablePress ブロックエディッタ】
TablePress 特徴と使い方 WP
プラグイン TablePress はソートができるので便利です。TablePress の使い方は下のリンクをご参考ください。
テーブルブロックについて→WordPress フォーラム
