Home » table

Sponsored links

table

テーブルをスタイルシート(CSS)でデザインしよう

テーブルのデザインの前にここでもSEOを

ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。

簡単なtableダグを使ったサンプル

それでは簡単に3列×7行のテーブルを書いてみます。

テーブルデザインのサンプル

通勤手段
手段 時間 料金
平均 約83分45秒 ¥400
トータル 約335分 ¥1600
電車 約60分 ¥550
バス 約90分 ¥750
約75分 約¥300
自転車 約110分 ¥0

表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。

表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。

テーブルをスタイルシート(CSS)でデザインしようの続きを読む

Sponsored links

livedoor Readerに登録
RSS
livedoor Blog(ブログ)

ページの先頭へ戻る