TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 細い枠線を指定する
細い枠線を指定する


表の枠線を、1ピクセルの細い線にしてみます。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。


 通常の枠線の場合は...
通常の枠線は、どんなに細く指定しても影のついた立体的な線で表示されます。

例えば、TABLEタグBORDER="1"CELLSPACING="0" を指定した場合は、次のように表示されます。

<TABLE BORDER="1" WIDTH="400" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>HP作成A</TD>
<TD>HP作成B</TD>
</TR>
<TR>
<TD>HP作成C</TD>
<TD>HP作成D</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

HP作成A HP作成B
HP作成C HP作成D

上記の表は、枠線を一番細く指定した例です。ちょっとわかりにくいかもしれませんが、表の枠線は2ピクセルで表示されています。

この枠線を更に細く(1ピクセルに)したい場合には、次のように指定します。


 指定方法
テーブル全体の背景色を指定すると同時に、セルの背景色も指定します。そうすることで、テーブル全体の背景色の部分が枠線として表示されます。

枠線の太さは CELLSPACING="" 、枠線の色はTABLEタグBGCOLOR="" 、 セルの背景色はTRタグBGCOLOR="" で指定します。

<TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="0" BGCOLOR="#1C79C6">
<TR BGCOLOR="#E3F0FB">
<TD>
WebデザインA</TD>
<TD>
WebデザインB</TD>
</TR>
<TR BGCOLOR="#E3F0FB">
<TD>
WebデザインC</TD>
<TD>
WebデザインD</TD>
</TR>
</TABLE>


・これをブラウザで見ると次のように表示されます

WebデザインA WebデザインB
WebデザインC WebデザインD

上記の例では、枠線の太さを 1 ピクセルに指定しています。


内容と枠線の間に余裕を持たせたい場合は、CELLPADDING="" を指定します。

<TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6">
<TR BGCOLOR="#E3F0FB">
<TD>
WebデザインA</TD>
<TD>
WebデザインB</TD>
</TR>
<TR BGCOLOR="#E3F0FB">
<TD>
WebデザインC</TD>
<TD>
WebデザインD</TD>
</TR>
</TABLE>


・これをブラウザで見ると次のように表示されます

WebデザインA WebデザインB
WebデザインC WebデザインD



ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲