Home / Index / Prev / Next
11.表のプロパティを設定する
作成した表の中にカー
ソルを置いてダブルクリックすると、[表のプロパティ]
ダイアログボックスが開きます。
[表のプロパティ]
ダイアログボックスの上にあるタブをクリックして、[表] を選択すれば、表全体のプロパティの設定、[セル]
を選択すれば、カーソルを置いた行・列・セルのプロパ
ティを設定することができます。
■ 表のプロパティ
上表の [表のプロパティ] ダイアログボックス開いてみました。
[行(R)]・[列(C)]・[幅(W)] および [枠線(B)] は、表を作る時に、[表の挿入]
ダイアログボックスで設定しましたが、この[表のプロパティ] ダイアログボックスで変更することができます。
[高さ(G)]
表の高さ（Height）を指定します。単位は、ウィンドウに対する割合を示す % か、ピクセル数を指定することができます。%
を指定すると、ウィンドウの大きさを変えた時、表の幅も変わります。また、高さを指定しなければ（空白にすれば）、表の高さは、表の中の文字数や文字の大
きさ
によって自動的に変わります。
[セルの間隔(S)]
セルとセルの間隔（CellSpacing）をピクセル数で指定します。デフォルトは 2 ピクセルで、値を空白にしても 2 ピクセルになります。
cellspacing="0"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellspacing="5"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellspacing="10"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellspacing="20"
1
|
2
|
3
|
4
|
5
|
6
|
|
[セルの余白(P)]
セルの内容とセルの枠との間隔（CellPadding）をピクセル数で指定します。デフォルトは 2 ピクセルで、値を空白にしても 2
ピクセルになります。
cellpadding="0"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellpadding="5"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellpadding="10"
1
|
2
|
3
|
4
|
5
|
6
|
|
|
cellpadding="20"
1
|
2
|
3
|
4
|
5
|
6
|
|
[表の配置(T)]
画面の幅に対する表の横位置を指定します。
デフォルトは [左] で、ソースは style="text-align: left;" です。
[中央] を選択すると、ソースは style="text-align: center;" となるはずですが、Composer
では、style="margin-left: auto; margin-right: auto; となるようです。margin は CSS
で余白を指定する時に使うプロパティで、margin プロパティは上下左右の余白、margin-left
プロパティは左余白、margin-right プロパティは右余白を指定するときに使います。
[右] を選択すると、 ソースは style="text-align: right;" となるはずですが、Composer
では、style="margin-left: auto; margin-right: 0px; となるようです。
[表題(N)]
表にタイトルを入れたい時に使います。
ドロップダウンリストから、[表の上] または [表の下] を選択すると、カーソルを置く場所ができ、タイトルを入力することができるようになります。
[表の左] または [表の右] を選択してもカーソルを置く場所はできないので、まず、[表の上]
を選択してタイトルを入力してから、再度[表のプロパティ] を開いて、[表の左] または [表の右]
を選択すれば、左右にタイトルをつけることができます。
表題は、<caption>要素で、デフォルトは表の上、表の下は "caption-side: bottom;"、 左は
"caption-side: left;"、右は "caption-side: right;" です。
|
|
|
|
|
|
|
|
デフォルト（指定なし）
|
|
style="caption-side:
bottom;" |
|
style="caption-side:
left;" |
|
style="caption-side:
right;" |
[背景色]
[背景色] をクリックすると [表の背景色] ダイアログボックスが開くので、好きな色を指定することができます。
■ セルのプロパティ
[セル] タブをクリックすると、行・列・セルのプロパティを設定することができます。
[選択]
ドロップダウンリストから、セル・行・列を選択し、カーソルが置いてあるセル、または、そのセルを含む行・列のプロパティを設定します。
[前へ(P)]・[次へ(N)]
は、カーソルが置いてあるセルの前または次のセルにプロパティを設定したい時にクリックします。クリックするごとに選択範囲が移動します。行あるいは列を
選択している時も同様に、前の行または次の行、前の列または次の列に選択範囲が移動します。
[サイズ]
セル・行・列の高さまたは幅を変えたい時に、ピクセル数または % （画面の大きさに対する比率）で指定します。
セルの高さを変えれば、そのセルが含まれる行の高さも変わり、セルの幅を変えれば、そのセルが含まれる列の幅も変わります（あたりまえ）。
表全体の高さや幅を指定していたり、同じ行（または列）で、違う高さ（または幅）を指定すると、画面上では、どこのセルにどの値を指定したのかわからなく
なり、思いどおりの高さ（または幅）にならないことがあります。うまくいかない
時は、一旦表を削除してやり直すか、HTML ソースを見て、セル毎に指定されている値を確認しながら修正しましょう。
<td style="width: 80px; height:
80px;">セルの内容</td>
高さ（height）および幅（width）は<td>要素に対して指定されます。列の高さを指定する場合は、列を表す<tr>
要素に対して指定すれば、そのプロパティは<td>要素にも継承されるのですが、Composer
では、指定した列（<tr>要素）の全てのセル（<td>要素）に指定するようです。
[配置]
セルの内容の [縦の配置] と [横の配置] を指定します。
試してみましたが、縦の配置はうまくいきませんでした（上のまま）。
うまくいけば、下表のようになります。
上/左
|
上/
中央
|
上/
右
|
中央/
左
|
中央/中央
|
中央/右
|
下/左
|
下/中央
|
下/右
|
うまくいかない時は HTML ソースを直接修正しちゃいます。
<td style="width: 80px; height: 80px; vertical-align: top;">上/左<
/td>
縦の配置で、上は vertical-align: top; 、中央は vertical-align: middle; 、下は
vertical-align: bottom; です。
上のソースでは、デフォルトが左（何も指定しなければ左）のため横の配置を指定していませんが、横の配置は、左が text-align:
left;、中央が text-align: center;、右が text-align: right; となります。
<td style="text-align:
right; vertical-align: bottom; width: 80px;">下/右</td>
縦
の配置
|
上
|
中
央
|
下
|
| vertical-align
|
top
|
middle
|
bottom
|
横
の配置
|
左
|
中
央
|
右
|
| text-align |
left
|
center
|
right
|
横の配置を指定するときは、ツールバーの
を
使えば簡単です。
横の配置に、「調整」という項目がありますが、これを選択すると text-align: jutify;
が挿入されます。justify は均等割付（両端揃え）を指定するプロパティ値ですが、うまく表示されないようです。均等割付は、ツールバーの
でも指定することが
できるはずですが、こちらもうまく表示されません。
[セルのスタイル]
標準または見出しを選択します。
見出しにしたセルはセルの中の文字列が太字になります。
| 品物 |
値段 |
個数 |
金額 |
りんご
|
200円
|
1個
|
200円
|
みかん
|
100円
|
3個
|
300円
|
バナナ
|
60円
|
4本
|
240円
|
見出しセルは、<td>要素ではなく、<th>要素になります。
<tr>
<th style="vertical-align: top;">品物<br></th>
<th style="vertical-align: top;">値段<br></th>
<th style="vertical-align: top;">個数<br></th>
<th style="vertical-align: top;">金額<br></th>
</tr>
style="vertical-align: top;"
はデフォルトで指定されていますが、行の高さが文字列の高さと同じ程度なので、指定する必要はありません。<br>は文字列を追加したい時の
ために、カーソルを置けるように入っています。
[テキストの折り返し]
セルの内容のテキストをセル幅に応じて折り返す（改行する）か、折り返さないかを選択します。
折り返し
表の幅を 100 ピクセルに指定しているので、100
ピクセルを超えないようにテキストが折り返されます。
|
折り返し禁止
| 表の幅を 100
ピクセルに指定していますが、折り返し禁止にしているので、文字数に応じて表の幅が広くなります。 |
[背景色]
[背景色] をクリックすると [セルの背景色] ダイアログボックスが開くので、好きな色を指定することができます。
背景色を指定するだけなら、書式ツールバーにある
の下のほうをクリックすれば [表またはセルの色] ダイアロ
グボックスが開くので、背景色を指定することができます。
Internet Explorer
Internet Explorer は、言わずと知れた Windows
に標準のブラウザで、インターネットをしている人の約90%の人が使っています。一方、Mozilla ブラウザは、最近 Firefox
の人気が出てきたましたが、Netscape と合わせても未だ10%にも満たない状況です。
HTML や CSS は、ブラウザによってプログラムの対応状況が異なるため、Composer で作ったホームページは、Mozilla
系のブラウザでは作ったとおりに見えますが、Internet Explorer
では意図したとおりに表示されない場合があります。したがって、Composer で作成した後、Internet Explorer
でもちゃんと表示されているか確認する必要があります。
Internet Explorer で確認するには、[アドレス(D)]
に、確認したいファイルのアドレスを入れるか、ツールバーの [ファイル(F)] → [開く(O)] で [ファイルを開く]
ダイアログボックスを開き、[参照(R)]
ボタンをクリックして確認したいファイルを選択すれば、ブラウザ画面に表示されます。
ちなみに、このホームページも Composer で作っていますので、Internet Explorer
ではちゃんと表示されていない部分があります。