webデザイナの学習・Tipsなど

本・ツール・webサービス等のレビュー

リンク集

スペシャルコンテンツ

REDLINEって何?

テーブル背景を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を使ったテーブル背景色の指定についてのいくつかの方法が掲載されている。

>>Redline Magazine: テーブル背景を1行おきに着色するへ