この文書では、Dreamweaver のテーブル作成/編集の機能について説明しています。 Dreamweaver のテーブル機能を使用することで、ページに簡単にテーブルを挿入することができます。

この文書では、Dreamweaver のテーブル作成/編集の機能について説明しています。

Dreamweaver のテーブル機能を使用することで、ページに簡単にテーブルを挿入することができます。

テーブルダイアログボックスについて

ページを開いて「挿入」メニューから「Table」を選択すると、「Table」ダイアログボックスが表示されます。ここではダイアログボックス内の各設定項目について説明します。

行、列
行数と列数を指定します。

テーブルの幅
テーブル全体の横幅を指定します。「ピクセル」または「パーセント」で指定することができます。パーセントで指定した場合、表示されているページ全体の幅に応じて、テーブルの幅が可動するようになります。

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

セル内余白
セル内のコンテンツ(テキストや画像)と枠の間隔をピクセル単位で指定します。

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

ヘッダ
行または列、またはその両方をヘッダとして指定することができます。初期設定では、ヘッダ内のテキストは太字で表示され、中央揃えで配置されます。

キャプション
テーブルのキャプション(表題)を指定することができます。テーブルの上に中央揃えで表示されます。

サマリー
テーブルの説明文です。ページ上では表示されませんが、table タグの summary 属性として指定されます。

配置したテーブルの編集

Dreamweaver では、配置したテーブルのレイアウトを直感的な操作で簡単に変更することができます。

幅や高さの変更
マウスカーソルをテーブルの枠線に合わせると、左右または上下の矢印が表示されます。そのままドラッグすることで、セルの幅や高さを調節することができます。

横幅は、テーブル全体の幅を維持したまま変更されます。テーブル全体の幅を無視して変更する場合は、Shift キーを押しながらドラッグします。

 行/列の挿入と削除

テーブルの任意のセルを右クリックして、行/列の挿入および削除を行うことができます。

セルのマージ
Ctrl(Windows)/Command(Macintosh)キーを押しながらクリックすることで複数のセルを選択し、右クリックから「テーブル」の「セルのマージ」を選択すると、選択したセルを結合することができます。

テーブルのデザインを変更してみよう

ここでは、CSS を使用してテーブルのデザインを変更する手順の一例を紹介します。

  1. テーブルを追加するページを開きます。

  2. 「挿入」メニューの「テーブル」をクリックします。

  3. 行数、列数など必要な項目を設定し、「OK」をクリックします。

    ここでは例として、以下の設定でテーブルを作成しています。

    テーブルサイズ

    • 行 : 3
    • 列 : 5
    • テーブルの幅 : 400
    • ピクセルボーダー : 1
    • ピクセルセル内余白 : 4
    • セル内間隔 : 2

    ヘッダー

    • 両方
  4. テーブルが挿入されたら、テキストを入力します。

  5. 「ウィンドウ」メニューから「CSS デザイナー」を選択ます。

  6. 各セクションを以下のように設定します。

    ソースセクション
    「+」をクリックし、「ページで定義」を選択します。

    セレクターセクション
    テーブル全体を選択し「+」をクリックします。

    プロパティセクション
    ボーダーアイコンをクリックし、以下を入力します。
    width : 1px
    style : solid
    color : #00f

  7. テーブルの外枠が 1 px の青い実線で表示されます。

    注意:

    ※ 上記の Step 5 を td、th などのタグに対して同様に行うことで、外枠だけでなく中のセルの枠線も同じように変更することができます。また、ボーダーだけでなく背景色やフォントの設定なども行うことができるため、更に細かくデザインを工夫することができます。  

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー