「jQuery」を使用してテーブルをみやすくしてみる。以下使用例
フリーソフト
| Name | |
|---|---|
| +Lhaca | ファイルの圧縮・解凍 |
| FFFTP | FTPソフト Version 1.96d [2008/9/23] |
| TeraPad | シンプルなSDIタイプのテキストエディタ。Ver.0.93 (2008/05/08) |
| GetHTMLW | サイトを丸ごとダウ ンロード。 |
| Paint.NET | グラフィックソフト |
| EDGE | 256色専用のドット絵エディタ |
| Ｄ＆Ｄ画像変換 | ドラッグ&ドロップでbmp,jpg,png,gif,ico,mag,eriの相互変換・細工・サイズ設定 |
| Namery | ファイル名や拡張子を一括変更 |
以下のように記述するだけで偶数行の背景色を指定できます。ちょっと便利です。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$(".stripe tr:even").addClass("even");
});
</script>
<style type="text/css">
.stripe {
border: 1px solid #999;
border-collapse: collapse;
}
.stripe th {
border: 1px solid #999;
color: #000;
background-color: #63c5e1;
}
.stripe tr {
border: 1px solid #999;
background-color: #fff;
padding:5px;
}
.stripe tr.even td {
background-color: #def0fc;
}
.stripe td {
border: 1px solid #999;
padding: 0 0.75em;
}
.name1{
width:100px;
}
.name2{
width:480px;
}
</style>
<table class="stripe">
<tr>
<th class="name1">名前1</th>
<th class="name2">名前2</th>
</tr>
<tr><td>1行目左列</td><td>1行目右列</td></tr>
<tr><td>2行目左列</td><td>2行目右列</td></tr>
<tr><td>3行目左列</td><td>3行目右列</td></tr>
<tr><td>4行目左列</td><td>4行目右列</td></tr>
</table>
</body>
</html>