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

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

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

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

TABLE-A

HTMLソース
[html]

[/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

HTMLソース
[html]

[/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

HTMLソース
[html]

[/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

HTMLソース
[html]

[/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デザインブログランキングです

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