cssでデザインするシンプルテーブル
htmlだけでは面倒なテーブルのデザインも、スタイルシートを使用することで、簡単にかっこいいテーブルがでデザインできます。ホームページ作りも楽になり、htmlもシンプルになります。決め手は配色でしょうか。見やすさ!?
Sample1 超シンプルで定番のテーブル
SAMPLE01 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
隣接するセルのボーダーを重ねて表示するために、border-collapseに collapseを指定します。
thは、tdと同様にセルを意味するタグですが、thは表の見出しになるタグです。thタグ内の記述は、表の見出しとして認識され、強調表示されます。デフォルト(何も指定しなければ)は自動的に、太字になり、セルの中でセンタリングされます。
ちなみに、border-collapse: collapse; を記述しない、又は、border-collapse: separate にすると、下記のテーブルのようにボーダーが重なりません。
SAMPLE01 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
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;
}
html ↓
Sample2
SAMPLE02 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
border-collapse: separate; border-spacing:0;
を組み合わせて
border-spacingプロパティは、border-collapseプロパティの値がseparateの場合だけ有効です。
css ↓
.sample_02{
width:100%;
border-collapse: separate;
border-spacing: 0px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.sample_02 th{
width: 25%;
padding: 4px;
text-align: left;
vertical-align: top;
color: #444;
background-color: #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.sample_02 td{
padding: 4px;
background-color: #fafafa;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
html ↓
Sample3
Sample2の横型
SAMPLE03 | プロ |
---|---|
デザイン | スタイルシート |
カラー | オレンジ |
sample css ↓
.sample_03{
width: 100%;
border-collapse: separate;
border-spacing: 0px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.sample_03 th{
width:25%;
padding:4px;
text-align: left;
vertical-align: top;
color: #444;
background-color: #feedf3;
border-left: 3px double #999;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.sample_03 td{
width:75%;
padding:4px;
background-color: #fafafa;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
html ↓
Sample4
見出しのオレンジの枠線をわざと上に飛び出した感じに
SAMPLE04 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
css ↓
.sample_04{
width: 100%;
border-collapse: collapse;
border-right: 1px solid #999;
}
.sample_04 th{
width: 25%;
padding: 6px;
text-align: left;
vertical-align: top;
color: #fff;
background-color: #555;
border-left: 5px solid #ff6633;
border-top: 1px solid #fff;
}
.sample_04 td{
width: 25%;
padding: 6px;
background-color: #fff;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
html ↓
Sample5
thに画像を使ったテーブル
SAMPLE05 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
SAMPLE05 | デザイン | 枠線 | カラー |
---|---|---|---|
有料 | プロ | 有り | 216色 |
無料 | アマチュア | なし | モノトーン |
css ↓
.sample_05{
width: 100%;
border-collapse: collapse;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.sample_05 th{
width:25%;
padding: 6px; text-align: left;
vertical-align: top;
color: #666666;
background: url(bg.jpg) repeat-x top left #eee;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
.sample_05 td{
width: 25%;
padding: 6px;
border-bottom: 1px dotted #999;
border-left: 1px solid #ccc;
}
html ↓