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

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

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

< HOME / ホームページ作成ガイド / 1行おきに背景色を変える
1行おきに背景色を変える


表の背景色を、1行おきに変えてみます。

1行おきに背景色の濃さを変更しておくと、行数の多い表などでは行のラインが判別しやすくなります。

ここでは、「細い枠線を指定する」で作成した表をベースにして、変更を加えてみます。

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


 指定方法
行の背景色は、TRタグBGCOLOR="" で指定します。

次の例では、奇数の行を #C9E2F8(やや濃い色)、偶数の行を #E3F0FB(やや薄い色)で指定しています。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="3" BGCOLOR="#1C79C6">

<TR BGCOLOR="#C9E2F8">
<TH WIDTH="33%">
ホスティング</TH>
<TH WIDTH="34%">
ホームページ</TH>
<TH WIDTH="33%">
SEO対策</TH>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーA社</TD>
<TD>
HP作成A社</TD>
<TD>
運営管理A社</TD>
</TR>

<TR BGCOLOR="#C9E2F8">
<TD>
サーバーB社</TD>
<TD>
HP作成B社</TD>
<TD>
運営管理B社</TD>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーC社</TD>
<TD>
HP作成C社</TD>
<TD>
運営管理C社</TD>
</TR>

<TR BGCOLOR="#C9E2F8">
<TD>
サーバーD社</TD>
<TD>
HP作成D社</TD>
<TD>
運営管理D社</TD>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーE社</TD>
<TD>
HP作成E社</TD>
<TD>
運営管理E社</TD>
</TR>

</TABLE>


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

ホスティング ホームページ SEO対策
サーバーA社 HP作成A社 運営管理A社
サーバーB社 HP作成B社 運営管理B社
サーバーC社 HP作成C社 運営管理C社
サーバーD社 HP作成D社 運営管理D社
サーバーE社 HP作成E社 運営管理E社


表の枠線を消すと次のように表示されます。

上記の表から枠線を消すには、TABLEタグBGCOLOR="" を削除して、CELLSPACING=""0 に指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="3">

<TR ALIGN="left" BGCOLOR="#C9E2F8">
<TH WIDTH="33%">
ホスティング</TH>
<TH WIDTH="34%">
ホームページ</TH>
<TH WIDTH="33%">
SEO対策</TH>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーA社</TD>
<TD>
HP作成A社</TD>
<TD>
運営管理A社</TD>
</TR>

<TR BGCOLOR="#C9E2F8">
<TD>
サーバーB社</TD>
<TD>
HP作成B社</TD>
<TD>
運営管理B社</TD>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーC社</TD>
<TD>
HP作成C社</TD>
<TD>
運営管理C社</TD>
</TR>

<TR BGCOLOR="#C9E2F8">
<TD>
サーバーD社</TD>
<TD>
HP作成D社</TD>
<TD>
運営管理D社</TD>
</TR>

<TR BGCOLOR="#E3F0FB">
<TD>
サーバーE社</TD>
<TD>
HP作成E社</TD>
<TD>
運営管理E社</TD>
</TR>

</TABLE>


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

ホスティング ホームページ SEO対策
サーバーA社 HP作成A社 運営管理A社
サーバーB社 HP作成B社 運営管理B社
サーバーC社 HP作成C社 運営管理C社
サーバーD社 HP作成D社 運営管理D社
サーバーE社 HP作成E社 運営管理E社



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


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