【WEB】tableについての考察

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

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

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

<table>
<tbody>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
</tbody>
</table>

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

table tr:hover{ background:yellow;}

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

応用

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

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

<table>
<tbody>
<tr>
<td rowspan="4">○んこ</td>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
</tbody>
</table>

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

table tr:hover{ background:yellow;}

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

<table>
<tbody>
<tr>
<td class="koumoku" rowspan="4">○んこ</td>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
</tbody>
</table>

table tr:hover{ background:yellow;}
table tr:hover td:koumoku{ background:white;}

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

table tr:hover td{ background:yellow;}
table tr:hover td:koumoku{ background:none;}

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

<table>
<tbody>
<tr>
<th rowspan="4">○んこ</th>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
<tr>
<td>うんこ</td>
<td>ちんこ</td>
<td>まんこ</td>
</tr>
</tbody>
</table>

table tr:hover td{ background:yellow;}

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

おまけ

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

jQuery tablesorter 2.0

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