テーブル（応用）

テーブルの線を消す
文字
<TABLE border="0">
<TBODY>
<TR>
<TD>文字</TD>
</TR>
</TBODY>
</TABLE>



テーブルを2ツ並べる
1
2
<TABLE border="0">
<TBODY><TR><TD>
<TABLE border="1">
<TBODY><TR><TD>1</TD></TR>
</TBODY></TABLE>
</TD><TD>
<TABLE border="1">
<TBODY><TR><TD>2</TD></TR>
</TBODY></TABLE>
</TD></TR></TBODY></TABLE>
線を消したテーブル内に1と2のテーブルを入れて並べています。



色付きテーブルを2ツ並べる
1
2
<TABLE border="0">
<TBODY><TR><TD>
<TABLE border="0"bgcolor="#ff9a63">
<TBODY>
<TR><TD>1</TD></TR>
</TBODY></TABLE>
</TD><TD>
<TABLE border="0" bgcolor="#00cf00">
<TBODY>
<TR><TD>2</TD></TR>
</TBODY></TABLE>
</TD></TR>
</TBODY></TABLE>



テーブルサイズを指定する
文字
<TABLE border="1" height="25" cellspacing="25">
<TBODY>
<TR>
<TD>文字</TD>
</TR>
</TBODY>
</TABLE>
25の部分でサイズが変わります。このページの様に同じサイズのテーブルを並べたいときに便利です。



セル内のサイズを指定する
文字
<TABLE border="1">
<TBODY>
<TR>
<TD width="50" height="50">文字</TD>
</TR>
</TBODY>
</TABLE>



テーブルをセルごとに色分けする
1 2
3 4
<TABLE border="0">
<TBODY>
<TR>
<TD bgcolor="#ffcccc">1</TD>
<TD bgcolor="#ccffcc">2</TD>
</TR>
<TR>
<TD bgcolor="#ffcc66">3</TD>
<TD bgcolor="#cc99ff">4</TD>
</TR>
</TBODY>
</TABLE>



テーブルの背景に画像を使用する
文字
<TABLE border="0" background="背景画像のURL">
<TBODY>
<TR><TD>文字</TD></TR>
</TBODY></TABLE>