[B! web制作][table] sikusikuのブックマーク

sikusiku id:sikusiku

web制作とtableに関するsikusikuのブックマーク (3)

CSSで作るシンプルなテーブル
.sample_01{ width: 100%; border-collapse: collapse; } .sample_01 th{ width: 25%; padding: 6px; text-align: left; vertical-align: top; color: #333; background-color: #eee; border: 1px solid #b9b9b9; } .sample_01 td{ padding: 6px; background-color: #fff; border: 1px solid #b9b9b9; } <table class="sample_01"> <tbody> <tr> <th>SAMPLE01</th> <th>デザイン</th> <th>枠線</th> <th>カラー</th> </tr> <tr> <td>有料</td>
sikusiku 2014/06/19
table

デザイン

シンプル

CSS

web制作
リンク
TABLE(テーブル)のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系]
ネットショップ運営[楽天・ECサイト]に関する情報便利ツール Webサービス CSS Javascript jQueryなど紹介していきます TABLEタグはネットショップの商品ページなどでは、スペック表、価格表としてよく使う機会があるのではないでしょうか？または、コンテンツのレイアウトに利用することも多いです。そんなTABLEタグですがHTMLでの記述の方法は覚えたんだけど、それだけでは綺麗でかっこいい見た目にするのって難しいですよね。単純に色を付けたり、線を引いたりするだけでも雰囲気は変わりますが、デザインの凝ったサイトにある表は、なんだか綺麗でかっこよくて何より見やすさが違うなと思うことも多いですし、必ずといっていいほどCSS(スタイルシート)で綺麗に装飾されています。 CSS(スタイルシート)での装飾と一言でいっても指定出来ることが非常に多くwebデザインをしている人でもすべて
sikusiku 2014/06/19
テーブル

table

CSS

シンプル

web制作
リンク
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。１．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用例として、次のtable要素を利用します。
sikusiku 2014/01/29
CSS

web制作

table
リンク
1