たった2行でテーブルの表を見やすくするjavascript「Tablecloth」
表はデータをわかりやすく表示します。
Webサイトではテーブルを使用して作成することが多いですが、デザインを見やすくするのは難しいです。
Tableclothは、js、cssのファイル2つを記述するだけで非常にわかりやすい表を作成してくれます。
使用方法
Tableclothからファイル群をダウンロードし、以下のように記述するだけです。
<script type="text/javascript" src="http://yourdomain/tablecloth.js"></script>
<link href="http://yourdomain/tablecloth.css" rel="stylesheet" type="text/css" media="screen">
あとは、ごく普通にtableを作成すれば以下のサンプルのような、ホバーやクリック時に色が変化したり、1列おきに色を変化させた表が作成できます。
＊デフォルトでは、列（縦）部分のみ色が変化する設定になっています。
行（横）部分にも適用する場合は、tablecoth.jsの17行目：var highlightRowsをtrueに変更してください。
サンプル
| Title |
Title |
Title |
Title |
Title |
Title |
Title |
| Data |
Data |
Data |
Data |
Data |
Data |
Data |
| Data |
Data |
Data |
Data |
Data |
Data |
Data |
| Data |
Data |
Data |
Data |
Data |
Data |
Data |
| Data |
Data |
Data |
Data |
Data |
Data |
Data |
| Data |
Data |
Data |
Data |
Data |
Data |
Data |
Javascriptサンプルページ一覧
skuare.net