<TR>,<TD>,<TH> の属性で表の細部の設計を指定する。<TD>,<TH> でのみ指定できるものと,<TR> でも指定できるものがある。<TR> でした場合はその列全体,<TD>,<TH> に指定した場合はそのセルにのみ有効となる。
まず,<TR>,<TD>,<TH> のいずれにも指定できる属性。
ALIGN="..." | 表のセルまたは列の行配置の指定。left,center,right が指定できる。 |
VALIGN="..." | 表のセルまたは列の縦配置の指定。top(上に詰めて),middle(中央に),bottom(下に詰めて)を設定する。 |
次に,HTML 3.2 にはない,Netscape Navigator 3.0 以降,Internet Explorer 2.0 以降で指定できる属性。
BGCOLOR="..." | 表のセルまたは列の背景色の指定。色の指定方法は Section 8 参照。 |
BACKGROUND="..." | 背景の画像の指定。URL を指定する。 |
それから,<TD>,<TH> でのみ指定できる属性。
WIDTH=... | セルの幅。ピクセル指定。 |
HEIGHT=... | 表のセルの高さ。長さはピクセル指定。行の中で1度だけ指定可。 |
NOWRAP | セル内で文字列が折り返されないようにする。本来の形は NOWRAP="nowrap" だが,この書き方は避けた方がよい。 |
COLSPAN=... | 横方向にいくつかのセルをまとめて1つのセルにする。 |
ROWSPAN=... | 縦方向にいくつかのセルをまとめて1つのセルにする。 |
それでは例を見ていただこう。
<TABLE BORDER> <TR ALIGN="center"> <TD ALIGN="left"left</TD> <TD>この列は特に指定しない限り<BR>center</TD> <TD ALIGN="right">right</TD> </TR> <TR> <TD>縦の配置を<BR>見てください。</TD> <TD VALIGN="top">top</TD> <TD VALIGN="bottom">bottom</TD> </TR> <TR BGCOLOR="#99CCFF"> <TD>BGCOLOR を変えました。</TD> <TD BGCOLOR="#CC99FF">セル単位でも変更可能</TD> <TD NOWRAP>このセルでは折り返しが抑制されています。</TD> </TR> <TR> <TD HEIGHT=100>この列は HEIGHT=100 です。</TD> <TD COLSPAN=2>2つのセルをつなげます。</TD> </TR> <TR> <TD ROWSPAN=2>縦につなげる場合,それ以降の行の記述に注意してください。</TD> <TD>中央のセル</TD> <TD>右のセル</TD> </TR> <TR> <TD><STRONG>中央</STRONG>のセル</TD> <TD><STRONG>右</STRONG>のセル</TD> </TR> </TABLE> |
ブラウザの幅などを変えて出力を確かめよう。
|
表について細かく指定していると,矛盾が生じてしまうことがある。このようなときは,ブラウザが整合性があるように適当に調節するが,表示に関して保証はない。
また,表組のレイアウトへの簡単な応用例は Let's try HTML の Section 9 を参照してほしい。