たった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を作成すればたった2行でテーブルの表を見やすくするjavascript「Tablecloth」サンプルのような、ホバーやクリック時に色が変化したり、1列おきに色を変化させた表が作成できます。
＊デフォルトでは、列（縦）部分のみ色が変化する設定になっています。
　行（横）部分にも適用する場合は、tablecoth.jsの17行目：var highlightRowsをtrueに変更してください。

2007年11月14日

前の記事：シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」
次の記事：「jQuery Plugins」開設

関連記事

• [prototype]TableKit
• [mootools]DrasticData
• [mootools]A sorting table
• [jQuery]scrollable HTML table
• [jQuery]tablesorter

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」