cssでデザインするシンプルテーブル

web

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

<table class="sample_01">
<tbody>
<tr>
<th>SAMPLE01</th>
<th>デザイン</th>
<th>枠線</th>
<th>カラー</th>
</tr>
<tr>
<td>有料</td>
<td>プロ</td>
<td>有り</td>
<td>２１６色</td>
</tr>
<tr>
<td>無料</td>
<td>アマチュア</td>
<td>なし</td>
<td>モノトーン</td>
</tr>
</tbody>
</table>

ネタ元