テーブルを使いこなそう

HOME > とほほのWWW入門 > とほほのホームページ入門 > テーブルを使いこなそう
1998年7月19日版

最も基本的なテーブル

テーブルを作成するには主に次のタグを用います。

<TABLE BORDER=1>
<TR><TD>●</TD><TD>■</TD><TD>▲</TD></TR>
<TR><TD>○</TD><TD>□</TD><TD>△</TD></TR>
</TABLE>
   ↓

項目を連結するには

<TD COLSPAN=n>を用いると、右方向にn個の項目を連結することができます。

<TABLE BORDER=1>
<TR><TD COLSPAN=2>●</TD><TD>▲</TD></TR>
<TR><TD>○</TD><TD>□</TD><TD>△</TD></TR>
</TABLE>
   ↓

<TD ROWSPAN=n>を用いると、縦方向にn個の項目を連結することができます。

<TABLE BORDER=1>
<TR><TD ROWSPAN=2>●</TD><TD>■</TD><TD>▲</TD></TR>
<TR><TD>□</TD><TD>△</TD></TR>
</TABLE>
   ↓

立体感のあるテーブルを作成するには

BORDER=nを指定することにより、テーブルの枠線を立体感のあるものにすることができます。

<TABLE BORDER=8>
<TR><TD>●</TD><TD>■</TD><TD>▲</TD></TR>
<TR><TD>○</TD><TD>□</TD><TD>△</TD></TR>
</TABLE>
   ↓

立体感の無いテーブルを作成するには

CELLSPAN=0を指定することにより、テーブルの枠線を立体感の無いものにすることができます。

<TABLE BORDER=1 CELLSPACING=0>
<TR><TD>●</TD><TD>■</TD><TD>▲</TD></TR>
<TR><TD>○</TD><TD>□</TD><TD>△</TD></TR>
</TABLE>
   ↓

色付きのテーブル

テーブルに色をつけることができます。ただし、ブラウザのバージョンによってはサポートしていないので注意しましょう。

<TABLE BORDER=1 BORDERCOLOR=red>
<TR BGCOLOR="#FFCCCC"><TD>●</TD><TD>■</TD></TR>
<TR><TD BGCOLOR="#CCCCFF">○</TD><TD>□</TD></TR>
</TABLE>
   ↓

テーブルを横方向に並べるには

テーブルを二重に囲んでやることで、テーブルを横方向に配置することができます。このテクニックはテーブルに限らず、他のテキストの配置にも応用(※)することができます。

<TABLE>
<TR><TD>
<TABLE BORDER=1>
<TR><TD>●</TD><TD>■</TD></TR>
<TR><TD>○</TD><TD>□</TD></TR>
</TABLE>
</TD><TD>
<TABLE BORDER=1>
<TR><TD>●</TD><TD>■</TD></TR>
<TR><TD>○</TD><TD>□</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
   ↓

※ テーブルをテーブルとしてではなく、単に配置の目的に使用することは「好ましくない」という意見もありますが...


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )