HOME

CSS で手早く作表せむ

2016-4-14(Thu)

凝る必要はないけれど、整った表を手早く作りたいことが多かったので、TABLE のためのの汎用 CSS を作成した。

commentable.css（ライセンスは GPL）を <head></head> 内で読み込んだ後、 <table class="ここに クラス名を いくつか 書く"> いて、表のデザインを選択。

シミュレーション

クラス名にチェックを入れて、どんな表ができるかシミュレーションしやう。

commentable（基本クラスなので必ず選択。チェックを外すと……）

（デフォルトの表） typewriter（極めてシンプルな表） brick（セルどうしが離れている表）

(カラーテーマなし) gray（灰色） tan（黄褐色） blue（スカイ・ブルー） pink（ピンク） LightGreen（黄緑色） orange（オレンジ） navy（ネイビー・ブルー） red（深みのある赤） green（深みのある緑） olive（オリーブ）

oddWhite（奇数行の背景色を白に） evenWhite（偶数行の背景色を白に）

noBorder（罫線なし） noTableBorder（表の外枠なし） noCellBorder（表内部の罫線なし） noHBorder（横罫線なし） noVBorder（縦罫線なし） noCellVBorder（表内部の横罫線なし） noCellHBorder（表内部の縦罫線なし）

nowrap（セル中のテキストが長くても自動改行しない）
small（フォント小） （フォント中/デフォルト） large（フォント大）
captionBottom（キャプションを表の下へ）

（テーブル左寄せ/デフォルト） center（センタリング） inline（インライン・テーブル）



TH なし


「ドクター・フー」の新シリーズ





1 行目が TH 


「ドクター・フー」の新シリーズ





1 行目と 1 列目が TH


「ドクター・フー」の新シリーズ











基本クラス



このクラスは必ず指定されなくてはならない。



class="commentable"




Doctor Who New Series







カラー・クラス



class="commentable gray"









class="commentable tan"









class="commentable blue"









class="commentable pink"









class="commentable lightGreen"









class="commentable orange"









class="commentable navy"









class="commentable red"









class="commentable green"









class="commentable olive"









罫線クラス





class="commentable noBorder"









class="commentable noTableBorder"









class="commentable noCellBorder"









class="commentable noHBorder"









class="commentable noVBorder"









class="commentable noCellVBorder"









class="commentable noCellHBorder"









oddWhite クラス、evenWhite クラス




class="commentable blue oddWhite"









class="commentable blue evenWhite"









class="commentable blue oddWhite evenWhite"










typewriter クラス



class="commentable typewriter"









class="commentable typewriter blue"









class="commentable typewriter blue oddWhite"









class="commentable typewriter blue evenWhite"









class="commentable typewriter blue oddWhite evenWhite"









brick クラス



class="commentable brick"









class="commentable brick blue"









class="commentable brick blue noTableBorder"









class="commentable brick blue noCellBorder"









class="commentable brick blue noBorder"









class="commentable brick blue noTableBorder oddWhite evenWhite"










その他のクラス



class="commentable nowrap"









class="commentable small"









class="commentable large"









class="commentable center"









class="commentable inline"









,





and





are inline tables.




おわりに



この CSS ファイルは CSS2 に準拠していて、HTML5 で普通に使えるはず。例外は色名で、これは CSS3 のワーキンググループが出している色名を結構使っている。



基本クラスが commentable という妙な名前をしているけれど、これはもともとこの CSS が別の計画の一部だからなんだ。別の計画ってのは、HTML のコメント部分にスペースやタブ区切りの表を書いておいて、それをクライアント側で <td> や <tr> に展開させちゃおうってやつ。興味のあるおともだちは、「複雑な表はクライアントに作らせむ（Javascript）」を見てね。この CSS と併せるとめちゃくちゃ簡単に表ができちゃうぞ。



おわり



Follow @kabipanotoko