【WEB】tableについての考察

表として<table>を使うときの見栄えについて。
擬似要素大活躍。

価格表とかで一覧作るとき、よっぽど粋がったことでもしない限りはtableを使う。

うんこ ちんこ まんこ
うんこ ちんこ まんこ
うんこ ちんこ まんこ
うんこ ちんこ まんこ

普通に考えてこれでいいんだけど、膨大な量を前にすると「行全部見るのしんどいわー」とか「どこ見てたっけ?」みたいのがたまに起きる。
ちっとは楽になるのかな、っていうのがこれ。

カーソル当てた行全部に色がつく。
1つ2つ足すだけだし、あって困るもんじゃないし、やっても損にはならないと思うんだけど全然見ない。
知らないところで禁止されてんだろうか。

応用

こんな感じでHTMLを組んだとする。

○んこ うんこ ちんこ まんこ
うんこ ちんこ まんこ
うんこ ちんこ まんこ
うんこ ちんこ まんこ

これでこれすると不都合が起きる

rowspanは1つ目のに<tr>格納されてるから、1行目にカーソル当てた時に背景付いちゃう。
他の行では色が付かなくて見栄えが悪いから、もう:hoverの効果から除外しちゃおう。

背景色上書きで、色がついてないように見せる。
実際は白をつけてるもんだから、なんとなく具合が悪い。
後々サイトに手を入れることを考慮してどーにか予防できないかなって時は↓。

<th>にカーソルが載ってる時、その中の<td>に色を付けるよ、でもclassついてるこいつには色を付けないよ、ってこと。
擬似要素のあとにタグを続けてるのって普段あまり見ないし、できるって知らない人は驚くかもしれない。
class振るのだるいわーって横着したいんなら↓

見たまんま。<td>にだけ背景色つけるから<th>はなんともない。
これをやる時、<th>の扱いに注意しなきゃいけない。
変に多用しすぎてペナルティの原因になったらめんどい。
それこそ最初に書いてある、わざわざ手を入れるほどのことでもないところに色気を出してるだけなんだから、無駄に首を絞めるくらいなら最初からやらない方向で。
htmlの扱いに慣れて+αで済む人だけがやればいいと思う。

おまけ

jQueryを使うと<table>にエクセルみたくソート機能を付けることもできる。
詳しくはリンク先参照。
導入自体そんなに面倒じゃなかった。
tablesorter

探せばいろいろあるかも。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です