スタイルシートの技

テーブルで1行おきに背景色を変えて見やすくする

テーブル（表）などでは良くデータを見やすくするために、毎行おきに色を変えて見やすくしています。 これをいちいちHTMLタグで打っていると大変です。確かにtd要素にはbgcolor属性がありますが、 データ個数が多い時にすべてのtd要素に書いていては容量も大きくなってしまいますし、管理も大変です。 そこでスタイルシートを使ってラクに表現できるようにしてしまいましょう。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      tr.yellow td
      {
         background-color: #ffffcc;
      }
      th
      {
         background-color: #ffcc00;
      }
   </style>
</head>
<body>
   <h1>Airline Time Table</h1>
   <table cellpadding="5" cellspacing="0" summary="TIME TABLE">
      <tr>
         <th abbr="Departure Time">TIME</td>
         <th abbr="Via">VIA</td>
         <th abbr="Destination">TO</td>
         <th abbr="Airline Company">AIRLINE</td>
      </tr>
      <tr>
         <td>18:45</td>
         <td>NEW YORK</td>
         <td>SAO PAULO</td>
         <td>JAL</td>
      </tr>
      <tr class="yellow">
         <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 class="yellow">
         <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

特徴は、tdにクラスを指定しない事です。tdにクラスを指定も良いのですが、 それぞれのtdにクラスを指定しなくてはなりません。 tr要素の後にはtd要素かth要素しか取れません。 つまり、trのクラスを作成しておいて、 その子要素のtdに対して…という風にしてしまえば指定箇所も少なくて済む訳ですね。

アクセシビリティを重視する場合には、 table要素のsummary属性とth要素のabbr属性は書いた方が良いでしょう。

top