HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳

HTMLテーブルの行を見やすくするテーブルクロスJavaScript

スポンサードリンク

»　Introducing Tablecloth
テーブルクロスを導入する。

この記事がWEB関連のなかで話題になっていました。
はて・・テーブルクロス・・・。

何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。

あなたのhtmlに2行のコードを加えたら・・・

By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love
あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。

なんとも素敵な響きだなと思った人はデモを見てみましょう。
»　デモはこちら

テーブルによって大量のデータを出力するときには便利な機能ですね。

実装は結構簡単で

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>

これを</head>内に書き込み、cssとJavaScriptを呼び出します。

後は、テーブルを作成するときにこれを付け加えるだけ。

<table cellspacing="0" cellpadding="0"　/>

ちょっとした飾りにも使えるテーブルクロスJavaScript。

DOWNLOADはデモページの右上にあります。
以下からどうぞ。

今度グループウェアの開発のときに、大き目のテーブル表示があるので試してみようと思い、メモ。

重くなったらあんまり意味ないですが・・・。

新ブログ：ITクオリティもよろしく。
スポンサードリンク

はてなブクマ

私の他のブログの更新状況

RSS表示パーツ

» Photoshopちょいテク『惑星を作ってみよう』＋360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop！JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫？知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです！』