ToolKit[Titon]を利用した
Tableのサンプルプログラムです。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト：Table – Titon Toolkit Demo Site
HTML head部
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/toolkit.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css" /> </head>
HTML body部（サンプル①）
<table class="table"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table>
HTML body部（サンプル②）
<table class="table is-striped"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table>
HTML body部（サンプル③）
<table class="table is-striped has-hover"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table>
HTML body部（サンプル④）
<!-- Small Table --> <table class="table is-striped small"> <thead> <caption>ブログ情報テーブル(サンプル) - Small</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table> <!-- Default Table --> <table class="table is-striped"> <thead> <caption>ブログ情報テーブル(サンプル) - Default</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table> <!-- Large Table --> <table class="table is-striped large"> <thead> <caption>ブログ情報テーブル(サンプル) - Large</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table>
HTML body部（サンプル⑤）
<table class="table is-striped is-sortable"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th> <a href=""> ブログ名 <span class="caret-up"></span> <span class="caret-down"></span> </th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table>
HTML body部（サンプル⑥）
<table class="table is-striped is-sortable"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> <tr class="table-divider"> <td colspan="5">まとめサイト</td> </tr> <tr> <td>GIGAZINE（ギガジン）</td> <td>http://gigazine.net/</td> <td>ー</td> <td>@gigazine</td> <td>GIGAZINE</td> </tr> <tr> <td>ギズモード・ジャパン</td> <td>http://www.gizmodo.jp/</td> <td>ー</td> <td>@gizmodojapan</td> <td>gizmodojp</td> </tr> </tbody> </table>
HTML body部（サンプル⑦）
<article class="table-responsive"> <table class="table is-striped"> <thead> <caption>ブログ情報テーブル(サンプル)</caption> <tr> <th>ブログ名</th> <th>ブログURL</th> <th>管理者名</th> <th>管理者 Twitter</th> <th>管理者 Facebook</th> </tr> </thead> <tbody> <tr> <td>phpspot開発日誌</td> <td>http://phpspot.org/blog/</td> <td>ＫＪ</td> <td>@phpspot_kj</td> <td>ー</td> </tr> <tr> <td>和洋風KAI</td> <td>http://wayohoo.com/</td> <td>するぷ</td> <td>@isloop</td> <td>wayohoo</td> </tr> <tr> <td>気になる、記になる…</td> <td>http://taisy0.com/</td> <td>Taisyo</td> <td>@taisy0</td> <td>kininaru.kininaru</td> </tr> <tr> <td>コリス</td> <td>http://coliss.com/</td> <td>コリス</td> <td>@colisscom</td> <td>coliss3</td> </tr> </tbody> </table> </article>
解説
Tableのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。
※ToolKit[Titon]のライセンスは[BSD]です。