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

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購読はこちら

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

人気記事

最新のエントリー

カテゴリ

ライター募集!