テーブルのカスタマイズ


このページのソースと照らし合わせてご覧下さい。


機能

簡易検索を追加する

行に「#simplesrh(table)」を書くとページ内のテーブルに対して簡易検索が可能なフォームが設置されます。
※セルを結合していると誤動作します。


テーブルにソート機能を付ける

行に「#tablesort」を書くとページ内のテーブルのthead部分を押すことでソートできるようになります。
ただし、テーブルを結合していると誤作動を起こしますので、テーブル作成時にソート機能を付けるか付けないかの判断が必要です。
(以下のテーブル例の1・2・3・4・5となっている列のヘッダをクリックしてみてください。)



「c」で一定の行からフォント・背景色を変更する

ththththth
1tdtdtdtd
2tdtdtdtd
3tdtdtdtd
4tdtdtdtd
5tdtdtdtd



行毎にクラスを指定して背景色を変える

ththththth
ththththth
1tdtdtdtd
tdtdtdtd
2tdtdtdtd
tdtdtdtd
3tdtdtdtd
tdtdtdtd
ththththth
ththththth
0tdtdtdtd
1tdtdtdtd
2tdtdtdtd
3tdtdtdtd
4tdtdtdtd
5tdtdtdtd

行末に「0〜9」の数字を入力すると、その行のセルのclass属性に「style_td0〜style_td1」が付きます。
・thであれば、style_th0〜9となります。
・0〜5は既に背景色を決めていますが、cssで変更することも追加することも可能です。

※左の例テーブルに「floatLeft」というclassを付けています。そして「#clear」で左の回りこみを解除しています。



セル毎にクラスを指定する

ththththth
ththththth
[a]tdtdtdtd
[a]tdtdtd
tdtdtdtdtd
tdtdtdtd
[b]tdtdtdtd
tdtdtdtd
ththththth
ththththth
td[a]tdtdtd
tdtdtdtdtd
tdtdtdtdtd
td[b]tdtdtd
tdtdtdtdtd
tdtdtdtdtd

先ほどの例を使って紹介します。

セルの先頭に「:文字列:」を入力すると<td>の属性が「class="style_td 文字列"」となります。(「class="style_td"」は継承されます。
・予めcssで作っておくと、「BGCOLORやCOLOR、SIZE」などでゴチャゴチャせずに済みます。

左の例では予め管理画面のCSSで以下のように設定しています。
td.a{background:#000;color:#fff}
td.b{color:#C600FF;text-align:center;font-weight:bold;}



テーブル自体にクラスと横幅(%)を指定する

ththththth
ththththth
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd

【手順】
1、「|」の数を合わせ、行末に「s」を書きます。
2、一番最初のセルに「クラス名:横幅」と書くと、「<table class="クラス名" width="横幅%"」と整形されます。

左の例では「floatLeft」クラス、横幅50%を指定しています。

ththththth
ththththth
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd

「tableBorder」クラス、横幅50%を指定。

管理画面のCSSで以下のコードを追加しています。
.tableBorder{float:left;}

ththththth
ththththth
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd
tdtdtdtdtd
tdtdtdtd

「tableBorderNone」クラス、横幅50%を指定。

管理画面のCSSで以下のコードを追加しています。
.tableBorderNone{float:left;}
.tableBorderNone th{background:#000;color:#fff;}