• CSS

CSSでテーブルレイアウト

料金表や、会社概要など、テーブルレイアウトをする事があります。

そこで、ストック用にCSSでレイアウトするテーブルを作りました。

とりあえずカスタマイズしやすいように、シンプルな感じです。

ご自由にカスタムしてお使い下さい♪

TABLE-A

table-a

HTMLソース
[html]

内容 内容 内容
内容 TEXT TEXT TEXT
内容 TEXT TEXT TEXT
内容 TEXT TEXT TEXT

[/html]

CSS

[css]
.table-a {
border-collapse: collapse;
width: 400px;
border: 1px solid #CCC;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-a th {
border: 1px solid #DDD;
color: #333;
background-color: #D5FAFB;
font-weight: bold;
padding: 10px;
}
.table-a td {
border: 1px solid #DDD;
padding: 10px;
color: #666;
}

[/css]

TABLE-B

table-b

HTMLソース
[html]

内容 TEXT TEXT TEXT
内容 TEXT TEXT TEXT
内容 TEXT TEXT TEXT
内容 TEXT TEXT TEXT

[/html]

CSS

[css]

.table-b {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-b th?? ?{
color: #FFF;
background-color: #099;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #CCC;
}
.table-b td?? ?{
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}

[/css]

TABLE-C

table-c

HTMLソース
[html]

内容 内容 内容 内容
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT

[/html]

CSS

[css]
.table-c {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-c th?? ?{
color: #333;
font-weight: bold;
padding: 10px;
border-bottom: 3px solid #0CC;
}
.table-c td?? ?{
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}
[/css]

TABLE-D

table-d

HTMLソース
[html]

内容 内容 内容 内容
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT

[/html]

CSS
[css]
.table-d {
font-size: 12px;
margin: 20px;
width: 400px;
text-align: left;
border-collapse: collapse;
border: 1px solid #CCC;
}
.table-d th
{
padding: 10px;
color: #333;
border-bottom: 1px solid #CCC;
}
.table-d td
{
padding: 10px;
color: #666;
}
.table-d .color
{
background-color: #D5FAFB;
}
[/css]

にほんブログ村 デザインブログ Webデザインへ

↑WEBデザインブログランキングです

良かったら応援お願いします♪

関連記事

  1. CSS3メモ~背景画像のサイズを固定する

  2. ちゃんとCSSするためのスタイルガイド入門

  3. CSSだけでノート風の罫線を作る

  4. コピペでカンタン|シンプルでスタイリッシュな見出しを作るサンプル集

  5. Web creators 2006年 10月号

  6. W3Cバリデーションチェック