Ⅵ-７ テーブルの罫線をアレンジする
ここでは色名を表示したテーブルをアレンジしていきます。
１）１行目のセルに背景色を指定します
１行目のセルの<td>の中に「class="iro"」を追加します。
<style>の中にtd.iro{background-color:#ffffff}を追加します【参考】
２）罫線のデザインを設定します
<style>の中のthで罫線の種類、太さ、色を指定します。
thに「border-style:dashed;border-width:2px;border-color:#c8dad8」を追加します。
下のテーブルのtdにも罫線のデザインを設定をするためにテーブルにクラス名を付けます。class="iro"とします。
<style>の中にtable.iro td{border-style:dashed;border-width:2px;border-color:#c8dad8}を追加します。
テーブルの外側の罫線もデザイン設定します。
<style>の中にtable.iro{～}を追加します。
table.iro{border-style:solid;border-width:2px;border-color:#32006a}とします。【参考】
table.iro td{～}で設定したデザインは、<table class="iro">の中にある<td>に対して適用されます。
ひとつひとつの<td>にクラス名を設定しなくてすむため、他のテーブルと区別したいときに便利です。
！！尚table.iro td{～}は、「table.iro」の後に半角スペースを一つ入れて「th」と書きます。
２）セルの余白を消します
罫線のデザインを設定すると、セルの間に余白が入っていることがわかります。
この余白を消すために、<table class="iro">で「cellspacing="0"」と指定します。
<html>
<head>
<title>日本の伝統色</title>
<style type="text/css"><!--
body{color:#333333;
background-color:#f0f8ff;
background-image:url(back.jpg)}
th{padding:10px;width:130px;
border-style:dashed;border-width:2px;border-color:#c8dad8}
td{padding:10px}
table{font-size:12px}
td.head1{width:160px;background-color:2f2f63}
h1{font-size:24px;color:#ffffff}
td.head2{font-size:14px;background-color:c8dad8}
table.head{width:100%;height:80px;margin-bottom:30px;background-color:#ffffff}
td.iro1{background-color:#FDE6E1;width:20px}
td.iro2{background-color:#E88183}
td.iro{background-color:#ffffff}
table.iro td{border-style:dashed;border-width:2px;border-color:#c8dad8}
table.iro{border-style:solid;border-width:2px;border-color:#32006a}
img{float:left;margin-right:10px}
hr{width:100%;height:10px;
border-style:dotted;border-color:#32006a
border-width:2px;margin-top:20px}
a:link{color:#287c72}
a:visited{color:#e4b6d4}
a:hover{color:#d6d620}
a:active{color:#d6202e}
--></style>
</head>
<body>
<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1"rowspan="2"><h1>日本の伝統色</h1></td>
<td class="head2">幸いにも日本には、ずっと昔から大切にされてきた色の世界があります。 忘れかけている昔からの日本の色、もう一度見直してみませんか？
それぞれの色系統別にまとめています。クリックすればそのページが開きます。</td></tr>
<tr>
<td>赤系統<imgsrc="red.gif"></td><td>橙系統<imgsrc="orange.gif"></td>・・・・</tr>
</table>
<table border class="iro" cellspacing="0">
<tr><td class="iro"colspan="3"><imgsrc="red.gif">赤系統についての説明文</td></tr>
<tr><th>～</th><td class="iro1">～</td><td >～</td></tr>
<tr><th>～</th><td class="iro2">～</td><td >～</td></tr>
</table>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>
|
３）テーブルの罫線のデザイン
テーブルの罫線のデザインは、コンテンツのまわりに表示する罫線と同じように、
border-style、border-width、border-colorで設定します。
それぞれの設定で使用出来る値は「罫線の設定」を参照して下さい。
罫線のデザインを設定
| border-style | 罫線の種類を設定 |
| border-width | 罫線の太さを設定 |
| border-color | 罫線の色を設定 |