テーブルのデザインでよくシマシマのものを見かけます。これは行や列にclassを指定してもできるのですが、今回は
疑似要素:nth-child
を使って行っていきたいと思います。7月25日記事
イメージ
横方向
縦方向
目次
シマシマにするには疑似要素:nth-childを使っていきます。これは、n番目の子となる要素に、スタイルを適用していくというものです。
n番目ということは縦のシマシマ(td)にもできそうですし、横のシマシマ(tr)にもできそうです。
ということで両方やってみます。
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>点数リスト</title>
</head>
<body>
<div id="yoko">
<table class="sample1">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
<div id="tate">
<table class="sample2">
<tr><th></th><th>名前</th><th>点数</th></tr>
<tr><td>1</td><td>太郎</td><td>86</td></tr>
<tr><td>2</td><td>花子</td><td>80</td></tr>
<tr><td>3</td><td>次郎</td><td>57</td></tr>
<tr><td>4</td><td>由香</td><td>60</td></tr>
</table>
</div>
</body>
</html>
基本のタグはこちらでかまいません。
しかし、CSSのほうではtrのほうで、奇数用と偶数用でtr:nth-child(2n+0)やtr:nth-child(2n+1)と指定します。nは0から始まります。
CSS部
@charset "utf-8";
/* CSS Document */
#yoko{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample1{
border-collapse: collapse;/*これはテーブルのクラスへ*/
}
table.sample1 th,table.sample1 td{
font-size:30px;
border:1px solid #000;/*これはth,tdの方へ記述*/
}
table.sample1 tr:nth-child(2n+1){/*もし先頭行(th)を指定色でぬりつぶさない場合は2n+3*/
background: #0FF;
}
table.sample1 tr:nth-child(2n+0){
background: #FF0;
}
#tate{
width:300px;
min-height: 200px;
margin: 10px auto;
}
table.sample2{
border-collapse: collapse;
}
table.sample2 th,table.sample2 td{
border:1px solid #000;
font-size:30px;
}
table.sample2 td:nth-child(2n+1){
background: #0FF;
}
table.sample2 td:nth-child(2n+0){
background: #FF0;
}
ちょっとテーブルの線作りはややこしいですが、 隙間（border-collapse:）はtableのクラスの方へ、線（border:）はtr,th,tdの方へ記述 してください。
子要素のn番目ということでその他にliやdtやddにも使えたりします。デザイン的には（白と灰色）、（白と薄い水色）のペアなどにすれば綺麗に見えるようになります。
以上
