今の会社に入って数か月たったころ、前任者が作ったホームページのソースが分かりづらいので、新しく作り直したいという依頼を受けることになった。そのうちのいくつかのページにテーブルがあり、trごとにハイライトしているページが。どうやらJavaScriptでやっているようだったのだけれども、それを自分はCSSに書き換え。例えば以下のような感じで。
HTML
|
1 2 3 4 5 6 |
<table class="trhover"> <tr><th>名前</th><th>ふりがな</th><th>年齢</th></tr> <tr><td>中居正広</td><td>なかいまさひろ</td><td>39</td></tr> <tr><td>木村拓哉</td><td>きむらたくや</td><td>39</td></tr> <tr><td>稲垣吾郎</td><td>いながきごろう</td><td>38</td></tr> </table> |
CSS
|
1 2 3 |
table.trhover tr:hover{ background-color:yellow; } |
| 名前 | ふりがな | 年齢 |
|---|---|---|
| 中居正広 | なかいまさひろ | 39 |
| 木村拓哉 | きむらたくや | 39 |
| 稲垣吾郎 | いながきごろう | 38 |
しかし中には、データ数が多すぎて1セットで複数行になっているテーブルも。ソースを見てみると、どうやらtrタグの中に一つのtdタグを入れ、その中に新たにtableを入れてハイライトをつけているようだった。自分もそのやり方でいいのかと思ったら、これだと線の場所がバラバラことがあるといった問題らしいので、すべてを一つのテーブルで作ることに。いったいどうすりゃいいものか・・・。と少し考えて作ったのが下のようなもの。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table class="tbodyhover"> <thead> <tr><th>名前</th><th rowspan="2">年齢</th><th>生年月日</th><th>血液型</th></tr> <tr><th>ふりがな</th><th>出生地</th><th>愛称</th></tr> </thead> <tbody> <tr><td>中居正広</td><td rowspan="2">39</td><td>1972年8月18日</td><td>A型</td></tr> <tr><td>なかいまさひろ</td><td>神奈川県藤沢市</td><td>中居くん</td></tr> </tbody> <tbody> <tr><td>木村拓哉</td><td rowspan="2">39</td><td>1972年11月13日</td><td>O型</td></tr> <tr><td>きむらたくや</td><td>東京都</td><td>キムタク</td></tr> </tbody> <tbody> <tr><td>稲垣吾郎</td><td rowspan="2">38</td><td>1973年12月8日</td><td>O型</td></tr> <tr><td>いながきごろう</td><td>東京都板橋区</td><td>ゴローちゃん</td></tr> </tbody> </table> |
CSS
|
1 2 3 |
table.tbodyhover tbody:hover{ background-color:yellow; } |
| 名前 | 年齢 | 生年月日 | 血液型 |
|---|---|---|---|
| ふりがな | 出生地 | 愛称 | |
| 中居正広 | 39 | 1972年8月18日 | A型 |
| なかいまさひろ | 神奈川県藤沢市 | 中居くん | |
| 木村拓哉 | 39 | 1972年11月13日 | O型 |
| きむらたくや | 東京都 | キムタク | |
| 稲垣吾郎 | 38 | 1973年12月8日 | O型 |
| いながきごろう | 東京都板橋区 | ゴローちゃん |
HTMLのテーブルにはヘッダーに該当する<thead>、フッターに該当する<tfoot>、そしてボディに該当する<tbody>の3つで構成されています。また、theadとtfootは同じテーブル内に一つしか記述してはいけないのですが、tbodyはいくつでも記述してもよいことになってるそうです。そのため、複数行をtbodyでまとめ、tbody上にマウスが乗ったらバックの色を変えるという処理をしてみました。なお、上記のタグを書かないと、tbodyと判断されます。そのため、theadタグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。