超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ セルの属性(1)

<td> タグにプロパティを指定すれば、セルひとつひとつの属性を決めることができます。

タグ名プロパティ説明
<td>〜</td>bgcolor#rrggbb背景色を指定。rr、gg、bb は 00〜ff
カラーネームred、green、blue など
backgroudファイル名背景画像を指定する
widthピクセル数セルの幅を指定する
幅をウィンドウに対する比率で指定
heightピクセル数セルの高さを指定する
高さをウィンドウに対する比率で指定
alignleftテキストの位置、左(デフォルト)
center中央
right
valigntopテキストの位置、上
middle中央(デフォルト)
bottom
rowspan連結するセル数セルを縦に連結する
colspan連結するセル数セルを横に連結する

◆セルの背景色を指定する

bgcolor 属性を使えば、セルひとつひとつに背景色を指定することができます。

<table border>
<tr>
<td bgcolor="#ffccff">04.</td>
<td bgcolor="#ffffcc">LOVE 〜Destiny〜</td>
</tr>
<tr>
<td bgcolor="fuchsia">05.</td>
<td bgcolor="ffee66">TO BE</td>
</tr>
<tr>
<td bgcolor="red">06.</td>
<td bgcolor="orange">Boys & Girls</td>
</tr>
</table>

04. LOVE 〜Destiny〜
05. TO BE
06. Boys & Girls


◆セルの背景画像を指定する

background 属性でセルの背景に画像を挿入します。
値にはイメージファイルの URL を指定します。
3行目の2列目のセルの背景にこの画像 背景画像 ファイル名:checkers_plum.gif を挿入してみます。

<table border>
<tr>
<td>04.</td>
<td>LOVE 〜Destiny〜</td>
</tr>
<tr>
<td>05.</td>
<td>TO BE</td>
</tr>
<tr>
<td>06.</td>
<td background="checkers_plum.gif">Boys & Girls</td>
</tr>
</table>

04. LOVE 〜Destiny〜
05. TO BE
06. Boys & Girls


◆セルの大きさを指定する

width 属性と height 属性を使ってセルの大きさを指定します。

下の例は、1列目の幅50ピクセル、2列目の幅200ピクセル、1行目の高さ50ピクセル、2行目の高さ75ピクセル、3行目の高さ100ピクセルです。

<table border>
<tr>
<td width="50" height="50">04.</td>
<td width="200">LOVE 〜Destiny〜</td>
</tr>
<tr>
<td height="75">05.</td>
<td>TO BE</td>
</tr>
<tr>
<td height="100">06.</td>
<td>Boys & Girls</td>
</tr>
</table>

04.LOVE 〜Destiny〜
05.TO BE
06.Boys & Girls

さて、同じ行に違う高さを入れた場合はどうなるのでしょう?
1行目の1列目のセルは高さ20ピクセル、2列目は高さ50ピクセルを指定しました。
また、2行目は逆に、1列目のセルは高さ50ピクセル、2列目は高さ20ピクセルとしています。
結果は、1行目も2行目も、高さは50ピクセルになっています。
次に、同じ列に違う幅を指定した場合。
1行目の1列目のセルは幅50ピクセル、2行1列目は幅150ピクセル、3行1列目は幅100ピクセルを指定しました。
結果は、150ピクセルになっています。
どうやら、幅も高さも、一番大きい値が採用されるようですね。

<table border>
<tr>
<td width="50" height="20">04.</td>
<td width="200" height="50">LOVE 〜Destiny〜</td>
</tr>
<tr>
<td width="150" height="50">05.</td>
<td width="100" height="20">TO BE</td>
</tr>
<tr>
<td width="100">06.</td>
<td width="100" height="50">Boys & Girls</td>
</tr>
</table>

04.LOVE 〜Destiny〜
05.TO BE
06.Boys & Girls