<TABLE>タグの属性
FrontPageなんかのホームページ製作ソフトがお利巧さんになった現在も、テーブルのおかげで手作業でのHTML書きが発生することがしばしば。憎いけど、こいつがなくちゃ始まらないときもあるから、無視するわけにもいかず。
枠組みを付加:border=値
段や列の区切りがわかりにくいテーブルに,border属性をつけて,表らしく枠組み(ボーダー)を付加します。
なお、 Netscape Navigator ではvalueで罫線の幅をピクセル単位で指定できます。
<TABLE border=1>
<TH>ヘッダ1</TH><TH>ヘッダ2</TH><TH>ヘッダ3</TH>
<TR>
<TD>内容</TD><TD>内容</TD><TD>内容</TD>
<TR>
<TD>内容</TD><TD>内容</TD><TD>内容</TD>
<CAPTION>表に枠組みを付加</CAPTION>
</TABLE>
ボーダー水平幅の調節:cellspacing="値"
cellspacing属性はセルの周りを囲む罫線幅を指定します。デフォルトでは2つのスペースです。Xには整数が入ります。cellspacingを指定しないデフォルト状態では,X=2の太さで表示されますから,デフォルト状態より細かくしたいときは,X=0ないし1を指定します。
<TABLE cellspacing="値">
<TABLE border=5 cellspacing=10 >
<TD colspan=2>内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>
ボーダーとセル内テキストとの隙間の調節:cellpadding="値"
ボーダーとセル内のテキストとの隙間を自由に調節するのがcellpadding=Xです。Xには整数が入り,X=0の指定をしたときが一番狭く,cellpaddingを付けないときがその次,X=1以降は数字が大きくなるにしたがって,隙間が広がります。
<TABLE cellpadding="値">
<TABLE border=51 cellpadding=10 >
<TD colspan=2>内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>
<TD>タグの属性
テキスト内の横位置:align="left | center | right"
align 属性は表題(CAPTION)や、セル等の位置を指定します。テーブル内の左右の大きさは,列内の一番大きいものに合わせる形になりますから,文字数の少ないセルのテキストは,左端に揃えられます。
| align = "center" align = "left" align = "right" |
セル内の中央に表示 セル内で左寄せに表示 セル内で右寄せに表示 |
<TABLE border=1 HSPACE=15 VSPACE=5>
<TH>====LEFT====</TH> <TH>===CENTER===</TH> <TH>====RIGHT===</TH>
<TR>
<TD align=left>A</TD> <TD>B</TD> <TD align=right>C</TD>
<CAPTION>表本体の位置</CAPTION>
</TABLE>
セル中テキストの縦位置:valign="top | middle | bottom"
TR, TH, TDタグで指定できるvalign属性はセル中のテキス トや図の縦位置を制御します。位置は上(top)、下(bottom)、 中央(middle)、ベースライン(baseline)が指定できます。デフォ ルト位置は中央寄せ(middle)です。
| valign = "top" valign = "middle" valign = "bottom" |
セル内の上に表示 セル内で中央に表示 セル内で下に表示 |
<TABLE border=1>
<TD>上(TOP)<BR><BR><BR></TD><TD valign="TOP">上に表示されてます?</TD><TD></TD>
<TR>
<TD>中(MIDDLE)<BR><BR><BR></TD><TD valign="MIDDLE">真ん中に表示されてます?</TD><TD></TD>
<TR>
<TD>下(BOTTOM)<BR><BR><BR></TD><TD valign="BOTTOM">下に表示されてるでしょ?</TD><TD></TD>
</TABLE>
nowrap
※この属性は廃止される予定です。
表は各セルのテキスト長とブラウザのウィンドウ幅を考慮して、うまく収まるようにセル幅が決められます。そのため、テキストが任意の位置で改行されてしまいます。THまたはTDタグで指定できるnowrap属性はセル内のテキストを改行させたくない場合に用います。nowrapを指定したセル中のテキストを改行させるには、 <BR>タグを用います。この方法を使用してユーザが改行させたい場所で改行を指定できます。
次のソースコードは標準のテーブルです。
<TABLE border=1 width=30%>
<TD>AAAAAAAAAAAAAAAAAAAAAAAAAAA</TD>
</TABLE>
次のソースコードはnowrapを使用しています。
<TABLE border=1 width=30%>
<TD nowrap>AAAAAAAAAAAAAAAAAAAAAAAAAAA</TD>
</TABLE>
テーブル幅の調節:width="値"
width属性は表全体の幅やセル毎に幅を指定するために、THまたはTDでも指定します。幅はピクセル的な幅あるいは 書類サイズの割合(パーセンテージ)で指定します。指定された幅が、この表を 作るのに必要な幅以下の場合は、無視されます。
指定例は次のとおりです。
<TABLE width=**%>
<TABLE border width="50%">
<TR>
<TD width="70%">70%幅</TD><TD width="30%">30%幅</TD>
</TR>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
<CAPTION align=bottom>表の幅の変更例</CAPTION>
</TABLE>
テーブルの高さの調節:height="値"
height属性は表全体の高さやセル毎に高さを指定するために、THまたはTDで指定します。高さはピクセル的な高さあるい
は書類サイズの割合(パーセンテージ)で指定します。指定された高さが、この表を作るのに必要な高さ以下の場合は、無視されます。
指定例は次のとおりです。
<TABLE height=**%>
<TABLE border width="50%"
height="15%">
<TR>
<TD>高さ15%</TD> <TD>アイテム</TD>
</TR>
<TR>
<TD>100</TD> <TD>1000</TD>
</TR>
<CAPTION align=bottom>表の高さの変更例</CAPTION>
</TABLE>
セルの調節
複数行にわたるセルを作る:colspan="値"
セルが複数の縦行をまたがせるかを指定します。デフォルトの数は1です。 このタグはTHまたはTDで使用します。下記の例では <TH colspan=2>というタグが縦2列にまたがるセルで、次の 横2列のセル分を意味します。
<TD colspan=X>内容1</TD>
Xには,いくつかの横方向のセルにわたる数字を入れます。
<TABLE border=1>
<TD rowspan=2>内容1</TD>
<TD>内容2</TD>
<TD>内容3</TD>
<TR>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>
複数列にわたるセルを作る:rowspan="値"
セルが複数の横行をまたがせるかを指定します。デフォルトの数は1です。 このタグはTHまたはTDで使用します。下記の例では <TD rowspan=2>というタグが横2列にまたがるセルで、次の 縦2列のセル分を意味します。
<TD rowspan=X>内容1</TD>
Xには,いくつかの縦方向セルの幅にわたる数字を入れます。
<TABLE border=1>
<TD colspan=2>内容1</TD>
<TD>内容2</TD>
<TR>
<TD>内容3</TD>
<TD>内容4</TD>
<TD>内容5</TD>
<TR>
</TABLE>