|
{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>
■ その他の項目
・
枠線の太さ、色、種類を指定する
・
枠線を重ねて表示する
・
テーブルやセルの幅、高さを指定する
・
外側、内側の余白を指定する
・
セルの文字の位置を指定する
・
テーブルに文字を回り込ませる
・
テーブルやセルに画像を指定する
スタイルシート一覧のページに戻る
|
