マニュアルキャンセル

テーブルを使用したコンテンツの表示

検索

最終更新日 : 2021年4月28日

テーブルを使用して Web サイトにコンテンツを表示する方法について説明します。また、テーブルを分割、マージする方法、表データの読み込み、書き出し方法についても説明します。

テーブルは、表データを表示したり、HTML ページ上にテキストやグラフィックを配置するのに非常に便利です。テーブルは 1 つまたは複数の行で構成され、各行は 1 つまたは複数のセルで構成されます。通常 HTML コードでは列を明示的に指定しませんが、Dreamweaver では行やセルと同様に列を操作できます。

テーブルが選択されている場合または挿入ポイントがテーブル内にある場合は、Dreamweaver によりテーブルの幅と各テーブル列の列幅が表示されます。幅の横にテーブルヘッダーメニューと列ヘッダーメニューの矢印が表示されます。これらのメニューを使用すると、テーブル関連の使用頻度の高いコマンドに素早くアクセスできます。幅とメニューは表示と非表示を切り替えられます。

テーブルヘッダーメニューにテーブルまたは列の幅が表示されない場合、そのテーブルまたは列には HTML コードで指定された幅がありません。2 つの数字が表示される場合は、デザインビューに表示される表示幅と HTML コードに指定された幅が一致していません。これは、テーブルの右下隅をドラッグしてテーブルのサイズを変更するか、設定されている幅よりも大きいコンテンツをセルに追加した場合に発生します。

例えば、200 ピクセルの幅に設定された列に対して、幅を 250 ピクセルに拡張するコンテンツを追加すると、その列に対して 2 つの数字が表示されます。この例の場合であれば 200（コードに指定されている幅）とカッコで囲まれた「(250)」という数値（画面上に表示される列の表示幅）が示されます。

注意：

さらに、CSS 位置指定を使用したページレイアウトも可能です。

HTML でのテーブルフォーマットの優先順位

デザインビューでテーブルをフォーマットしている場合は、テーブル全体、または選択した行、列、セルのそれぞれに対してプロパティを設定することができます。背景色や整列などのプロパティを、テーブル全体についてある値に設定し、個別のセルついては別の値に設定した場合、セルフォーマットは行フォーマットよりも優先され、行フォーマットはテーブルフォーマットより優先されます。

つまり、テーブルフォーマットの優先順位は次のようになります。

セル
行
テーブル

例えば、1 つのセルの背景色を青色に設定し、テーブル全体の背景色を黄色に設定した場合は、セルフォーマットがテーブルフォーマットより優先されるので、青色のセルは黄色に変わりません。

注意：

Dreamweaver では、列のプロパティを設定すると、設定内容に応じて列内の各セルに対応する td タグの属性が変更されます。

テーブルセルの分割とマージについて

一列に並んだセルまたは四角形の形に並んだセルであれば、任意の数の隣接するセルをマージして、複数の列と行にわたる単一セルを作成することができます。以前にマージされているかどうかにかかわらず、セルは任意の数の行または列に分割できます。Dreamweaver は、必要な colspan 属性または rowspan 属性を追加してテーブルを自動的に再構成することにより、指定された配置を作成します。

以下の例では、最初の 2 行の中央にあるセルが、2 行にまたがる単一セルとしてマージされています。

テーブルの挿入とコンテンツの追加

新規のテーブルを作成するには挿入パネルまたは挿入メニューを使用します。次に、テーブルセルにテキストおよびイメージを追加します。操作方法は、テーブルの外部にテキストやイメージを追加する場合と同じです。

テーブルを表示する位置に挿入ポイントを配置します。

注意：

ドキュメントが空白の場合は、ドキュメントの先頭にしか挿入ポイントを配置できません。
- 挿入／テーブルを選択します。
- 挿入パネルの「HTML」カテゴリーで、「テーブル」をクリックします。
テーブルダイアログボックスで以下の属性を設定し、「OK」をクリックしてテーブルを作成します。

テーブルの作成

行

テーブルの行数を指定します。

列

テーブルの列数を指定します。

テーブルの幅

テーブル幅をピクセル値で指定するか、またはブラウザーウィンドウの幅に対する割合で指定します。

ボーダーの太さ

テーブルのボーダー幅をピクセル値で指定します。

セル内間隔

隣接するテーブルセルの間隔をピクセル単位で指定します。

注意：

ボーダーの太さやセルの余白と間隔を明示的に指定しなければ、一般的なブラウザーでは、ボーダーとセル内余白が 1、セル内間隔が 2 に設定されているものとしてテーブルが表示されます。テーブルのボーダー、余白、間隔を表示しないようにするには、「セル内余白」および「セル内間隔」を 0 に設定してください。

セル内余白

セルのボーダーとコンテンツの間のピクセル数を指定します。

なし

テーブルの列見出しまたは行見出しが使用できなくなります。

左

テーブルの最初の列が見出し列になり、テーブルの各行に対する見出しを入力できるようになります。

上

テーブルの最初の行が見出し行になり、テーブルの各列に対する見出しを入力できるようになります。

両方

テーブル内に列見出しと行見出しの両方を入力できます。

注意：

Web サイトのビジターがスクリーンリーダーを使用する場合に備えて、ヘッダーを使用することをお勧めします。スクリーンリーダーがテーブルの見出しを読み上げることで、スクリーンリーダーのユーザーはテーブル情報を知ることができます。

キャプション

テーブル外に表示されるテーブルのタイトルを指定します。

サマリー

テーブルの説明を指定します。スクリーンリーダーはサマリーテキストを読み上げますが、このテキストはユーザーのブラウザーには表示されません。

テーブルの読み込みと書き出し

他のアプリケーション（Microsoft Excel など）で作成され、区切り記号付きテキストフォーマット（項目がタブ、カンマ、コロン、またはセミコロンで区切られている形式）で保存された表形式のデータを Dreamweaver に読み込んで、テーブルとしてフォーマットできます。

さらに、テーブル内のデータを、Dreamweaver からテキストファイルに書き出すこともできます。このとき、隣接するセルのコンテンツは区切り記号で区切られます。使用できる区切り記号は、カンマ、コロン、セミコロン、スペースです。テーブルを書き出す場合、テーブル全体が書き出されます。テーブルの一部を選択して書き出すことはできません。

注意：

テーブルの中の一部のデータのみ（最初の 6 行や最初の 6 列など）が必要な場合は、そのデータを含むセルをコピーし、テーブルの外にペーストして新規テーブルを作成してから、その新規テーブルを書き出します。

テーブルデータの読み込み

ファイル／読み込み／表データの読み込みを選択します。
表データの以下のオプションを指定して「OK」をクリックします。

データファイル

読み込むファイルの名前を指定します。「参照」ボタンをクリックしてファイルを選択します。

区切り

読み込むファイルで使われている区切り文字を指定します。

「その他」を選択すると、テキストボックスがポップアップメニューの右側に表示されます。ここに、ファイルで使用する区切り文字を入力します。

注意：

データファイルの保存時に使用された区切り文字を指定してください。区切り文字を正確に指定しないと、ファイルが適切に読み込まれず、データがテーブル内で正しくフォーマットされません。
テーブルの幅
テーブルの幅を指定します。
- 列内で最も長いテキストストリングが収まる幅の列を作成するには、「データに適合」を選択します。
- ピクセル単位またはブラウザーウィンドウの幅に対する割合でテーブル幅を固定値で指定するには、「設定」を選択します。
ボーダー

テーブルのボーダー幅をピクセル値で指定します。

セル内余白

セルのコンテンツとボーダーの間隔をピクセル単位で指定します。

セル内間隔

隣接するテーブルセルの間隔をピクセル単位で指定します。

注意：

ボーダーの幅やセルの余白と間隔を明示的に指定しなければ、一般的なブラウザーでは、ボーダーとセル内余白が 1、セル内間隔が 2 に設定されているものとしてテーブルが表示されます。テーブルに余白と間隔を表示しないようにするには、「セル内余白」および「セル内間隔」を 0 に設定します。ボーダーを 0 に設定しているときにセルおよびテーブルの境界を見るには、表示／ビジュアルエイド／テーブルボーダーを選択してください。

最上行のフォーマット

必要に応じて、テーブルの最上行に適用するフォーマットを指定できます。フォーマットなし、ボールド、イタリック、ボールドイタリックの 4 つのフォーマットオプションから選択します。

テーブルの書き出し

テーブル内の任意のセルに挿入ポイントを置きます。
ファイル／書き出し／テーブルを選択します。
次のオプションを指定します。

区切り

書き出すファイル内の項目間を区切るのに使用する区切り文字を指定します。

改行

書き出したファイルを開くオペレーティングシステムを Windows、Mac OS、または UNIX から選択します。オペレーティングシステムが異なれば、テキストの行末を示す方法が異なるからです。
「書き出し」をクリックします。
ファイル名を入力して「保存」をクリックします。

テーブルエレメントの選択

一度にテーブル全体、行、または列を選択できます。個別のセルを選択することもできます。

テーブル、行、列、またはセル上にポインターを置くと、Dreamweaver により選択範囲に含まれるすべてのセルがハイライト表示されるため、選択対象となるセルを確認できます。これは、ボーダーのないテーブル、複数の列や行にまたがったセル、またはネストされたテーブルを取り扱う場合に役に立ちます。ハイライトカラーは環境設定で変更できます。

注意：

ポインターをテーブルのボーダー上に置き、Ctrl キー（Windows）または Command キー（Mac OS）を押したままにすると、テーブルの構造全体、つまりテーブル内のすべてのセルがハイライト表示されます。これは、テーブルがネストされている場合に、その中の特定のテーブルの構造を表示するのに役立ちます。

テーブル全体の選択

以下のいずれかの操作を行って、テーブルを選択します。

テーブルの左上隅をクリックし、テーブルを選択します。
テーブルセル内でクリックし、ドキュメントウィンドウの左下隅にあるタグセレクターでタグを選択します。
テーブルセル内でクリックし、テーブルのヘッダーメニューをクリックし、「テーブル選択」を選択します。選択ハンドルが、選択したテーブルの下端および右端に表示されます。
テーブルセル内でクリックして、編集／テーブル／テーブル選択を選択します。

個別あるいは複数の行または列の選択

ポインターを行の左端または列の上端部分に移動します。
ポインターが選択矢印に変わったら、クリックして行または列を選択するか、またはドラッグして複数の行または列を選択します。

行の選択

1 つの列の選択

列内をクリックします。
列ヘッダーメニューをクリックし、「列を選択」を選択します。

1 つのセルの選択

次のいずれかの操作を実行します。
- テーブルセル内でクリックし、ドキュメントウィンドウの左下隅にあるタグセレクターで <td> タグを選択します。
- Ctrl キー（Windows）または Command キー（Mac OS）を押しながらセル内をクリックします。

一列または四角形に並んだセルの選択

次のいずれかの操作を実行します。

あるセルから別のセルまでドラッグします。
セルを 1 つクリックし、そのセル内で Ctrl キーを押しながらクリック（Windows）または Command キーを押しながらクリック（Mac OS）して選択します。次に Shift キーを押しながら別のセルをクリックします。

連続しない複数のセルの選択

Ctrl キー（Windows）または Command キー（Mac OS）を押しながら、選択するセル、行、または列をクリックします。

まだ選択されていないセル、行、または列を Ctrl キーまたは Command キーを押しながらクリックすると、選択範囲に追加されます。既に選択されている場合は、選択が解除されます。

テーブルエレメントのハイライトカラーの変更

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリリストで「ハイライト」を選択し、以下のいずれかの変更を行って「OK」をクリックします。
- テーブルエレメントのハイライトカラーを変更するには、「マウスオーバー」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。
- テーブルエレメントのハイライト表示のオン/オフを切り替えるには、「マウスオーバー」の「表示」オプションをオンまたはオフにします。
注意：

これらのオプションは、ポインターを移動したときに、Dreamweaver によってハイライト表示されるすべてのオブジェクトに影響します。

テーブルのプロパティの設定

プロパティインスペクターを使用して、テーブルを編集することもできます。

テーブルを選択します。
プロパティインスペクター（ウィンドウ／プロパティ）で、必要に応じてプロパティを変更します。

テーブルプロパティ

テーブル ID

テーブル ID を指定します。

「行」と「列」

テーブルの行数と列数を指定します。

W

ピクセル単位のテーブル幅、またはブラウザーウィンドウの幅に対する割合です。

注意：

通常は、テーブルの高さを設定する必要はありません。

セル余白

セルのコンテンツとボーダーの間隔をピクセル単位で指定します。

セル間隔

隣接するテーブルセルの間隔をピクセル単位で指定します。

行揃え

同じ段落内にあるテキストやイメージなどのエレメントに対するテーブルの相対的な位置を指定します。

「左」を選択すると、テーブルは他のエレメントの左に配置されます（同じ段落内にあるテキストはテーブルの右側で折り返します）。「右」を指定すると、テーブルは他のエレメントの右に配置されます（テキストはテーブルの左で折り返します）。「中央」を指定すると、テーブルは中央に配置されます（テキストはテーブルの上または下、あるいはその両方に表示されます）。「指定なし」を選択すると、ブラウザーの初期設定の行揃えが適用されます。

注意：

行揃えが「指定なし」に設定されると、他のコンテンツはテーブルの隣に表示されません。テーブルが他のコンテンツの隣に並ぶように表示するには、「左」または「右」を選択してください。

ボーダー

テーブルのボーダー幅をピクセル値で指定します。

注意：

ボーダーの幅やセルの余白と間隔を明示的に指定しなければ、一般的なブラウザーでは、ボーダーとセル内余白が 1、セル内間隔が 2 に設定されているものとしてテーブルが表示されます。テーブルに余白と間隔を表示しないようにするには、「ボーダー」、「セル内余白」、および「セル内間隔」を 0 に設定します。ボーダーを 0 に設定しているときにセルおよびテーブルの境界を見るには、表示／ビジュアルエイド／テーブルボーダーを選択してください。

クラス

テーブルの CSS クラスを設定します。

注意：

必要な場合は、テーブルプロパティインスペクターを展開して、次のオプションを表示します。テーブルプロパティインスペクターを展開するには、右下隅にある縮小の三角形をクリックします。

「列幅をクリア」および「行の高さをクリア」

および「行の高さをクリア」を選択すると、明示的に指定されたテーブルの列幅または行の高さがすべて削除されます。

「テーブル幅をピクセルに変換」

および「テーブルの高さをピクセルに変換」では、テーブル内の各列の幅または高さを、ピクセル単位で表した現在の幅または高さに設定します（また、テーブル全体の幅もピクセル単位で表した現在の幅に設定します）。

「幅を％に変換」

および「テーブルの高さを％に変換」では、テーブル内の各列の幅または高さを、ドキュメントウィンドウの幅に対する割合で表した現在の幅または高さに設定します。また、テーブル全体の幅もドキュメントウィンドウの幅に対する割合で表した現在の幅に設定します。

テキストボックスに値を入力したら、Tab キーまたは Enter キー（Windows）、Return キー（Mac OS）を押して値を適用します。

セル、行、列のプロパティの設定

プロパティインスペクターを使用すると、テーブル内のセルや行を編集できます。

列または行を選択します。
プロパティインスペクター（ウィンドウ／プロパティ）で、以下のオプションを設定します。

横

セル、行、または列のコンテンツの横方向の配置を指定します。セルのコンテンツをセルの左、右、中央のいずれかに配置されるように揃えたり、またはブラウザーの初期設定（通常のセルの場合は左配置、ヘッダーセルの場合は中央配置）を使用するように指定できます。

縦

セル、行、または列のコンテンツの縦方向の配置を指定します。コンテンツをセルの上、中央、下、ベースラインのいずれかに配置されるように揃えたり、またはブラウザーの初期設定（通常は中央配置）を使用するように指定することができます。

幅および高さ

選択したセルの幅と高さをピクセル単位、またはテーブル全体の幅または高さに対する割合で指定します。割合で指定するには、値の後にパーセント記号（％）を付けます。ブラウザーの自動調整機能を使って、コンテンツや他の列と行の幅と高さを基に、適切な幅や高さで選択したセルを表示するには、フィールドを空白のままにします（初期設定）。

初期設定では、ブラウザー側で、列内の最も幅の広いイメージまたは最も長い行が収まるように行の高さと列の幅が選択されます。コンテンツを追加した列が、テーブルの他の列よりもはるかに広くなることがあるのはこのためです。

注意：

高さは、テーブル全体の高さに対する割合で指定できますが、ブラウザーでは、指定した割合の高さで行が表示されない場合があります。

背景

カラーピッカーで選択したセル、列、または行の背景色です。

セルのマージ

選択したセル、行、列が 1 つのセルに結合されます。セルをマージできるのは、選択したセルが長方形または一列に並んでいる場合のみです。

セルの分割

セルが複数のセルに分割されます。セルは一度に 1 つしか分割できません。複数のセルを選択した場合、このボタンは使用不可になります。

折り返さない

クリックすると、行の折り返しが禁止され、すべてのテキストが指定されたセル内に 1 行で保持されます。「折り返さない」が有効になっていると、入力したデータ、またはセルにペーストしたデータに応じてセルが拡張します。通常、セルは最も長い語または最も幅広のイメージが収まるように左右方向に拡張された後、他のコンテンツが収まるように必要に応じて上下方向にも拡張されます。

ヘッダー

選択したセルをテーブルヘッダーセルとしてフォーマットします。初期設定では、テーブルヘッダーセルのコンテンツはボールドで、中央に整列されます。

注意：

幅および高さの指定単位にはピクセルまたはパーセントを使用でき、ピクセルからパーセントへ、またはその逆に変換することができます。

注意：

Dreamweaver では、列のプロパティを設定すると、設定内容に応じて列内の各セルに対応する td タグの属性が変更されます。ただし、行に設定するプロパティの種類によっては、Dreamweaver によって tr タグの属性は変更されますが、行内の各 td タグの属性は変更されないことがあります。1 つの行に含まれるすべてのセルに同じフォーマットを適用する場合は、フォーマットを tr タグに適用するほうが、見やすく簡潔な HTML コードを作成できます。
Tab キーか Enter キー（Windows）、または Return キー（Mac OS）を押して値を適用します。

テーブルおよびセルのフォーマット

テーブルの表示を変更するには、テーブルやセルのプロパティを設定するか、または既存のテーブルデザインを適用します。テーブルおよびセルのプロパティを設定する際は、フォーマットの優先順位が、セル、行、テーブルの順番になる点に注意してください。

注意：

テーブルセル内のテキストをフォーマットするには、テーブルの外にあるテキストをフォーマットするときと同じ手順を使用します。

テーブル、行、セル、または列のフォーマット変更

テーブル、セル、行、または列を選択します。
プロパティインスペクター（ウィンドウ／プロパティ）の右下隅にある縮小の三角形をクリックし、必要に応じて以下のプロパティを変更します。
必要に応じてプロパティを変更します。

オプションについて詳しくは、プロパティインスペクターのヘルプアイコンをクリックしてヘルプを参照してください。

注意：

Dreamweaver では、列のプロパティを設定すると、設定内容に応じて列内の各セルに対応する td タグの属性が変更されます。これに対して、行のプロパティの一部を設定すると、Dreamweaver によって trタグの属性は変更されますが、行内の各 td タグの属性は変更されません。1 つの行のすべてのセルに同じフォーマットを適用する場合は、フォーマットを tr タグに適用すると、見やすく簡潔な HTML コードを作成できます。

コードビューでのテーブルのアクセシビリティ値の追加または編集

コード内の該当する属性を編集します。

注意：

コード内のタグを素早く見つけるには、テーブル内でクリックし、ドキュメントウィンドウの下部にあるタグセレクターで <table> タグを選択します。

デザインビューでのテーブルのアクセシビリティ値の追加または編集

テーブルのキャプションを編集するには、キャプションをハイライト表示し、新しいキャプションを入力します。
- キャプションの整列を編集するには、テーブルのキャプション内に挿入ポイントを配置し、右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、「タグコードの編集」を選択します。
- テーブルのサマリーを編集するには、テーブルを選択し、右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、「タグコードの編集」を選択します。

テーブル、列、および行のサイズ変更

テーブルのサイズ変更

テーブル全体、または個々の行や列のサイズを変更できます。テーブル全体のサイズを変更すると、テーブル内のセルはすべて、比例してサイズ変更されます。セルに対して幅または高さが明示的に指定されている場合に、そのセルを含むテーブルのサイズを変更すると、ドキュメントウィンドウに表示されるセルの画面上のサイズは変わりますが、セルの指定された幅と高さは変更されません。

テーブルのサイズを変更するには、テーブルのいずれかの選択ハンドルをドラッグします。テーブルが選択されている場合または挿入ポイントがテーブルにある場合は、Dreamweaver により、テーブルの上部または下部に、テーブルヘッダーメニューとともにテーブル幅が表示されます。

HTML コード内の列幅セットが画面上の表示幅と一致しないことがあります。この場合、幅を合わせることができます。Dreamweaver に表示されるテーブルと列の幅およびヘッダーメニューは、必要に応じて表示と非表示を切り替えることができるため、テーブルをレイアウトするのに便利です。

列および行のサイズ変更

列の幅または行の高さを変更するには、プロパティインスペクターを使用するか、列または行のボーダーをドラッグします。サイズ変更がうまくいかない場合は、列の幅または行の高さをクリアしてもう一度やり直してください。

注意：

コードビューで HTML コードを直接変更して、セルの幅および高さを変更することもできます。

テーブルが選択されている場合または挿入ポイントがテーブル内にある場合は、Dreamweaver により、列の上部または下部に、列ヘッダーメニューとともに列幅が表示されます。列ヘッダーメニューは、必要に応じて表示と非表示を切り替えることができます。

テーブルのサイズ変更

テーブルを選択します。ビューがライブビューになっている場合は、テーブルの選択時にエレメントディスプレイが表示されます。サンドイッチアイコンをクリックして、テーブルフォーマットモードを入力します。

テーブルの横方向のサイズを変更するには、右端の選択ハンドルをドラッグします。
テーブルの縦方向のサイズを変更するには、下端の選択ハンドルをドラッグします。
テーブルの両方向でサイズを変更するには、右下隅の選択ハンドルをドラッグします。

ライブビューでテーブルフォーマットモードを終了するには、Esc キーを押すか、テーブルの外をクリックします。編集／テーブルメニューオプションを使用して、テーブルをさらに変更できます。

注意：編集／テーブルメニューのオプションは、テーブル全体を選択しているか、1 つのセルを選択しているかどうかによって異なります。ライブビューのエレメントディスプレイで、テーブル全体が選択されているときは「テーブル」が、特定のセルが選択されている場合は「td」が表示されます。セルフォーマットからテーブルフォーマットに切り替えるには、テーブルの境界線をクリックします。

テーブル全体の幅を保ったまま列幅を変更

デザインビューで、変更する列の右側の境界線をドラッグします。

隣接する列の幅も変化するため、実際には 2 つの列のサイズを変更することになります。列がどのように調節されるかが表示されます。テーブル全体の幅は変更されません。

テーブルの幅を保ったまま列幅を変更

注意：

幅がピクセル数ではなくパーセントで指定されているテーブルでは、右端の列の右ボーダーをドラッグすると、テーブル全体の幅が変化し、すべての列がそれに比例して広くなったり狭くなったりします。

他の列のサイズを保ったまま列幅を変更

デザインビューで、Shift キーを押したまま、列の境界線をドラッグします。

1 つの列の幅が変更されます。列がどのように調整されるかが表示されます。テーブル全体の幅は、サイズ変更する列に合わせて変化します。

他の列の幅を保ったまま列幅を変更

行の高さを画面上で変更

行の下ボーダーをドラッグします。

コードの列幅を表示幅に統一

セル内をクリックします。
テーブルヘッダーメニューをクリックし、「すべての幅を固定」を選択します。

Dreamweaver により、コードに指定されている幅が表示幅に合わせて再設定されます。

テーブルに設定されている幅または高さをすべてクリア

テーブルを選択します。
次のいずれかの操作を実行します。
- 編集／テーブル／列幅のクリア、または編集／テーブル／行の高さをクリアを選択します。
- プロパティインスペクター（ウィンドウ／プロパティ）で、行の高さをクリアボタンまたは列幅をクリアボタンをクリックします。
- テーブルヘッダーメニューをクリックし、「すべての高さをクリア」または「すべての幅をクリア」を選択します。

列に設定されている幅のクリア

列内をクリックし、列ヘッダーメニューをクリックして、「列幅をクリア」を選択します。

テーブルと列の幅およびメニューの表示と非表示の切り替え（デザインビュー内）

表示／デザインビューのオプション／ビジュアルエイド／テーブルの幅を選択します。

行と列の追加および削除

行と列を追加および削除するには、修正／テーブルまたは列ヘッダーメニューを使用します。

注意：

テーブルの最後のセルで Tab キーを押すと、自動的にテーブルに行が 1 つ追加されます。

1 つの行または列の追加

セル内をクリックし、次のいずれかの操作を行います。

編集／テーブル／行の挿入または編集／テーブル／列の挿入を選択します。

行の場合は挿入ポイントの上、列の場合は挿入ポイントの左側に表示されます。
列ヘッダーメニューをクリックし、「左に列を挿入」または「右に列を挿入」を選択します。

複数の行または列の追加

セル内をクリックします。
編集／テーブル／行または列の挿入を選択し、表示されるダイアログボックスに情報を入力して「OK」をクリックします。

挿入

行を挿入するか、列を挿入するかを指定します。

「行数」または「列数」

挿入する行または列の数を指定します。

ここでは

、新しい行または列を、選択したセルが含まれる行または列の前と後のどちらに追加するかを指定します。

行または列の削除

次のいずれかの操作を実行します。

削除する行または列内のセルをクリックし、編集／テーブル／行の削除または編集／テーブル／列の削除を選択します。
行全体または列全体を選択し、Delete キーを押します。

プロパティインスペクター（ウィンドウ／プロパティ）で、以下のいずれかの操作を行います。
- 行を追加または削除するには、「行」の値を増減します。
- 列を追加または削除するには、「列」の値を増減します。

注意：

Dreamweaver では、データが入力されている行や列を削除する場合でも、警告メッセージは表示されません。

セルの分割およびマージ

プロパティインスペクター、または編集／テーブルサブメニューのオプションを使用して、セルを分割またはマージします。

テーブル内の複数のセルをマージ

互いに隣り合っていて四角形に並んでいるセルを選択します。

次の図では、選択範囲が四角形なので、セルをマージできます。

四角形に並んだセルをマージできます

次の図では、選択範囲が四角形ではないので、セルをマージできません。

選択範囲が四角形ではない場合、セルをマージできません
次のいずれかの操作を実行します。
- 編集／テーブル／セルのマージを選択します。
- 展開されている HTML プロパティインスペクター（ウィンドウ／プロパティ）で、セルのマージボタンをクリックします。
注意：

ボタンが表示されない場合は、プロパティインスペクターの右下隅にある縮小の三角形をクリックすると、すべてのオプションが表示されます。

個別のセルのコンテンツは、でき上がったマージしたセル内に配置されます。選択した最初のセルのプロパティが、マージしたセルに適用されます。

セルの分割

セル内をクリックし、次のいずれかの操作を行います。
- 編集／テーブル／セルの分割を選択します。
- 展開してある HTML プロパティインスペクター（ウィンドウ／プロパティ）で、セルの分割ボタンをクリックします。
注意：

ボタンが表示されない場合は、プロパティインスペクターの右下隅にある縮小の三角形をクリックすると、すべてのオプションが表示されます。
セルの分割ダイアログボックスで、セルの分割方法を指定します。

セル分割

セルを行または列に分割するかどうかを指定します。

行数 / 列数

セルを分割する行または列の数を指定します。

セルを構成する行または列の数の増減

次のいずれかの操作を実行します。

編集／テーブル／行の拡大または編集／テーブル／列の拡大を選択します。
編集／テーブル／行の縮小または編集／テーブル／列の縮小を選択します。

セルのコピー、ペースト、および削除

セルのフォーマットを保持しながら、単一のセル、または複数のセルを一度にコピー、ペースト、または削除できます。

セルをペーストする場合、挿入ポイントにペーストできます。また、既存のテーブルの選択範囲に置き換わる形でもペーストできます。複数のテーブルセルをペーストするには、クリップボードのコンテンツが、セルがペーストされるテーブルまたはテーブル内の選択範囲の構成と適合している必要があります。

テーブルセルのカットまたはコピー

単一のセル、または互いに隣り合っていて四角形に並んでいる複数のセルを選択します。

次の図では、選択範囲が四角形なので、セルをカットまたはコピーできます。

四角形に並んだセルをカットまたはコピーできます

次の図では、選択範囲が四角形ではないので、セルをカットまたはコピーできません。

選択範囲が四角形ではない場合、セルをカットまたはコピーできません
編集／カットまたは編集／コピーを選択します。

注意：

行全体または列全体を選択して編集／カットを選択すると、セルのコンテンツだけでなく、その行または列全体がテーブルから切り取られます。

テーブルセルのペースト

セルをペーストする場所を選択します。
- 既存のセルをペーストするセルで上書きするには、ペースト先のセル範囲を選択するときに、クリップボード内のセルと同じレイアウトになるように選択します。例えば、3×2 ブロックのセルをコピーまたはカットした場合は、3×2 ブロックのセルを選択してペーストすると、上書きできます。
- 特定のセルの上に 1 つの行全体をペーストするには、そのセル内でクリックします。
- 特定のセルの左側に 1 つの列全体をペーストするには、そのセル内でクリックします。
注意：

クリップボード内のセルがペースト先の行全体または列全体のセル数に満たない場合に、テーブル内の 1 つのセルをクリックしてクリップボードにあるセルをペーストすると、クリックしたセルとそれに隣接したセルが（テーブル内の場所に応じて）ペーストしたセルで上書きされることがあります。
- ペーストするセルで新しいテーブルを作成するには、挿入ポイントをテーブルの外に置きます。
編集／ペーストを選択します。

行または列全体を既存のテーブルにペーストしている場合は、行または列がテーブルに追加されます。個別のセルをペーストしている場合は、選択されたセルのコンテンツが置き換えられます。テーブルの外側にペーストしているときは、該当の行、列、セルが新規テーブルの定義に使用されます。

セルを残したままセルのコンテンツだけを削除

セルを選択します。

注意：

1 つの行全体または列全体を選択していないことを確認してください。
Delete キーを押します。

注意：

行全体または列全体を選択して編集／クリアを選択するか Delete キーを押すと、セルのコンテンツだけでなく、選択した行または列全体がテーブルから削除されます。

マージされたセルを含む行または列の削除

行または列を選択します。
編集／テーブル／行の削除または編集／テーブル／列の削除を選択します。

テーブルのネスト

ネストされたテーブルとは、他のテーブルのセル内に挿入されたテーブルのことです。ネストされたテーブルは、他のテーブルの場合と同様にフォーマットできます。ただし、テーブルの幅は、テーブルが含まれるセルの幅に制約されます。

既存のテーブルのセル内でクリックします。
挿入／テーブルを選択し、「テーブルの挿入」オプションを設定して「OK」をクリックします。

テーブルのソート

1 つの列のコンテンツを基準にしてテーブルの行をソートできます。2 列のコンテンツに基づく、さらに複雑なテーブルのソートもできます。

colspan または rowspan 属性を含むテーブル（つまり、マージしたセルを含むテーブル）はソートできません。

テーブルを選択するか、任意のセルをクリックします。
編集／テーブル／テーブルのソートを選択し、表示されるダイアログボックスで以下のオプションを設定して「OK」をクリックします。

ソート条件

どの列の値を基準にしてテーブル行をソートするかを指定します。

順序

列をアルファベット順と数値順のどちらでソートするか、また昇順（A ～ Z、低位の数値から高位の数値へ）と降順のどちらでソートするかを指定します。

列のコンテンツが数値の場合、「番号順」を選択します。1 桁または 2 桁の数値のリストにアルファベット順ソートを適用すると、数値は数字の順序（例えば、1、2、3、10、20、30）ではなく、単語と見なした順序（例えば、1、10、2、20、3、30）でソートされます。

第 2 のソート条件および順序

第 2 のソート条件として使用する別の列を指定します。第 2 のソート条件ポップアップメニューで 2 番目のソート基準とする列を指定し、順序ポップアップメニューで第 2 のソート順序を指定してください。

最初の行も含めてソートする

オンにすると、テーブルの最初の行がソートに含まれます。先頭の行を見出しとして先頭の位置から動かしたくない場合は、このオプションをオフにします。

ヘッダー行をソートする

テーブルに thead セクションがある場合に、そこに含まれるすべての行を本体の行と同じ基準を使用してソートします。thead 行は thead セクションに残り、ソート後もそのままテーブルの最上段に表示されます。thead タグについて詳しくは、リファレンスパネル（ヘルプ／リファレンスを選択）を参照してください。

フッター行をソートする

テーブルに tfoot セクションがある場合に、そこに含まれるすべての行を本体の行と同じ基準を使用してソートします。tfoot 行は tfoot セクションに残り、ソート後もそのままテーブルの最下段に表示されます。tfoot タグについて詳しくは、リファレンスパネル（ヘルプ／リファレンスを選択）を参照してください。

ソートの完了後もすべての行カラーを維持する

オンにすると、コンテンツと関連付けられたテーブル行の属性（カラーなど）が、ソート後もそれぞれの行に保持されます。テーブル行が 2 つの交互に並ぶカラーでフォーマットされている場合、ソートされたテーブルでも行が同じように交互に色分けされるようにするには、このオプションをオフにします。行の属性が各行のコンテンツに固有のものである場合は、このオプションをオンにして、ソート後のテーブルでも、行と属性との関連付けが保たれるようにします。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る