2006年07月06日
テーブルをスタイルシート(CSS)でデザインしよう
テーブルのデザインの前にここでもSEOを
ブログの出現で既存のサイトも脱テーブルデザインとかがルールのように認識され始めて数年たちますが何が何でも脱テーブルがよいという訳ではありません。
レイアウト(見た目)を整える部分はCSSで、「表形式」を表現するためにはテーブルは有効です。
ここではブログのエントリー内での活用法を書いてみたいと思います。
簡単なtableダグを使ったサンプル
それでは簡単に3列×7行のテーブルを書いてみます。
テーブルデザインのサンプル
手段 | 時間 | 料金 |
---|---|---|
平均 | 約83分45秒 | ¥400 |
トータル | 約335分 | ¥1600 |
電車 | 約60分 | ¥550 |
バス | 約90分 | ¥750 |
車 | 約75分 | 約¥300 |
自転車 | 約110分 | ¥0 |
表題の文字サイズとセル内見出しの背景色とテーブルの外枠をCSSでコントロールしています。
表題とセル内見出しを定義(caption,th)
その他、table内の料金数値は右寄せを指定しています
続きでテーブルをデザイン化します。
Sponsored links