|
・・・ テーブルの基本知識・・・
以下がテーブルでよく使われるアトリビュートである：
<TABLE>...</TABLE>
- WIDTH=#： テーブルの幅をピクセル数、もしくはパーセントで指定。
- HEIGHT=#： テーブルの高さをピクセル数、もしくはパーセントで指定。
- CELLSPACING=#： セルの間の感覚をピクセル単位で指定。
- CELLPADDING=#： セルの中身と、セルの境界との距離をピクセル単位で指定。
- BORDER=#： テーブルの枠の太さをピクセル単位で指定。
- BGCOLOR="..."： テーブル全体の背景色を指定。
<TD> ... </TD>
- ALIGN="..."： セルの中身を"RIGHT"で右に寄せるか、"LEFT"で左に寄せるか、"CENTER"で中央に寄せるかを指定。
- VALIGN="..."： セルの中身を"TOP"で上に寄せるか、"BOTTOM"で下に寄せるか、"MIDDLE"で中央に寄せるかを指定。
- WIDTH=#： セルの幅をピクセル数、もしくはパーセントで指定。
- HEIGHT=#： セルの高さをピクセル数、もしくはパーセントで指定。
- ROWSPAN="..."： セルが隣のセルと比べて、何個分かを指定。
- COLSPAN="..."： セルが上下のセルと比べて、何個分かを指定。例えば、上の行にセルが二個ある場合、COLSPAN=2 にすることで、上の二個分の幅のセルができる。これで指定しないと、幅一個分のセルと、幅一個分の空欄ができる。
- BGCOLOR="..."：セルの背景色を指定。
- NOWRAP： セル内の文の改行を阻止する。
例４）BORDER： テーブルの境界線の太さを指定できる。実際に表を作る場合は見えた方が良いかもしれないが、ページ全体のレイアウトなどに利用している場合は、隠してしまおう。尚、ネットスケープとＩＥでは境界線の外見が少々異なる。
<table border=0>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
</table>
|
|
<table border=10>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
</table>
|
|
例５）COLPANとROWSPAN： COLSPANはセルの幅を上下のセルと比較して、何個分にするかを指定するので結構使いやすい。少々難解なのがROWSPANの方で、これはセルの高さを左右と比較して何個分にするかを指定するのだが、下へとセルを広げることしかできない。テーブルを作る場合は、まず構造をスケッチして、無題のHTML文書にでもそのテーブルをまず作ってみるといい。でも慣れるまでは試行錯誤になるだろう。
<table border=2>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
<tr>
<td colspan=2>内容３</td>
</tr>
</table>
|
|
<table border=2>
<tr>
<td>内容１</td>
<td>内容２</td>
<td rowspan=2>内容３</td>
</tr>
<tr>
<td>内容４</td>
<td>内容５</td>
</tr>
</table>
|
|
例６）CELLPADDING と CELLSPACING： 「セルパッディング」、「セルスペーシング」と読むが、前者はセル内部のテキストと境界線との間隔を、後者はセル外部のセルとセルとの間隔を指定する。
<table border=2 cellpadding=20>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
<tr>
<td>内容３</td>
<td>内容４</td>
</tr>
</table>
|
|
<table border=2 cellspacing=20>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
<tr>
<td>内容３</td>
<td>内容４</td>
</tr>
</table>
|
|
<table border=0 cellspacing=20>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
<tr>
<td>内容３</td>
<td>内容４</td>
</tr>
</table>
|
|
<table border=1 cellspacing=0 cellpadding=10>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
<tr>
<td>内容３</td>
<td>内容４</td>
</tr>
</table>
|
|
|
