表を作成する
ボーダーの設定
操作説明 ムービー 操作練習
  テーブルのボーダー(枠線)を設定する事によって、テーブルは様々な利用価値が生まれます。
     
  1.
ボーダーを設定したいテーブルの罫線をクリックします。
     
  2.
プロパティインスペクタの「ボーダー」に『5』を入力します。
     
  3.
枠線の太さが変わりました。
     
  4.
枠線を無くす事も可能です。
対象のテーブルの枠線をクリックします。、
     
  5.
プロパティインスペクタの「ボーダー」に『0』を入力します。
     
  6.
枠線が点線になりました。
これを実際にブラウザの画面で見ると枠線は表示されません。
     
     
  Tips
テーブル作成時のテーブルダイアログボックスにて、テーブルサイズ:ボーダーをピクセル数値で入力する方法もありますので、自分に合った設定方法を選んでテーブルを作成してみてください。
     
   
  Tips
テーブルボーダー設定例
 
テーブルボーダー設定例:ボーダー幅5ピクセル
※テーブルボーダーを太くしても、セルのボーダーは1ピクセル幅のまま変化する事はありません。
  テーブルボーダー設定例:ボーダー幅20ピクセル
※ボーダー幅が太くなっても、テーブル幅は変わりません。ですので、テーブルボーダーを太くすると、その分セル幅が縮まる事になります。
   
   
   
  Tips
ボーダー『0』設定について
テーブルボーダーは太くすることも出来ますが、ボーダーを見えなくする事も出来ます。ボーダー設定値に『0』を入力すると、ブラウザ上ではテーブルボーダーは表示されません。これは、ボーダーが見えなくなっただけで無くなった訳ではありません。太さが『0』ピクセルの見えないボーダーがあるのです。
 
ボーダー値を『0』にする事によって、ブラウザではテーブルボーダーが表示されなくなります。   Dreamweaverでは、編集の都合上ボーダー『0』に設定するとボーダーが点線で表示されます。これは、ホームページ作成においてボーダーが見えなくなるとテーブル編集が困難になるためです。

※Dreamweaverでボーダー『0』設定の場合の点線が見えなくなった場合。
 
通常、テーブルボーダーに『0』を設定にすると、Dreamweaver上ではボーダーが点線で表示されます。もし、テーブルボーダー『0』時に点線のボーダーが表示されない場合は右図の手順でボーダーを表示させて下さい。   メニューバー[表示]メニューより[ビジュアルエイド]を選択。リスト内の[テーブルボーダー]にチェックを入れると、通常どおりに点線ボーダーが表示されます。

ボーダー『0』設定の利用価値。
では、ボーダー『0』設定にしたテーブルはどんな時に使うのでしょうか?
ただ単に、ボーダーが見えなくなっただけではかえってテーブルは見づらくなってしまいます。しかし、ボーダー『0』は今後の節で学ぶ『余白と間隔』や『セルの色ボーダーの色』と組み合わせると、様々な表現が可能になります。
 
表のバリエーションも様々。上図は、テーブルボーダー『0』とセルの背景色を組み合わせた例。   工夫をすると、角が丸いテーブルなどの表現も可能となります。
     
  次へ