テーブルと言えば、今やあまり使われなくなった感じがしますが、それでも何かを比較したり、情報を整理したりといった用途には非常に便利に使えます。今日紹介する「Top 10 CSS Table Designs」はCSSでデザインされた、使いやすいシンプルなテーブルサンプルが多数収録されているエントリーです。

いくつか公開されていますが、その中から気になったテーブルデザインをピックアップして紹介したいと思います。

詳しくは以下

■Horizontal Minimalist

シンプルながら実用的なテーブルを使った表組み。項目がしっかりと見えて分かりやすいですね。
　
　
　
■Box

デーブルのボックス単位でハイライトします。行単位で比較したいデータなんかには便利ですね。
　
　
　
■ Horizontal Zebra

行ごとに色が変わるテーブル。情報量が多い時なんかには見やすい表だと思います。
　
　
この他にも様々な表が紹介されていて、どれもソースを交えながら、注意点まで詳しく描かれています。テーブルのソースファイルは「source package」として公開されていて、HTML側でclass名を変えることで紹介されているテーブルのスタイルを利用することができます。

きれいな表組みをしたいけど、あまりCSSが得意でなくて、やむ得なく画像で代用している方なんかにはオススメのエントリーです。

Top 10 CSS Table Designs | CSS, Events | Smashing Magazine

Related Articles:

• 個性的な背景素材をダウンロードできる「Shizoo - einfach mal Design haben」
• CSSを条件分岐させ、環境によって切り替える「Conditional-CSS」
• CSSで実現するアコーディオン「Concertina menu」
• デザインタグクラウド生成サービス「Wordle - Beautiful Word Clouds」
• クールな3Dフォトギャラリージェネレーター「FotoViewr」