たった2行でテーブルの表を見やすくするjavascript「Tablecloth」

表はデータをわかりやすく表示します。
Webサイトではテーブルを使用して作成することが多いですが、デザインを見やすくするのは難しいです。
Tableclothは、js、cssのファイル2つを記述するだけで非常にわかりやすい表を作成してくれます。

sponsors

使用方法

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

sponsors

Javascriptサンプルページ一覧
skuare.net