超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > Netscape6でホームページをつくろう! > テーブル(2) > Next 

■ テーブル(2)

前のページでは、テーブル全体に適用されるプロパティを指定する方法を説明しました。
今度は、表の中の、セル、行、列ごとにプロパティを指定していきます。

前のページで開いた[表のプロパティ]ダイアログボックスには、[表]タブと[セル]タブがついています(タブ:上についているインデックスのようなもの)。
セル、行、列ごとにプロパティを指定するときは、[セル]タブをクリックします。

表のプロパティダイアログボックス(セルタブ)

1.選択範囲
プルダウンメニューから、[セル]、[行]、[列]のいずれかを選択します。
プロパティを指定したいセルを移動するには、[前へ]または[次へ]をクリックします。行や列の間を移動するときも同様です。


2.サイズ
選択したセルだけ、行だけ、あるいは列だけの[高さ]または[幅]を指定します。数値を入力して、[パーセント/表]または[ピクセル]を選択します。
前のページのサンプルはこうでした。テーブル全体の幅だけ500ピクセルに指定しています。

1.left-top
2.center-top
3.right-top
4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

3つ目のセル(3.right-top)の高さを 100 ピクセル、5つ目のセル(5.center-middle)の幅を 200 ピクセルにしてみました。
セルの高さを変えれば、そのセルと同じ行にあるセルの高さも同じように変わります。
幅を変えれば、同じ列にあるセルの幅も変わります。

1.left-top
2.center-top
3.right-top
4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

[行の幅]というのは、指定したセルの縦を何行分にするかということです。
これを「セルの縦連結」といいます。値は 1 〜 3 を指定できます。
ここでは、1つ目のセルの行の幅を 2 にしてみました。

1.left-top
2.center-top
3.right-top

4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

[列の幅]というのは、指定したセルの横を何列分にするかということです。
これは「セルの横連結」です。こちらも値は 1 〜 3 です。
今度は、4つ目のセルの列の幅を 3 にしてみました。

1.left-top
2.center-top
3.right-top


4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom


この、セルの縦連結・横連結を覚えるとページのレイアウトの可能性が広がりますので、是非とも覚えて下さい。


3.コンテンツの配置
セル内のテキストの配置を指定します。
わかりやすいように、セルの大きさを少し大きくしますね。
[横]位置、[縦]位置を指定します。

1.left-top
2.center-top
3.right-top
4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

4.セルスタイル
デフォルトは[標準]ですが、プルダウンメニューから[ヘッダー]を選択すると、指定したセルは太字でセンタリングされます。
これは、表の中で、行や列の見出しを指定するときに使います。
上の1行をヘッダー指定してみました。

1.left-top
2.center-top
3.right-top
4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

5.テキストの折り返し
テーブルの大きさは、セル内のテキストの長さによって、ブラウザが自動的に調節します。
その際、テキストを適当なところで改行するときがありますが、改行されたくないときは、ここで[折り返しなし]を選択します。


6.背景色
セル、行、列ごとに背景色を指定することができます。
クリックすると、[セルの背景色]ダイアログボックスが開きますので、カラーパレットから適当な色を選択します。
または、 指定したいセルにカーソルを移動して、背景色の指定アイコン の下の方(白い方)をクリックすれば、[表またはセルの色]ダイアログボックスが開きますので、そこで選択することもできます。

1.left-top
2.center-top
3.right-top
4.left-middle
5.center-middle
6.right-middle
7.left-bottom
8.center-bottom
9.right-bottom

 Home < Netscape6でホームページをつくろう! < Back < Composerの起動 > Next