Purple town

最終章

その１ | その２ | その３ | その４ | その５ | 最終章 | 応用編はその１から |

簡単タグ講座　その６　テーブルをもっと賑やかに

●最後にテーブルの応用編にいきましょう。
テーブルの形が決まったら中に色を入れたり画像を置いてみましょう。

<TD　ROWSPAN="行数">　～　</TD>
ROWSPAN属性は複数行にまたがるセルを設定できます。
設定はまたがる行の一番上の<TR>　～　</TR>に設定します。
設定値には行数以上の数値また０、１は設定しないように。

<TD　COLSPAN="行数">　～　</TD>
ROWSPAN属性は複数の列にまたがるセルを設定できます。
設定値には行数以上の数値また０、１は設定しないように。

<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" >
横に２行
</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" >
縦に３段
</TD>
<TD BGCOLOR="#228B22" >
■
</TD>
</TR>
<TR>
<TD BGCOLOR="#228B22" >
■
</TD>
</TR>
<TR>
<TD BGCOLOR="#228B22" >
■
</TD>
</TR>
</TABLE>

こう指定すると以下のように表示されます。

横に２行

■

縦に３段

■

あとは自分の思い通りのレイアウトに変えてみましょう。

ジャンル別一覧