border-widthプロパティとborder-styleプロパティ

border-widthプロパティは表の外枠の太さを指定します値は単位(px)をつけた数値の他、thin(細線)、medium(中太線)、thick(太線)。

border-styleプロパティは表の枠線のスタイルを指定します。値は、none(なにも無し)、solid(べた塗り)、double(二重線)、groove(立体線*くぼみ)、ridge(立体線*隆起)、inset(へこみ)、outset(盛りあがり)

枠線を表示(1px以上)する場合やborderプロパティ(まとめ指定)を使用する場合は、border-styleプロパティの値も記述します。これはborder-styleプロパティのデフォルト値がnone(非表示)のためです。

例)

<table style="border-width: 1px;border-style: solid;">
<tr><td>1972</td><td>1973</td></tr>
<tr><td>1974</td><td>1975</td></tr>
</table>

borderプロパティ(まとめて指定)
border: 1px solid;

table要素,border-styleプロパティ,border-widthプロパティ

※table要素にwidth: 300px;を指定。


border-widthプロパティborder-styleプロパティ


border-colorプロパティとborder-styleプロパティ

border-colorプロパティは表の外枠の色を指定します。値はRGB値、またはカラーネームを指定します。

border-styleプロパティは表の枠線のスタイルを指定します。値は、none(なにも無し)、solid(べた塗り)、double(二重線)、groove(立体線*くぼみ)、ridge(立体線*隆起)、inset(へこみ)、outset(盛りあがり)

枠線を表示(1px以上)する場合やborderプロパティ(まとめ指定)を使用する場合は、border-styleプロパティの値も記述します。これはborder-styleプロパティのデフォルト値がnone(非表示)のためです。

例)

<table style="border-color: #ff0000;border-style: solid;">
<tr><td>1972</td><td>1973</td></tr>
<tr><td>1974</td><td>1975</td></tr>
</table> borderプロパティ(まとめて指定)
border: 1px solid #ff0000;

table要素,bordercolor属性

※table要素にwidth: 300px;を指定。


border-colorプロパティborder-styleプロパティ

cellpadding属性

表のセル内の余白を指定します。値は単位(ピクセル)をつけない数値。指定がない場合の初期値は、多くの視覚ブラウザで 1ピクセルが指定されています。

例)

<table cellpadding="10">
<tr><td>1972</td><td>1973</td></tr>
</table>

table要素,cellpadding属性

※親要素にwidth: 301px;border: 1px solid #c0c0c0;、table要素にwidth: 300px;、td要素にborder: 1px solid #ff0000;を指定。

※代替指定
cellpadding属性をth要素,td要素にスタイルシートのpaddingプロパティを指定することで代替指定できます。

例)

padding: 10px;


cellspacing属性

表のセルとセルの間の余白を指定します。値は単位(ピクセル)をつけない数値。指定がない場合の初期値は、多くの視覚ブラウザで 2ピクセルが指定されています。

例)

<table cellspacing="10">
<tr><td>1972</td><td>1973</td></tr>
</table>

table要素,cellspacing属性

※親要素にwidth: 301px;border: 1px solid #c0c0c0;、table要素にwidth: 300px;、td要素にborder: 1px solid #ff0000;を指定。赤色の枠とグレーの枠の領域がcellspacing属性の領域です。

※代替指定
cellspacing属性はborder-spacingプロパティで代替指定できますが未対応のブラウザが多いです。cellspacing属性は非推奨属性ではありませんので無理に代替指定しなくても良いでしょう。

例)

border-spacing: 10px;


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system