CSSだけで作るおしゃれなtableのデザインサンプル | うぇぶ小屋

ホーム / CSS / CSSだけで作るおしゃれなtableのデザインサンプル
  • 2012/11/08
  • CSSだけで作るおしゃれなtableのデザインサンプル

    CSSだけで作るおしゃれなtableのデザインサンプル

    画像を使わずにCSSだけでデザインするtableのサンプルです。

    サンプル
    # title1 title2
    01 text text
    02 text text
    3 text text

    サンプルHTML

    サンプルCSS

    ちなみに複数のtableのデザインをCSSで指定する場合はclassを指定してあげると良いです。

    例えばAとBのテーブルのデザインをそれぞれ指定したい場合は

    HTML

    CSS

    とすれば、AとBでそれぞれ違うデザインにする事ができます。

    tableが必要な時にコピペで使えますし、カスタマイズもしやすいと思いますのでよろしければどうぞ。

    あとは簡単なテーブルであればこういったツールで作ると便利です。 http://styleme.jp/tool/xls2html/#close

    参考になれば幸いです。

    この記事を読んだ人はこんな記事も読んでます

    TwitterやFacebookページでは日々うぇぶ小屋が気になった情報(ウェブ制作・運営、ブログの収益化に関する事が多い)をつぶやいていますのでこの機会にぜひ"フォロー"または"いいね"をよろしくお願いします。


    Twitterアカウント → @webgoya
    Facebookページ → webgoya
    RSSフィードを配信しています → RSS購読はこちら

    コメント一覧
    この記事にコメントを残す
    管理者にだけ表示を許可する

    人気記事

    最新のエントリー

    カテゴリ

    ライター募集!