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

■ テーブル全体の属性(1)

<table> タグにプロパティを指定することで、テーブル全体の属性を決めることができます。

タグ名プロパティ説明
<table>〜</table>border枠線を引く
ピクセル数外枠線の太さを指定する
bordercolor#rrggbb枠線の色を指定。rr、gg、bb は 00〜ff
カラーネームred、green、blue など
bordercolorlight#rrggbb上と左枠線の色を指定
カラーネームred、green、blue など
bordercolordark#rrggbb下と右枠線の色を指定
カラーネームred、green、blue など
bgcolor#rrggbb背景色を指定。rr、gg、bb は 00〜ff
カラーネームred、green、blue など
backgroundファイル名背景画像を指定する
widthピクセル数表の幅を指定する
幅をウィンドウに対する比率で指定
heightピクセル数表の高さを指定する
高さをウィンドウに対する比率で指定
cellspacingピクセル数セルの間隔を指定する
cellpaddingピクセル数マージンを指定する
alignleft表の位置、左(デフォルト)
center表の位置、中央
right表の位置、右

◆枠線を引く

枠線を引くのは border 属性です。

<table border>
<tr><td>01.</td><td>A Song for XX</td></tr>
<tr><td>02.</td><td>Trust</td></tr>
<tr><td>03.</td><td>Depend on you</td></tr>
</table>

01.A Song for XX
02.Trust
03.Depend on you


◆外枠線の太さを指定する

border 属性にピクセル数を指定すれば、外枠線の幅を変えることができます。

<table border="1">

01.A Song for XX
02.Trust
03.Depend on you

<table border="3">

01.A Song for XX
02.Trust
03.Depend on you

<table border="5">

01.A Song for XX
02.Trust
03.Depend on you

<table border="0">

01.A Song for XX
02.Trust
03.Depend on you


◆枠線の色を指定する

bordercolor 属性で枠線の色を指定します。

<table border bordercolor="#0000ff">

01.A Song for XX
02.Trust
03.Depend on you

<table border="5" bordercolor="#ff00ff">

01.A Song for XX
02.Trust
03.Depend on you

<table border="10" bordercolor="green">

01.A Song for XX
02.Trust
03.Depend on you

bordercolorlight 属性、 bordercolordark 属性を使うと、上と左、下と右の色を使い分けることができます。表を立体的に見せることができますね。

<table border="7" bordercolorlight="#66ccff" bordercolordark="#0000ff">

01.A Song for XX
02.Trust
03.Depend on you


◆表の背景色を指定する

bgcolor 属性で表の背景色を指定します。

<table bgcolor="#ffccff">

01.A Song for XX
02.Trust
03.Depend on you

<table border bgcolor="yellow">

01.A Song for XX
02.Trust
03.Depend on you


◆表の背景画像を指定する

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

<table background="checkers_plum.gif">

01.A Song for XX
02.Trust
03.Depend on you


 Home < 超初心者のためのホームページ作成講座 < テーブル講座 < Back < テーブル全体の属性1 > Next