[B! CSS][table] simsonsのブックマーク

CSS-Based Tables: Modern Solutions | Smashing Magazine

Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This article was written back in 2008 when the concept of responsive web design hasn’t been created just yet. You may want to check

simsons 2008/08/25

CSS
table

リンク

tableの見栄えをCSSで整える - lucky bag

テーブルは窓から投げ捨てろとtable要素をサイトのレイアウトや視覚的な目的に使う事は、table本来の使用目的とは違うため、やめるべきだと言う流れになっています。しかし、tableを使うなと言うことではなく、表のためにtable要素を使うことは全然構わないわけです。そこで、味気ない表よりは多少見栄えを良くするためにCSSで整えてみます。背景画像を用意して指定することにより、よりデザインチックな表に仕上げる事も出来ますが、画像を使用しなくてもある程度は見栄え良くできる方法だと思います。サンプルとして以下のtableを使用します。borderやcellpaddingなどの属性は一切設定していません。sample01.html <table summary="表のサンプル"> <tr><th>サンプル１</th><td>もう今年も終わりですね。</td></tr> <tr><th>サンプル２

simsons 2008/08/06

リンク

[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。

第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<

simsons 2008/06/14

リンク

表組みのための CSS サンプル - 我的春秋

今日は表組み CSS について、備忘録かねがね情報共有用です。まじめに書くと長くなるので、一般的な説明はかなり省いてます。もしここで紹介している事柄に興味が湧いたけど、細かいところがよく分からないという方がいらっしゃいましたら、どうぞ遠慮なく聞いてください。逆にもっと良い方法をご存知の方がいらっしゃったら、是非ご教示くださいませ。 CSS TABLE GALLERY　http://icant.co.uk/csstablegallery/ 最近見つけたページで、色んな人が作成した表組み（テーブル）デザインのサンプル CSS（スタイルシート）を集めたサイトです。ただし、スタイル名をクリックすると即座にそのスタイル（というか CSSファイル）が適用されて外観が変わります（表組みの HTML 自体は固定で、本当に CSS が切り替わってるだけです）。気に入ったスタイルがあれば、Download を