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

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

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

テーブルは、HTMLページで表形式のデータを表示するための強力なツールです。テーブルは 1 つまたは複数の行で構成され、各行は 1 つまたは複数のセルで構成されます。 通常、HTML コードでは列が明示的に指定されることはありませんが、Dreamweaver では行やセルと同様に列を操作することができます。

メモ

webページのレイアウトにテーブルを使用することは推奨されません。スターターテンプレート(ファイル > 新規 > スターターテンプレート)を試して、あらかじめデザインされたレイアウトで開始してください。これらのレイアウトに独自のテキストや画像を挿入し、CSSを使用してスタイルを設定することができます。

HTMLでのテーブル書式設定の優先順位

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

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

  1. セル
  2. テーブル

例えば、単一のセルの背景色を青に設定してから、テーブル全体の背景色を黄色に設定した場合、青いセルは黄色に変わりません。これは、セルの書式設定がテーブルの書式設定よりも優先されるためです。

メモ

列にプロパティを設定すると、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、Macintosh、またはUNIX。(オペレーティング システムによって、テキスト行の終わりを示す方法が異なります。)

「書き出し」をクリックします。
ファイル名を入力して「保存」をクリックします。

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

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

ポインターを テーブル、行、列、またはセル上に移動すると、Dreamweaverは その選択範囲内のすべてのセルをハイライト表示し、どのセルが 選択されるかがわかります。これは、ボーダーのないテーブル、 複数の列や行にまたがるセル、またはネストしたテーブルがある場合に便利です。ハイライトカラーは 環境設定で変更できます。

メモ

ポインターをテーブルのボーダー上に配置してから、Controlキー (Windows)またはCommandキー(Macintosh)を押し続けると、テーブルの 全体構造(つまり、テーブル内のすべてのセル)がハイライト表示されます。これは ネストしたテーブルがあり、いずれかのテーブルの構造を 確認したい場合に便利です。

テーブル全体の選択

テーブルを選択するには、以下のいずれかを実行します:

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

個人の行または複数の行 または列を選択

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

1 つの列の選択

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

1 つのセルの選択

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

  • テーブルセル内でクリックし、ドキュメントウィンドウの左下隅にあるタグセレクターで <td> タグを選択します。
  • Ctrl キー(Windows)または Command キー(Mac OS)を押しながらセル内をクリックします。

線または長方形のセルブロックを選択します

次のいずれかの操作を実行します。
  • あるセルから別のセルまでドラッグします。

  • セルを 1 つクリックし、そのセル内で Ctrl キーを押しながらクリック(Windows)または Command キーを押しながらクリック(Mac OS)して選択します。次に Shift キーを押しながら別のセルをクリックします。

セルのブロックの選択

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

Control キーを押しながらクリック(Windows)またはCommandキーを押しながらクリック (Macintosh)して、選択したいセル、行、または列を選択します。

Control キーを押しながらクリックまたはCommandキーを押しながらクリック した各セル、行、または列が既に選択されていない場合は、選択に追加されます。既に 選択されている場合は、選択から削除されます。

テーブル要素のハイライトカラーを変更します

編集>環境設定(Windows)またはDreamweaver>環境設定(Macintosh)を選択します。
左側のカテゴリリストからハイライトを選択し、 以下のいずれかの変更を行い、「OK」をクリックします。
  • テーブルエレメントのハイライトカラーを変更するには、「マウスオーバー」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。

  • テーブルエレメントのハイライト表示のオン/オフを切り替えるには、「マウスオーバー」の「表示」オプションをオンまたはオフにします。

メモ

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

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

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

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

テーブル ID

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

「行」と「列」

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

W

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

メモ

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

セル余白

セルの内容とセル境界間の ピクセル数。

セル間隔

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

行揃え

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

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

メモ

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

ボーダー

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

メモ

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

クラス

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

メモ

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

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

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

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

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

「幅を%に変換」

およびテーブルの高さをパーセントに変換は、テーブル内の各列の幅または 高さを、ドキュメントウィンドウの幅に対するパーセンテージとして表現した現在の幅に設定します(テーブル全体の幅も、ドキュメント ウィンドウの幅に対するパーセンテージとして現在の幅に設定します)。

テキストボックスに値を入力した場合は、Tab キーまたは Enter キー(Windows)または Return キー(Macintosh)を押して値を適用します。

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

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

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

セル、行、または列の内容の水平アラインメント を指定します。内容をセルの左、右、または中央に配置することができます。また、ブラウザーがデフォルトのアラインメントを使用するように指定することもできます(通常、標準セルでは左、ヘッダーセルでは中央)。

セル、行、または列の内容の垂直アラインメント を指定します。内容をセルの上、中央、下、またはベースラインに配置したり、ブラウザーがデフォルトのアラインメントを使用するように指定したりできます(通常は中央)。

幅および高さ

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

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

メモ

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

背景

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

セルのマージ

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

セルの分割

セルが複数のセルに分割されます。 一度に分割できるセルは 1つのみです。複数のセルが選択されている場合、このボタンは無効になります。

折り返さない

行の折り返しを防ぎ、指定されたセル内のすべてのテキストを1行に収めます。「折り返しなし」が有効になっている場合、入力または貼り付け時にすべてのデータに対応するようにセルが幅を広げます。(通常、セル は、セル内の最も長い単語または最も幅の広い画像に対応するために水平方向に展開し、その後、他のコンテンツに対応するために必要に応じて垂直方向に展開します。)

ヘッダー

選択された セルをテーブルヘッダーセルとしてフォーマットします。テーブルヘッダーセルのコンテンツは デフォルトで太字、中央揃えになります。

メモ

幅と高さをピクセルまたはパーセンテージで指定でき、ピクセルからパーセンテージへ、またはその逆への変換も可能です。

メモ

列にプロパティを設定すると、Dreamweaverは列内の各セルに対応するtdタグの属性を変更します。ただし、行に特定のプロパティを設定する場合、Dreamweaverは 行内の各td タグの属性を変更するのではなく、tr タグの 属性を変更します。行内のすべてのセルに同じフォーマットを適用する場合、 tr タグにフォーマットを適用すると、よりクリーンで簡潔なHTMLコードが生成されます。

TabまたはEnter(Windows)またはReturn(Macintosh)を押して 値を適用します。

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

テーブルと そのセルのプロパティを設定するか、テーブルにプリセットデザインを適用することで、テーブルの外観を変更できます。テーブルとセルのプロパティを設定する前に、フォーマットの優先順位がセル、行、テーブルの順であることを理解しておいてください。

メモ

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

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

テーブル、セル、行、または列を選択します。
プロパティインスペクター(ウィンドウ > プロパティ)で、 右下角の展開矢印をクリックし、必要に応じてプロパティを変更します。
必要に応じてプロパティを変更します。

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

メモ

列にプロパティを設定する場合、Dreamweaverは 列内の各セルに対応するtdタグの属性を変更します。ただし、行に特定のプロパティを設定する場合、Dreamweaverは行内の各td タグの属性を変更するのではなく、trタグの属性を変更します。行内のすべてのセルに同じフォーマットを適用する場合、tr タグにフォーマットを適用すると、よりクリーンで簡潔なHTMLコードが生成されます。

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

コード内の適切な属性を編集します。
メモ

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

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

  • テーブルキャプションを編集するには、 キャプションをハイライトして新しいキャプションを入力します。
    • キャプションのアラインメントを編集するには、テーブルキャプション内に挿入ポイントを配置し、右クリック(Windows)またはControl‑クリック(Macintosh)して、「タグコードを編集」を選択します。

    • テーブルの概要を編集するには、テーブルを選択し、右クリック(Windows)またはControlクリック(Macintosh)して、「タグコードを編集」を選択します。

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

テーブルのサイズ変更

テーブル全体または個別の行や列のサイズを変更することができます。テーブル全体のサイズを変更すると、テーブル内のすべてのセルのサイズが比例的に変更されます。テーブルのセルに明示的な幅または高さが指定されている場合、テーブルのサイズを変更するとドキュメントウィンドウでのセルの視覚的なサイズは変更されますが、セルの指定された幅と高さは変更されません。

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

HTMLコードで設定された列幅が画面上の見た目の幅と一致しないことがあります。この場合、幅を一致させることができます。テーブルと列の幅およびヘッダーメニューはDreamweaverに表示され、テーブルのレイアウトに役立ちます。必要に応じて幅とメニューを有効または無効にできます。

列および行のサイズ変更

プロパティインスペクターで列の幅や行の高さを変更したり、列や行のボーダーをドラッグして変更したりできます。サイズ変更に問題がある場合は、列幅または行の高さをクリアして最初からやり直すことができます。

メモ

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

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

テーブルのサイズ変更

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

  • テーブルを水平方向にサイズ変更するには、右側の選択ハンドルをドラッグします。

  • テーブルを垂直方向にサイズ変更するには、下部の選択ハンドルをドラッグします。

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

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

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

列の幅を変更してテーブル全体の幅を維持する

デザインビューで、変更したい列の右ボーダーをドラッグします。

隣接する列の幅も変更されるため、実際には2つの列のサイズを変更することになります。視覚的なフィードバックにより、列がどのように調整されるかが表示されます。テーブル全体の幅は変更されません。

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

メモ

パーセント基準の幅(ピクセルではない)のテーブルでは、右端の列の右ボーダーをドラッグすると、テーブル全体の幅が変更され、すべての列が比例的に広くまたは狭くなります。

列の幅を変更して 他の列のサイズを維持

デザインビューで、Shiftキーを押しながら列のボーダーをドラッグします。

1 つの列の幅が変更されます。 視覚的なフィードバックで列の調整内容が表示されます。サイズ変更する列に合わせてテーブル全体の幅が変更されます。

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

行の高さを画面上で変更

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

コード内の列幅を ビジュアル幅と一致させる

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

Dreamweaver がコードで指定された幅を ビジュアル幅と一致するようにリセットします。

テーブル内のすべての設定された幅または高さをクリアします

テーブルを選択します。
次のいずれかの操作を実行します。
  • 編集/テーブル/セル幅をクリア、または編集/テーブル/セル高をクリアを選択します。

  • プロパティインスペクター(ウィンドウ/プロパティ)で、行の高さをクリアボタン または列幅をクリアボタン をクリックします。

  • テーブルヘッダーメニューをクリックし、Clear All Heights または Clear All Widths を選択します。

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

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

デザインビューでテーブルと列の幅やメニューを有効または無効にする

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

行と列の追加および削除

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

メモ

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

1 つの行または列の追加

セル内をクリックし、次のいずれかの操作を行います。
  • 編集/テーブル/行を挿入 または 編集/テーブル/列を挿入を選択します。

    行の場合は挿入ポイントの上、列の場合は挿入ポイントの左側に表示されます。

  • 列ヘッダーメニューをクリックし、「左に列を挿入」または「右に列を挿入」を選択します。

     

複数の行または列の追加

セル内をクリックします。

編集/テーブル/行または列を挿入を選択し、ダイアログボックスに入力して「OK」をクリックします。

挿入

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

「行数」または「列数」

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

ここでは

新しい行または列を、選択したセルの行または列の 前または後のどちらに表示するかを指定します。

行または列の削除

次のいずれかの操作を実行します。
  • 削除する行または列内のセルをクリックし、編集/テーブル/行を削除、または編集/テーブル/列を削除を選択します。

  • 完全な行または列を選択し、Deleteキーを押します。

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

Dreamweaver は、データが含まれる行と列を削除する場合でも警告を表示しません。

セルの分割およびマージ

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

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

連続した線上で 長方形の形になるようにセルを選択します。

次の図では、選択範囲がセルの長方形なので 、セルを結合できます。

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

次のイラストでは、選択が長方形ではないため、セルを結合できません。

選択範囲が四角形ではない場合、セルをマージできません

次のいずれかの操作を実行します。
  • 編集 > 表 > セルを結合を選択します。

  • 展開されたHTML プロパティインスペクター(ウィンドウ > プロパティ)で、セルを結合をクリックします。

メモ

ボタンが表示されない場合は、プロパティインスペクターの右下角にある展開矢印をクリックして、すべてのオプションを表示してください。

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

セルの分割

セル内をクリックして、次のいずれかを実行します:
  • 編集 > 表 > セルを分割を選択します。

  • 展開されたHTMLプロパティインスペクター(ウィンドウ > プロパティ)で、「セルを分割」をクリックします。

メモ

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

セルを分割ダイアログボックスで、セルの分割方法を指定します:

セル分割

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

行数 / 列数

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

セルがまたがる行数または列数を増減する

次のいずれかの操作を実行します。
  • 「編集」>「テーブル」>「行のスパンを増やす」、または「編集」>「テーブル」>「列のスパンを増やす」を選択します。

  • 「編集」>「テーブル」>「行スパンを減らす」または「編集」>「テーブル」>「列スパンを減らす」を選択します。

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

セルの書式を保持したまま、単一の表のセルまたは複数のセルを一度にコピー、ペースト、または削除できます。

セルは、挿入ポイントで、または既存の表内の選択範囲の代わりにペーストできます。複数の表セルをペーストするには、クリップボードの内容が表の構造、またはセルをペーストする表内の選択範囲と互換性がある必要があります。

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

連続した線上にあり、長方形の形状をなす1つ以上のセルを選択します。

次のイラストでは、選択がセルの長方形であるため、セルを切り取りまたはコピーできます。

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

次のイラストでは、選択が長方形ではないため、セルを切り取りまたはコピーできません。

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

編集/カットまたは編集/コピーを選択します。
メモ

行全体または列全体を選択して編集 > 切り取りを選択すると、行全体または列全体が表から削除されます(セルの内容だけでなく)。

テーブルセルのペースト

セルをペーストする場所を選択します。
  • 既存のセルをペーストするセルで上書きするには、ペースト先のセル範囲を選択するときに、クリップボード内のセルと同じレイアウトになるように選択します。 例えば、3×2 ブロックのセルをコピーまたはカットした場合は、3×2 ブロックのセルを選択してペーストすると、上書きできます。

  • 特定のセルの上に 1 つの行全体をペーストするには、そのセル内でクリックします。

  • 特定のセルの左側に 1 つの列全体をペーストするには、そのセル内でクリックします。

メモ

クリップボード内のセルがペースト先の行全体または列全体のセル数に満たない場合に、テーブル内の 1 つのセルをクリックしてクリップボードにあるセルをペーストすると、クリックしたセルとそれに隣接したセルが(テーブル内の場所に応じて)ペーストしたセルで上書きされることがあります。

  • ペーストするセルで新しいテーブルを作成するには、挿入ポイントをテーブルの外に置きます。
編集/ペーストを選択します。

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

セルの内容を削除しますがセルはそのままにします

セルを選択します。
メモ

選択範囲が完全な行または列のみで構成されていないことを確認してください。

Delete キーを押します。

メモ

編集 > クリアを選択するかDeleteキーを押した時に、完全な行または列のみが選択されている場合、行全体または列全体(その内容だけでなく)が表から削除されます。

結合セルを含む行または列を削除します

行または列を選択します。

編集/表/行を削除、または編集/表/列を削除を選択します。

テーブルのネスト

ネストされた表は、 別の表のセル内にある表です。ネストされた表は他の表と同じように 書式設定できますが、その幅は表示されるセルの幅によって制限 されます。

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

テーブルのソート

単一の列の内容に基づいて表の行を 並べ替えることができます。2つの列の内容に基づいて、より複雑な表の並べ替えを実行することもできます。

colspan属性またはrowspan属性を含む表、つまり 結合されたセルを含む表は並べ替えできません。

テーブルを選択するか、任意のセルをクリックします。

編集/表/表の並べ替えを選択し、ダイアログボックスでオプションを設定して、「OK」をクリックします。

ソート条件

表の行の並べ替えに使用する列の値を 決定します。

順序

列をアルファベット順または数値順で並べ替えるか、 昇順(AからZ、小さい数値から大きい数値)または降順で並べ替 えるかを決定します。

列の内容が数値の場合は、「数値順」を選択します。1桁と2桁の数値のリストにアルファベット 順の並べ替えを適用すると、数値が数値として並べ替えられる (1、2、3、10、20、30などの順序になる)のではなく、単語と して並べ替えられます(1、10、2、20、3、30などの順序になる)。

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

別の列でのセカンダリ並べ替えの順序を決定します。「次の基準」ポップアップメニューでセカンダリ並べ替え列を 指定し、「順序」ポップアップメニューでセカンダリ並べ替え順 序を指定します。

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

表の最初の行を並べ替えに含めることを 指定します。最初の行が移動すべきでない見出しの場合は、 このオプションを選択しないでください。

ヘッダー行をソートする

表のtheadセクション(存在する場合)の すべての行を本文の行と同じ条件で並べ替えることを指定します。(thead行は theadセクションに残り、並べ替え後も 表の上部に表示されることに注意してください。)theadタグについて詳しくは、リファレンスパネル (ヘルプ/リファレンスを選択)を参照してください。

フッター行をソートする

表のtfootセクション(存在する場合)の すべての行を本文の行と同じ条件で並べ替えることを指定します。(tfoot行は tfootセクションに残り、並べ替え後も 表の下部に表示されることに注意してください。)tfootタグについて詳しくは、リファレンスパネル (ヘルプ/リファレンスを選択)を参照してください。

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

表の行の属性(色など)を並べ替え後も 同じ内容に関連付けたままにすることを指定します。表の行が2つの交互の色で書式設定されている 場合は、並べ替え後の表でも交互の色の行が維持されるように、 このオプションを選択しないでください。行の属性が各行のコンテンツに固有の場合は、このオプションを選択して、ソートされたテーブルでそれらの属性が正しい行に関連付けられたままになるようにします。