テーブルを使いこなそう

最も基本的なテーブル

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

• <TABLE> ... テーブル全体
• <TR> ... テーブルの１行
• <TD> ... テーブルの１マス

<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>

　　　↓

● ■ ▲ ○ □ △

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

CELLSPACING=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>

　　　↓

● ■ ○ □ ● ■ ○ □

※ テーブルを単にレイアウトの目的のみに使用することは、「HTMLの作法としては好ましくない」という人も居ますが・・・