スタイルシートの技
クールなテーブルを作成する
テーブルは色々と使う機会も多いと思います。 ここでは良く見るテーブルとは違って少しスタイリッシュなテーブルを作成してみようというものです。 スタイルシートを使うとテーブル作成も色々と応用が効きます。 例えば、通常のテーブルは次のようになります。
| TIME | VIA | TO | AIRLINE |
|---|---|---|---|
| 18:45 | NEW YORK | SAO PAULO | JAL |
| 19:00 | LOS ANGELES | RIO DE JANEIRO | ANA |
| 19:15 | --- | CHICAGO | JAL |
| 20:15 | --- | HONOLULU | UNITED |
無味乾燥なテーブルですね。そこで、ちょっとデザインに改良を加えて見ましょう。 今回の場合はtable要素には、次のようなタグを指定しています。
<table border="1" width="90%" cellpadding="3" summary="時刻表">ここの「border」である程度制御できるのですが、なんだか枠がイケてない…と感じた方もいらっしゃるかも知れません。 ちなみにこの値を「0」にすると枠が消えます。まず、このテーブル枠とセルの枠を1ピクセルの細い線でスタイリッシュにしてみましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>displayの練習</title>
<style type="text/css">
table,th,td { border: solid 1px #666666; }
</style>
</head>
<body>
<h1>displayの練習</h1>
<table width="90%" cellpadding="3" summary="時刻表">
<tr>
<th abbr="Departure Time">TIME</th>
<th abbr="Via">VIA</th>
<th abbr="Destination">TO</th>
<th abbr="Airline Company">AIRLINE</th>
</tr>
<tr>
<td>18:45</td>
<td>NEW YORK</td>
<td>SAO PAULO</td>
<td>JAL</td>
</tr>
<tr>
<td>19:00</td>
<td>LOS ANGELES</td>
<td>RIO DE JANEIRO</td>
<td>ANA</td>
</tr>
<tr>
<td>19:15</td>
<td> </td>
<td>CHICAGO</td>
<td>JAL</td>
</tr>
<tr>
<td>20:15</td>
<td> </td>
<td>HONOLULU</td>
<td>UNITED</td>
</tr>
</table>
</body>
</html>
| TIME | VIA | TO | AIRLINE |
|---|---|---|---|
| 18:45 | NEW YORK | SAO PAULO | JAL |
| 19:00 | LOS ANGELES | RIO DE JANEIRO | ANA |
| 19:15 | --- | CHICAGO | JAL |
| 20:15 | --- | HONOLULU | UNITED |
少しかっこよくなった！と思う方もいらっしゃるかもしれませんが、 1ピクセルの線になったのは良いのですが、 もうちょっと工夫してみましょう。
table
{
border-left: solid 1px #999999;
border-bottom: solid 1px #999999;
}
th,td
{
border-top: solid 1px #999999;
border-right: solid 1px #999999;
}| TIME | VIA | TO | AIRLINE |
|---|---|---|---|
| 18:45 | NEW YORK | SAO PAULO | JAL |
| 19:00 | LOS ANGELES | RIO DE JANEIRO | ANA |
| 19:15 | --- | CHICAGO | JAL |
| 20:15 | --- | HONOLULU | UNITED |
私はこっちの方が好きです。「cellspacing="0"」を忘れないようにして下さい。 これを忘れると微妙な空間が空いてかっこわるくなります。 どうして、table要素とth/td要素の境界線を交互にしているかというのは、 そうしないと、線が二重に重なってしまうからです。これは実際にやってみると分かります。
後は背景画像なんか自分好みにカスタムすればますますスタイリッシュになるでしょう。 試しに、テーブルで1行おきに背景色を変えて見やすくするのテクを適応してみましょう。
| TIME | VIA | TO | AIRLINE |
|---|---|---|---|
| 18:45 | NEW YORK | SAO PAULO | JAL |
| 19:00 | LOS ANGELES | RIO DE JANEIRO | ANA |
| 19:15 | --- | CHICAGO | JAL |
| 20:15 | --- | HONOLULU | UNITED |
どうでしょう。少しはマシになったでしょうか？