表(TABLE)を作る

表の作成

テーブルは、たんに表を作るときだけではなく、レイアウトを固定したいときや、段組みなどの複雑なレイアウトをとりたいときなど、アイデア次第でさまざまな利用ができる。

【例】

</TABLE>

▼

A	B	C
あ	い	う

テーブルは、セル・行・テーブルの範囲をネスティングして作っていく。
<TABLE>～</TABLE>で囲まれた範囲がテーブルになる。
<TR>～</TR>で囲まれた範囲が1行に並べられる。
<TD>～</TD>で囲まれた範囲が1つのセルに入る。

表の大きさを指定する

この指定をしなかった場合、ブラウザの幅によって表の大きさが変わるので、表の大きさを固定したいときにこの指定を行なう。
<TABLE>タグにWIDTH="X"を属性として指定すると表全体の横幅を固定できる。
<TABLE>タグにHEIGHT="X"を属性として指定すると表全体の横幅を固定できる。
行のみ、セルのみに適用したい場合には、それぞれ<TR>、<TD>の属性として指定する。
Xの値は、ピクセル数または%で指定する。

【例1】表の横幅を80ピクセル、縦幅を80ピクセルに指定した場合

</TABLE>

▼

A	B	C
あ	い	う

枠線をつける

<TABLE>タグにBORDER="X"を属性として指定すると表の枠線が描かれる。
Xの数値を0にすると、枠線がすべて見えなくなる。
Xの数値を大きくすると太い枠線が描かれるが、BORDER="X"で設定できるのは、外枠の太さだけである。

【例】

</TABLE>

▼

A	B	C
あ	い	う

外枠の線(立体感をだすための影の部分)の太さは「BORDER="10"」によって太く（グレーの部分）なっているが、内側の枠線は、細い（白い部分）ままになっている。

内側の線の太さは、「CELLSPACING="X"」を<TABLE>タグのアトリビュートとして指定する。

【例】外枠の太さを1、内枠の太さを10に指定した場合

</TABLE>

▼

A	B	C
あ	い	う

セル内のテキストに余白をとる

<TABLE>タグにCELLPADDING="X"を属性として指定すると、セルの端からテキストまでの距離が設定できる。
Xの値は、ピクセル数。

【例】セルの余白を10ピクセルとる。

</TABLE>

▼

A	B	C
あ	い	う

セルの中のテキストの位置を決める

横の位置は、「ALIGN="X"」を<TD>タグの属性として指定する。

<TD>タグの属性としても指定できる。この場合は、その行のすべてのセルがこの指定にしたがう(したがって、<TD>タグに指定する必要はない)。
Xには、left(左揃え)、center(中揃え)、right(右揃え)が入る。

縦の位置は、「VALIGN="X"」を<TD>タグの属性として指定する。
- <TD>タグのアトリビュートとしても指定できる。この場合は、その行のすべてのセルがこの指定にしたがう(したがって、<TD>タグに指定する必要はない)。
- Xには、top(上揃え)、middle(中揃え)、bottom(下揃え)が入る。
ALIGN="X"とVALIGN="X"は同時に使用できる。

【例】1行目は横位置の指定、2行目は縦位置の指定をした。また、3行目は、すべてのセルを右の下揃えに指定した。

▼

A	B	C
あ	い	う
D	E	F

セルの中のテキストを折り返さないようにする

「NOWRAP」を<TD>タグの属性として指定する。

【例】「NOWRAP」を指定しない場合

<TABLE BORDER="1" WIDTH="80">
<TR>
<TD > ABC </TD>
<TD > DEF </TD>
</TR>
<TR>
<TD > GHI </TD>
<TD > NOWRAPを指定するかしないかで、
テキストの折り返しがどうなるか比べてみよう。 </TD>
</TR>
</TABLE>

▼

ABC	DEF
GHI	NOWRAPを指定するかしないかで、テキストの折り返しがどうなるか比べてみよう。

【例】「NOWRAP」を指定した場合

<TABLE BORDER="1" WIDTH="80">
<TR>
<TD > ABC </TD>
<TD > DEF </TD>
</TR>
<TR>
<TD > GHI </TD>
<TD NOWRAP> NOWRAPを指定するかしないかで、
テキストの折り返しがどうなるか比べてみよう。 </TD>
</TR>
</TABLE>

▼

ABC	DEF
GHI	NOWRAPを指定するかしないかで、テキストの折り返しがどうなるか比べてみよう。

表のセルに色をつける

セルの背景色を指定するアトリビュート。
BGCOLOR="#X"を<TD>タグ(そのセルの背景色)、<TR>タグ(その行のすべてのセルの背景色)、<TABLE>タグ(その表のすべてのセルの背景色)のアトリビュートとして指定する。
Xには16進数で色を指定する(カラーチャート参照)。

【例】1行目第2列のセルを青に、2行目のセルを赤に指定する場合

▼

A	B	C
あ	い	う

複雑な表を作る

表を作っていると、複数のセルを1つのセルに結合したい場合が出てくる。このようなときに用いるアトリビュートである。
横方向(列)のセルを結合したいときは、COLSPAN="X"を<TD>タグのアトリビュートとして指定する。
縦方向(行)のセルを結合したいときは、ROWSPAN="X"を<TD>タグのアトリビュートとして指定する。
COLSPAN="X"とROWSPAN="X"は、同時に使用できる。
Xには、結合するセルの数を指定する。

【例】横方向に3セル分、縦方向に3セル分の大きなセルを1つ含む表

▼