<TABLE>タグの属性

一昔前はレイアウト用のタグとして使われることもありましたが、TABLE要素は表を表すためのものです。

枠組みを付加：border=値

段や列の区切りがわかりにくいテーブルに，border属性をつけて，表らしく枠組み（ボーダー）を付加します。

<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">内容１</TD>
<TD>内容２</TD>
<TR>
<TD>内容３</TD>
<TD>内容４</TD>
<TD>内容５</TD>
<TR>
</TABLE>

出力サンプル

ボーダーとセル内テキストとの隙間の調節：cellpadding="値"

ボーダーとセル内のテキストとの隙間を自由に調節するのがcellpadding=Xです。Xには整数が入り，X=0の指定をしたときが一番狭く，cellpaddingを付けないときがその次，X=1以降は数字が大きくなるにしたがって，隙間が広がります。

<TABLE cellpadding="値">

cellpadding属性の使い方

<TABLE border="51" cellpadding="10" >
<TD colspan="2">内容１</TD>
<TD>内容２</TD>
<TR>
<TD>内容３</TD>
<TD>内容４</TD>
<TD>内容５</TD>
<TR>
</TABLE>

出力サンプル

---

<TD>タグの属性

テキスト内の横位置：align="left | center | right"

align属性は表題(CAPTION)や、セル等の位置を指定します。テーブル内の左右の大きさは，列内の一番大きいものに合わせる形になりますから，文字数の少ないセルのテキストは，左端に揃えられます。

align = "center" align = "left" align = "right"

セル内の中央に表示 セル内で左寄せに表示 セル内で右寄せに表示

align属性の使い方

<TABLE border="1" hspace="15" vspace="5">
<TH>====LEFT====</TH> <TH>===CENTER===</TH> <TH>====RIGHT===</TH>
<TR>
<TD align="left">A</TD> <TD align="center">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"

セル内の上に表示 セル内で中央に表示 セル内で下に表示

valign属性の使い方

<TABLE border=1>
<TD height="50">上(TOP)</TD><TD valign="top">上に表示されてます？</TD>
<TR>
<TD height="50">中(MIDDLE)</TD><TD valign="middle">真ん中に表示されてます？</TD>
<TR>
<TD height="50">下(BOTTOM)</TD><TD valign="bottom">下に表示されてるでます？</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=**%>

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="**"%>

height属性を使ったサンプル

<TABLE border height="100">
<TR>
<TD>高さ15%</TD> <TD>アイテム</TD>
</TR>
<TR>
<TD>100</TD> <TD>1000</TD>
</TR>
<CAPTION align=bottom>表の高さの変更例</CAPTION>
</TABLE>

出力結果

---

セルの調節

複数行にわたるセルを作る：colspan="値"

セルが複数の縦行をまたがせるかを指定します。デフォルトの数は1です。 このタグはTHまたはTDで使用します。例えば、<TD colspan="2">は2列にまたがるセルを作成します。

<TD colspan=X>内容1</TD>

Xには，いくつかの横方向のセルにわたる数字を入れます。

colspan属性を使ったサンプル

<TABLE border="1">
<TD colspan="2">内容１</TD>
<TD>内容２</TD>
<TR>
<TD>内容３</TD>
<TD>内容４</TD>
<TD>内容５</TD>
<TR>
</TABLE>

出力結果

複数列にわたるセルを作る：rowspan="値"

rowspan属性はセルの列にまたがる数を指定できます。このタグはTHまたはTDで使用します。例えば、<TD rowspan="2">は2行にまたがるセルを作成します。

<TD rowspan=X>内容1</TD>

Xには，いくつかの縦方向セルの幅にわたる数字を入れます。

rowspan属性を使ったサンプル

<TABLE border="1">
<TD rowspan="2">内容１</TD>
<TD>内容２</TD>
<TD>内容３</TD>
<TR>
<TD>内容４</TD>
<TD>内容５</TD>
<TR>
</TABLE>

出力結果