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>
ヘッダーの行を増やす手順
上記のようにヘッダーの行を増やすには、ヘッダーを選択し、通常の行を挿入する手順と同じく、「行を上に挿入」または「行を下に挿入」で増やすことができます。