CSSツイートCSS3をたくさん使ってきれいなテーブルを作ってみましたので紹介します。セレクタの勉強になると思いますので、ぜひ参考にしてみてください。サンプルをこちらに用意してみましたまずはHTMLから。無駄に長いので3位から9位は省略しています。</tbody></table>続いてCSSです。全部載せて、後で個別に説明します。font-size:14px;}まずはテーブルにスタイルを適用します。横幅とフォントサイズはご自由に。collapse;を入れないと、セルとセルの間に変なスペースができてしまいます。入れるとborder-radiusが使えません。考えたのですが、IE7を無視するか、最後の手段でIEハックを使うかしか方法が見つからなかった。IE6なら無視するけど、IE7はまだ無視できないという人も多いのではないでしょうか。そんな方はこれを追加します。collapse;これで、IE7にだけ追加できます。inset;}th要素にスタイルを適用します。Firefox、Chrome、Safariだけにグラデーションを付けています。グラデーションはちょっとくらいが美しいと思うので微妙に付けています。あと、box-shadowを使って上のボーダーの下に薄いボーダーを入れています。これがあると引き締まる感じがします。「リストに1pxのラインを追加するだけで、印象がぐっとよくなる」と同じ原理ですね。0;}最初にあるth要素にスタイルを適用します。「順位」と書いている部分です。左上の角を丸くしています。inset;}今度は、最後にあるth要素にスタイルを適用します。「2010年推計人口」と書いている部分です。右にボーダーを入れて、右上に角を丸くしています。右外側に影を入れています。last-childはIE8以下は非対応ですが、Selectivizr.jsで対応することができます。CSS3を使うにあたって知っておきたいIE対策のまとめを参考に。center;}すべてのtd要素にスタイルを適用します。paddingで間隔を空けて、左と下にボーダーを入れています。rgba(0,0,0,0.1);}tr要素内にある最後にtr要素にスタイルを適用します。各国の人口が入っているところです。先ほどすべてのtd要素の左側にボーダーを入れましたが、これだと一番右側のボーダーがありませんので、これでボーダーを入れています。右外側に影を入れています。#f1f6fc;}横の列に対し、交互に背景色を入れています。「2n+1」のところは以下のような設定もできます。rgba(0,0,0,0.1);}最後のtr要素の中にあるtd要素にスタイルを適用します。下にある日本の行です。ここでは外の右下側に影を付けています。5px;}最後のtr要素の中にある最初のtd要素にスタイルを適用します。「10」と書いてあるところです。そこの左下の角を丸くしています。0;}最後のtr要素の中にある最後のtd要素にスタイルを適用します。「126,535,920」と書いてあるところです。そこの右下の角を丸くしています。cursor:pointer;}マウスを乗せたときに行全体の背景色が変わるようにしています。後ポインタになるようにしてみましたが、嫌いな人もいると思うのでご自由にどうぞ。ひとつ作ってみました先ほどのものはこのブログのレイアウトにあうような色使いにしましたので、こちらの方が使いやすい色かもCSSはこんな感じで、基本は先ほどのものと一緒です。cursor:pointer;}最後にということで、CSS3を使ってテーブルを装飾してみました。様々なCSSセレクタを使ったので個人的にも勉強になりました。したらびっくりするくらい効率的なセレクタの使い方があるかもしれません。そのときは笑ってやってください。1つずつ説明してみましたので、ご自由にカスタマイズしちゃってください。ウェブサイト作成に役立つことをいろいろと@webpark2さんのツイートこの記事に付いているタグの最新記事一覧loading...コメントメルマガで紹介されて、たどり着きました。素敵なサンプルの提供ありがとうございます。右下を除く、3つの角で薄い線が残ってしまいました。私のサイトの背景はf0f0f0です。よろしければ、アドバイスいただけないでしょうか。[edit]もじろうさんはじめまして!メルマガで紹介されているなんて光栄です〜ご質問の件確認してみました。Firefoxだと角が白くなってしまい他のブラウザでは特に問題ありませんでした。右下は影があるため目立ちにくいだけかなと思います。角を丸くしなければ問題ないはずですがそれでは意味がないですもんね。[edit]とても参考になります!!ありがとうございます。さんコメントありがとうございます。参考になってうれしいです。http://www.ie6countdown.com/によるIE6ですら4.7%もあるらしいのでまだまだIEに振り回される日々は続きそうです。[edit]NAME:URL:COMMENT:PASS:※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。EntryCSS(スタイルシート)の基本、小技、テクニック総まとめ意外と知らない!?CSSセレクタ20個のおさらい保存版!CSS3セレクタの説明書CSS3を使うにあたって知っておきたいIE対策のまとめCSSの擬似要素を使った見出しデザイン擬似要素とCSS3を使ってリストメニューを楽しくデザインオンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つjQueryとCSS3を使ったアコーディオンメニューを詳しく説明しますCSSだけで作る動きのあるドロップダウンメニューjQueryを使った一定以上スクロールすると上に固定される横メニューCSS3について知っておきたいことのまとめ配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!TweetWebparkについて和歌山に住むごく普通のサラリーマンです。趣味でウェブサイト作成に関することをいろいろと勉強しています。役立ちそうな内容をまとめてブログに載せています。