テーブル（表）を作成

ここでは、テーブル（表）の作成方法を解説します。すっきりと見やすいページのコンテンツ整理にお役立てください。

 

1. テーブル（表）設定画面を開く

テーブルを挿入したい位置にカーソルを移動させ「新規テーブル挿入」をクリックします。

 

 

テーブルの挿入は「新規テーブルの挿入」から行います。

 

 

 

2. テーブルの全般プロパティを設定する

テーブルの基本設定を「表の挿入/編集」－「全般プロパティ」から行います。

 

「表の挿入/編集」－「全般プロパティ」の設定パネル

 

表の挿入/編集のプロパティ
列数	テーブルに配置する列（コラム）数です。
行数	テーブルに配置する行数です。
セル内部余白	セルの内部、テキストやイメージまでの余白です。
セル余白	セルの外部の余白です。

 

 

位置	テーブルを「左」「中央」「右」に配置します。
線	テーブルの枠線の幅を設定します。※ここでは「0」または未設定にします。
幅	テーブルの幅をピクセル（px）、パーセンテージ（%）で設定します。
高さ	テーブルの高さを設定します。通常は未設定にします。
クラス	テーブルにスタイルシートのクラスを設定します。通常は未設定にします。
表題	テーブルの表題（キャプション）を記入します。

 

「全般プロパティ」の設定が終わったら「挿入」をクリックします。テーブルの枠組みがエディタ画面に挿入されます。

 

 

 

3. テーブル（表）コンテンツを入力する

テーブル内の各セルに表のコンテンツを入力します。

 

 

 

4. テーブルの高度プロパティを設定する

テーブルの編集は「テーブルのプロパティ」から行います。テーブルの編集を行うにはテーブル内のセルにカーソルを移動させ「テーブルのプロパティ」アイコンを有効（選択できる状態）にしてください。

 

 

「表の挿入/編集画面」で「高度」タブをクリックして「高度プロパティ」を表示します。

 

「表の挿入/編集」－「高度プロパティ」の設定パネル

 

 

5. 表に背景色をつける（テーブルの枠線の色）

設定パネルの「背景色」右側のスペース内に直接カラーコードを書き込むか、または「参照」をクリックして背景色を設定します。ここで設定する色がテーブルの枠線の色になります。

 

以下は「参照」をクリックした場合の「色の選択」方法です。

 

1.「カラーピッカー」から色を選択する方法

カラーピッカーにマウスポインタを重ね、任意の色を選択します。

 

 

2.「カラーパレット」から色を選択する方法

表示されているカラーパレットから任意の色を選択します。

 

 

3.「色の名前」から色を選択する方法

カラーの一覧にマウスを重ねるとカラーの名前が表示されます。任意の色を選択します。

 

 

4.「テンプレート」から色を選択する方法

表示されたテンプレートカラーから任意の色を選択してください。

 

 

背景色が選択されると、このようにテーブル（表）の背景に色が配置されます。

 

 

 

6. 行を編集する

行の編集は「行のプロパティ」から行います。行の編集を行うにはテーブル内の任意の行にあるセルにカーソルを移動させ「行のプロパティ」アイコンを有効（選択できる状態）にしてください。

 

 

「行のプロパティ」－「全般プロパティ」の設定パネル

 

 

「行のプロパティ」－「高度プロパティ」の設定パネル

 

1. 選択した行のテキスト位置を編集する

「行プロパティ」－「全般プロパティ」設定パネルの「位置」のプルダウンメニューから、その行に属するセル内のテキスト（イメージ）を配置したい位置を「中央/左/右」から選択して「更新」をクリックしてください。

 

以下は「セルのプロパティ」－「全般プロパティ」で最上部の行に「位置－中央」を選択した例です。最上部の行内のテキスト（イメージ）がセンタリングされます。

 

 

2. 行に背景色をつける

「行のプロパティ」－「高度プロパティ」の設定パネルの「背景色」右側のスペースに直接カラーコードを書き込むか、または「参照」から背景色を選択します。

 

「参照」から色を選択する方法は、上記「表に背景色をつける」をご覧ください。

 

 

行の背景には、色だけではなくイメージ（画像）を配置することもできます。イメージを配置する場合は「行のプロパティ」－「高度プロパティ」の設定パネルの「背景イメージ」から任意のイメージを選択して配置します。

 

 

7. セルを編集する

セルの編集は「セルのプロパティ」から行います。セルの編集を行うにはテーブル内の任意のセルにカーソルを移動させ「セルのプロパティ」アイコンを有効（選択できる状態）にしてください。

 

 

「セルのプロパティ」－「全般プロパティ」の設定パネル

 

「セルのプロパティ」－「高度なプロパティ」の設定パネル

 

1. 選択したセルのテキスト位置を編集する

「セルプロパティ」－「全般プロパティ」設定パネルの「位置」のプルダウンメニューから、選択したセルのテキスト（イメージ）を配置したい位置を「中央/左/右」から選択して「更新」をクリックします。

 

下表は「セルのプロパティ」－「全般プロパティ」で「コンテンツ4」のセルに「位置－中央」を選択した例です。セルのテキスト（イメージ）がセンタリングされます。

 

 

2. 選択したセルの幅（高さ）を編集する

「セルプロパティ」－「全般プロパティ」設定パネルの「幅（高さ）」にピクセル（px）または、パーセンテージ（%）でセルの幅（高さ）を設定して「更新」をクリックします。

 

下表は「セルのプロパティ」－「全般プロパティ」でセルに幅200pxを設定した例です。セルの幅が200pxに設定されました。「高さ」の設定も同様の要領で行います。

 

 

3. 選択したセルに背景色をつける

「セルのプロパティ」－「高度なプロパティ」設定パネルの「背景色」右側のスペースに直接カラーコードを書き込むか、または「参照」から背景色を選択します。

 

「参照」から色を選択する方法は、上記「表に背景色をつける」をご覧ください。

 

 

 

8. コラム/セルを結合する

セルの結合は「セルを結合」から行います。セルの結合は選択したセルと、その右部、または下部にある1つ、または複数のセルと結合させることができます。

 

 

下図は「コンテンツ4」のセルを、その右部の「コンテンツ5」のセルと結合させる方法です。

 

1）「コンテンツ4」にカーソルを移動してアイコンの「セルを結合」をクリックします。

 

2）選択したセルを含めて結合する「列」の数を入力し「更新」をクリックします。

 

 

「コンテンツ4」と「コンテンツ5」のセルが結合されます。同様の要領で選択したセルと、その下部に位置する「行」を結合することができます。

 

 

結合したセルを解除する

結合したセルを解除する場合は、結合したセルにカーソルを移動、セルを選択してアイコンの「結合したセルを分割」をクリックすれば初期状態に戻ります。

 

 

 

9. テーブル（表）の作成例

この項目で解説した操作方法を上手に使うことによって、下のような複雑な構造のテーブルも簡単に作成することができます。すっきりとしたコンテンツ整理にお役立てください。

 

表のタイトル

ヘッダー1	ヘッダー1	ヘッダー1
コンテンツ1/コンテンツ2/コンテンツ3の結合
コンテンツ4	コンテンツ5	コンテンツ6コンテンツ9
コンテンツ7	コンテンツ8