スタイルシート［CSS］/テーブル/セルの背景に色を付ける

background-color は、背景色を指定するプロパティです。

table、tr、td要素やth要素にこのスタイルを設定すると、セル（または表全体）の背景色を指定することができます。

table {
background-color: #bde9ba;
}

background-color	背景の色を指定します

色の指定についてはスタイルシートの色指定をご覧ください。

色の指定

次のように transparent を指定すると、「透明」を指定したことになります。（デフォルト）

background-color: transparent;

【適用範囲】

■table要素に指定した場合

table { background-color: #bde9ba; }

表全体の背景色を指定できます。

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

■tr要素に指定した場合

tr.example { background-color: #bde9ba; }

行単位で背景色を指定できます。

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

■td要素（th要素）に指定した場合

td.example { background-color: #bde9ba; }

セル単位で背景色を指定できます。

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

背景色を指定する場合は、同時に文字色も指定しておくようにしましょう（背景色だけを指定すると、ユーザーの環境によっては文字が見づらくなってしまうため）。指定方法の詳細は「関連ページ」をご覧ください。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<table>
<tr>
<th>Webディレクター</th>
<th>Webデザイナー</th>
<th>Webプログラマー</th>
</tr>
<tr>
<td>A氏</td>
<td>C氏</td>
<td>E氏</td>
</tr>
<tr>
<td>B氏</td>
<td>D氏</td>
<td>F氏</td>
</tr>
</table>

</body>
</html>

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

Webディレクター	Webデザイナー	Webプログラマー
A氏	C氏	E氏
B氏	D氏	F氏

セルの背景に色を付ける

background-color: ***;

使用例