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

テーブルダイアログボックス

Dreamweaver でテーブルを挿入する簡単な機能として、テーブルダイアログボックスがあります。表示させる方法は2通りあり、画面上部にあるメニューで、挿入/テーブル を選択するか、挿入 パネルの一般カテゴリー一覧にある「テーブル」を選択します。

表(テーブル)を作ってみよう

  1. Dreamweaver CC を起動し、新規(X)HTMLファイルを作成するか、既存のファイルを開いてください。

  2. 挿入/テーブル を選択します。

  3. テーブル ダイアログボックスが表示されたら、「テーブルサイズ」セクションと「ヘッダーセクション」は必ず設定し、「OK」をクリックします。

    ※ここでは以下のように設定します。

    • 「行」、「列」:4
    • 「テーブルの幅」:200 ピクセル
      ※後で変更することができます。
    • 「ボーダー」:1
      ※大外の枠の幅をピクセル単位で指定します。
    • 「セル内余白」:5
      ※セル内のコンテンツ(テキストや画像)と枠線の間隔をピクセル単位で指定します。
    • 「セル間隔」:0
      ※隣接するテーブルセルの間隔をピクセル単位で指定します。
    • 「ヘッダー」:両方
      ※初期設定では太文字、中央揃えで配置されます。
    • 「キャプション」:タイトルを入力
      ※表の上部に表示されます。
  4. 表の枠組みが挿入されたら、テキストや画像などを入力または配置して完成です。

表を調整しよう

上記の「表(テーブル)を作ってみよう」で表を作成したら、表のサイズを変更したり隣接したセルとセルを結合(マージ)したりすることができます。

セルのマージ

  1. Ctrl(Command)キーを押しながら、隣接したセルを選択します。

  2. 選択したセルの上で右クリックをして、メニューの テーブル/セルのマージ を選択します。

    以上で、セルのマージの手順は完了です。

セルの分割

  1. 分割したいセルの上で右クリックをして、メニューの テーブル/セルの分割 を選択します。

  2. セルの分割 ダイアログボックスが表示されたら、行数または列の数を設定して「OK」ボタンをクリックします。
    ※ここでは、「セルの分割」:行、「行数」:2 と設定します。

    以上で、セルの分割の手順は完了です。

サイズの変更

デザインビューでテーブルのサイズを変更する方法が簡単です。変更したいテーブルを選択して、テーブルの右下の枠線にポインターを合わせ、ドラックすると全体のサイズが変更します。

コードビューの場合は<table width="サイズ数値" >の「サイズ数値」部分を入力すると、サイズが変更します。

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

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