●最後にテーブルの応用編にいきましょう。
テーブルの形が決まったら中に色を入れたり画像を置いてみましょう。
<TD ROWSPAN="行数"> ~ </TD>
ROWSPAN属性は複数行にまたがるセルを設定できます。
設定はまたがる行の一番上の<TR> ~ </TR>に設定します。
設定値には行数以上の数値また0、1は設定しないように。
<TD COLSPAN="行数"> ~ </TD>
ROWSPAN属性は複数の列にまたがるセルを設定できます。
設定値には行数以上の数値また0、1は設定しないように。
<TD BGCOLOR="色コードまたは色名"> ~ </TD>
セルの背景色を指定できます。色は色コードまたは色名で指定します。
<TD BACKGROUND="画像ファイル名(URLのみ)"> ~ </TD>
セルの背景に画像を貼りこみます。
前で作ったテーブルの指定を利用して作ってみましょう。
<TABLE border="1" CELLSPACING="2" CELLPADDING="2" WIDTH="70%" ALIGN="center">
<TR>
<TD COLSPAN="2" BACKGROUND="http://plaza.rakuten.co.jp/img/user/92/40/1939240/6.gif">
横に2行
</TD>
</TR>
<TR>
<TD BGCOLOR="pink">
■
</TD>
<TD BGCOLOR="pink">
■
</TD>
</TR>
<TR>
<TD BGCOLOR="pink">
■
</TD>
<TD BGCOLOR="pink">
■
</TD>
</TR>
<TR>
<TD ROWSPAN="3">
縦に3段
</TD>
<TD BGCOLOR="#228B22">
■
</TD>
</TR>
<TR>
<TD BGCOLOR="#228B22">
■
</TD>
</TR>
<TR>
<TD BGCOLOR="#228B22">
■
</TD>
</TR>
</TABLE>
こう指定すると以下のように表示されます。
あとは自分の思い通りのレイアウトに変えてみましょう。
|