ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

テーブルやセルに背景色を指定する

{background-color:色;}でテーブル全体、セルの背景色を指定するこ とが出来ます。下の2番目の例では上の2つのセルは行全体の背景色を青色に指定し 下のセル2つは個別に黄色に指定しています。

【ブラウザ表示】

緑色

青色青色
黄色黄色

ソース

<table class="sample7">
<tr>
<td>緑色</td>
</tr>
</table>
<table class="sample8">
<tr class="gyo1">
<td class="bo1">青色</td><td class="bo1">青色</td>
</tr>
<tr>
<td class="kobetsu">黄色</td><td class="kobetsu">黄色</td>
</tr>
</table>

外部ファイル

table.sample7{
background-color:green;
border:1px black solid;
}
table.sample8{border:1px black solid;}
tr.gyo1{background-color:blue;}
td.bo1{border:1px black solid;}
td.kobetsu{
border:1px black solid;
background-color:yellow;
}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; background-color:green;">
<tr>
<td>緑色</td>
</tr>
</table>
<table style="border:1px black solid;">
<tr style="background-color:blue;">
<td style="border:1px black solid;">青色</td>
<td style="border:1px black solid;">青色</td>
</tr>
<tr>
<td style="background-color:yellow; border:1px black solid;">黄色</td>
<td style="background-color:yellow; border:1px black solid;">黄色</td>
</tr>
</table>

■ 背景色を透明にする

{background-color:transparent;}でテーブルやセルの 背景色を透明にすることができます。(デフォルト)
下の例ではテーブル全体は透明色にしています。セルの 背景色は行全体の背景色を青緑色にしていますが 右側のセルだけtransparentを指定しているので透明色に なっています。

【ブラウザ表示】

青緑色透明色

ソース

<table class="toumei">
<tr class="gyo2">
<td class="bo2">青緑色</td><td class="toumei2">透明色</td>
</tr>
</table>

外部ファイル

table.toumei{
border:1px black solid;
background-color:transparent;
}
tr.gyo2{background-color:teal;}
td.bo2{border:1px black solid;}
td.toumei2{
border:1px black solid;
background-color:transparent;
}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; background-color:transparent;">
<tr style="background-color:teal;">
<td style="border:1px black solid;">青緑色</td>
<td style="border:1px black solid; background-color:transparent;">
透明色
</td>
</tr>
</table>

■ その他の項目

枠線の太さ、色、種類を指定する
枠線を重ねて表示する
テーブルやセルの幅、高さを指定する
外側、内側の余白を指定する
セルの文字の位置を指定する
テーブルに文字を回り込ませる
テーブルやセルに画像を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.