TOP  >  vector , WebService  >  実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」
2008年08月18日

実用的なCSSテーブルデザイン集「Top 10 CSS Table Designs」

テーブルと言えば、今やあまり使われなくなった感じがしますが、それでも何かを比較したり、情報を整理したりといった用途には非常に便利に使えます。今日紹介する「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

posted 04:24  |  
Category: vector , WebService   
tag: CSS webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る