WEBサイトへの表の挿入方法と編集方法について

2019.05.20

会社概要や商品の仕様など、情報やデータの関係性をわかりやすく配置したい時に使用するのが表（テーブル）です。
Rabbity-CMSでは、簡単な操作で表の挿入や編集ができます。
本記事では表の挿入方法と編集方法について詳しく解説していきます。

表組系コンテンツパーツを使用した表の挿入方法

表組系のコンテンツパーツを使用すると簡単に表を挿入することができます。

1.コンテンツパーツを挿入したい箇所でコンテンツパーツパネルを表示して「パーツの追加」をクリックします。

「パーツの追加」は、右クリックで表示されるショートカットメニューからも選択できます。
操作方法の詳細は「選ぶだけで見出しや画像が簡単にレイアウトできるコンテンツパーツについて」をご覧ください。

2.表組系タブから追加したいコンテンツパーツをクリックします。

3.ページに表が挿入されます。

フルエディタ編集を使用した表の挿入方法

画像系のコンテンツパーツを使用しなくてもフルエディタ編集機能を使用して表を挿入することが可能です。
行数・列数を指定して表を追加したい時などに便利です。

1.メインコンテンツ領域やフリーパーツ上で右クリックして、フルエディタ編集を選択します。

2.表を挿入したい箇所にカーソルを置き、エディタツールバーの「テーブル挿入/編集」（）をクリックします。

表を挿入したい箇所には、テキスト系のコンテンツパーツ（またはテキストが組み合わされたパーツ）を挿入しておくと、挿入された表のダイレクト編集も可能になるので便利です。

3.テーブルプロパティダイアログで表の行数や列数、ヘッダーの種類などを設定します。

テーブルプロパティダイアログの全般タブ

項目	説明
行	表の行数を設定します。 ※表の挿入後は、テーブルプロパティダイアログでの設定変更ができなくなります。挿入後の行数の変更については下記の「表の編集方法」をご覧ください。
列	表の列数を設定します。 ※表の挿入後は、テーブルプロパティダイアログでの設定変更ができなくなります。挿入後の列数の変更については下記の「表の編集方法」をご覧ください。
Headers	見出しセルの種類を設定します。 None：見出しセルなしの表になります。 First row：1行目が見出しセルの表になります。 First column：左から1列目が見出しセルの表になります。 Both：1行目と1列目が見出しセルの表になります。
ボーダーサイズ	表の枠線のサイズを設定します。値を0にすると枠線なしとなります（編集画面では薄いグレーで表示されます）。
キャプションの整列	表にキャプションをつける場合に、そのキャプションの横位置を設定します。選択項目：なし、左、中央、右
キャプション	表にキャプションをつける場合は、ここにキャプション名を入力します（キャプションは表の上につきます）。
テーブル幅	表の幅を設定します。選択単位：ピクセル、パーセント
テーブル高さ	表の高さを設定します。
セル内余白	セルの内側の文字と枠線の間の余白を設定します。
セル内間隔	セルとセルの間隔を設定します。

テーブルプロパティダイアログの高度な設定タブ

表にidを設定するなど、より高度な設定が可能です。
※表の挿入後のテーブルプロパティの設定は、表の上を右クリックして表示されるショートカットメニューの「テーブルプロパティ」から可能です。

4.[OK]ボタンをクリックすると表が挿入されます。

挿入された表は、この段階で編集が可能になります。

5.フルエディタ編集機能の[保存]ボタンを押して作業を完了します。

挿入した表は、フルエディタ編集機能でもダイレクト編集機能でも編集することが可能です（挿入位置によってはダイレクト編集機能が使用できない場合があります）。

表の編集方法

挿入後の表は、ダイレクト編集機能またはフルエディタ編集機能で編集が可能です。
また表の上で右クリックして表示されるショートカットメニューを使用することで細かい設定や編集が可能です。

行の挿入・削除方法

ショートカットメニューの「行」で行の挿入や削除ができます。

項目	説明
行の上に挿入	カーソルを置いている行の上に新しい行を1行挿入します。
行の下に挿入	カーソルを置いている行の下に新しい行を1行挿入します。
行削除	カーソルを置いている行を削除します。

列の挿入・削除方法

ショートカットメニューの「列」で列の挿入や削除ができます。

項目	説明
列の前に挿入	カーソルを置いている列の前（左側）に新しい列を1列挿入します。
列の後に挿入	カーソルを置いている列の後（右側）に新しい列を1列挿入します。
列削除	カーソルを置いている列を削除します。

セルの編集方法

ショートカットメニューの「セル」でセルの結合や分割ができます。

項目	説明
右に結合	カーソルを置いているセルとその右側のセルを結合します。右側にセルがない場合は使用できません。
下に結合	カーソルを置いているセルとその下のセルを結合します。下にセルがない場合は使用できません。
セルを水平方向分割	カーソルを置いているセルを2列に分割します。
セルを垂直方向分割	カーソルを置いているセルを2行に分割します。

セルの詳細設定方法

ショートカットメニューの「セル」→「セルプロパティ」でセルの詳細設定ができます。

イメージ情報タブ

項目	説明
幅	セルの幅を設定します。選択単位：ピクセル、パーセント
高さ	セルの高さを設定します。
折り返し	セル内での文章の自動改行を設定します。
セル横の整列	セル内の文字の横位置を設定します。選択項目：なし、左、中央、右
セル縦の整列	セル内の文字の縦位置を設定します。選択項目：なし、上、中央、下、ベースライン
Cell Type	セルのタイプを選択します。「Deta」を選択すると通常（td）のセルになり、「Header」を選択すると見出し（th）セルになります。
縦幅（行数）	セルの縦幅を入力した行数分下へ増やします。下にあったセルは右の列に移動します。
横幅（列数）	セルの横幅を入力した列数分右へ増やします。右にあったセルはさらに右へ移動します。
背景色	セルの背景に色を設定します（未設定の場合は透明です）。 [選択...]ボタンをクリックすると色選択ダイアログが表示され、任意のカラーパッチを選択できます。
ボーダーカラー	セルに枠線を設定します。ただし、テーブルプロパティの設定でボーダーサイズを「0」にしている場合は効果がありません。 [選択...]ボタンをクリックすると色選択ダイアログが表示され、任意のカラーパッチを選択できます。

高度な設定タブ

セルにidやスタイルを設定するなど、より高度な設定が可能です。

表の削除方法

ショートカットメニューの「テーブル削除」をクリックすると表が削除されます。
※クリックすると確認画面なしに即削除となるのでご注意ください。

ページの先頭へ

ブログ