スタイルシートの技

クールなテーブルを作成する

テーブルは色々と使う機会も多いと思います。 ここでは良く見るテーブルとは違って少しスタイリッシュなテーブルを作成してみようというものです。 スタイルシートを使うとテーブル作成も色々と応用が効きます。 例えば、通常のテーブルは次のようになります。

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>&nbsp;</td>
      <td>CHICAGO</td>
      <td>JAL</td>
   </tr>
   <tr>
      <td>20:15</td>
      <td>&nbsp;</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

どうでしょう。少しはマシになったでしょうか?