テーブル背景を1行おきに着色する・サンプル
サンプル01 | 1行目 |
サンプル02 | 2行目 |
サンプル03 | 3行目 |
サンプル04 | 4行目 |
サンプル05 | 5行目 |
サンプル06 | 6行目 |
<style type="text/css">
<!--
table {
margin: 1em auto 2em 3em;
border-collapse:collapse;
border-spacing:0;
border: 1px solid silver;
font:70%/1 verdana, sans-serif;
}
td {
padding: 0.3em 1.5em;
}
.odd td {
background: white;
}
.even td {
background: #f0f0ff;
}
-->
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = init;
function init() {
// stripeAllTables();
stripeTableById('table1');
}
function stripeTable(t) {
var i, odd = true;
for (i=0; i<t.rows.length; i++) {
t.rows[i].className += odd ? ' odd' : ' even';
odd = !odd;
}
}
function stripeTableById(id) {
var t = document.getElementById(id);
if (t) stripeTable(t);
}
// ]]>
</script>
<table id="table1">
<tr>
<td>サンプル01</td>
<td>1行目</td>
</tr>
<tr>
<td>サンプル02</td>
<td>2行目</td>
</tr>
<tr>
<td>サンプル03</td>
<td>3行目</td>
</tr>
<tr>
<td>サンプル04</td>
<td>4行目</td>
</tr>
<tr>
<td>サンプル05</td>
<td>5行目</td>
</tr>
<tr>
<td>サンプル06</td>
<td>6行目</td>
</tr>
</table>
ネタ元:[ws] Striped Tables | Pruhované tabulky
cssを使ったテーブル背景色の指定についてのいくつかの方法が掲載されている。