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