jQuery の jQuery( ':odd' ) を使い、表（table）の奇数行目と偶数行目の背景色を色分けし、見やすくする方法。
実装例（サンプル）
| 名前 | 算数 | 理科 | 国語 | 社会 | 英語 |
|---|---|---|---|---|---|
| 大翔 | 90 | 70 | 75 | 80 | 70 |
| さくら | 70 | 85 | 100 | 50 | 95 |
| 優斗 | 85 | 75 | 65 | 75 | 70 |
| 大和 | 100 | 90 | 55 | 85 | 60 |
| 結衣 | 65 | 70 | 95 | 75 | 100 |
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample tr:odd' ) . css( {
backgroundColor: '#ddffff',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample tr:odd' ) . css( {
backgroundColor: '#ddffff',
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
width: 500px;
}
#jquery-sample,
#jquery-sample th,
#jquery-sample td {
border-collapse: collapse;
border: 1px #003030 solid;
}
#jquery-sample tr {
background-color: #bbffff;
height: 50px;
}
#jquery-sample th {
padding: 10px 20px;
background-color: #165240;
color: #ffffff;
font-size: 15px;
}
#jquery-sample td {
padding: 10px 20px;
font-size: 15px;
text-align: right;
vertical-align: bottom;
}
-->
</style>
<!--
#jquery-sample {
width: 500px;
}
#jquery-sample,
#jquery-sample th,
#jquery-sample td {
border-collapse: collapse;
border: 1px #003030 solid;
}
#jquery-sample tr {
background-color: #bbffff;
height: 50px;
}
#jquery-sample th {
padding: 10px 20px;
background-color: #165240;
color: #ffffff;
font-size: 15px;
}
#jquery-sample td {
padding: 10px 20px;
font-size: 15px;
text-align: right;
vertical-align: bottom;
}
-->
</style>
HTML
<table id="jquery-sample">
<tr>
<th>名前</th>
<th>算数</th>
<th>理科</th>
<th>国語</th>
<th>社会</th>
<th>英語</th>
</tr>
<tr>
<th>大翔</th>
<td>90</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>さくら</th>
<td>70</td>
<td>85</td>
<td>100</td>
<td>50</td>
<td>95</td>
</tr>
<tr>
<th>優斗</th>
<td>85</td>
<td>75</td>
<td>65</td>
<td>75</td>
<td>70</td>
</tr>
<tr>
<th>大和</th>
<td>100</td>
<td>90</td>
<td>55</td>
<td>85</td>
<td>60</td>
</tr>
<tr>
<th>結衣</th>
<td>65</td>
<td>70</td>
<td>95</td>
<td>75</td>
<td>100</td>
</tr>
</table>
<tr>
<th>名前</th>
<th>算数</th>
<th>理科</th>
<th>国語</th>
<th>社会</th>
<th>英語</th>
</tr>
<tr>
<th>大翔</th>
<td>90</td>
<td>70</td>
<td>75</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<th>さくら</th>
<td>70</td>
<td>85</td>
<td>100</td>
<td>50</td>
<td>95</td>
</tr>
<tr>
<th>優斗</th>
<td>85</td>
<td>75</td>
<td>65</td>
<td>75</td>
<td>70</td>
</tr>
<tr>
<th>大和</th>
<td>100</td>
<td>90</td>
<td>55</td>
<td>85</td>
<td>60</td>
</tr>
<tr>
<th>結衣</th>
<td>65</td>
<td>70</td>
<td>95</td>
<td>75</td>
<td>100</td>
</tr>
</table>