テーブルの基本構造を知っておきましょう。
テーブルの基本構造については、こちらをご覧ください>> テーブルのシンプルデザイン
ここでは、テーブルの見出しにグラデーションを付けたいのデザインを元に、角丸を付ける方法をご紹介いたします。
| 名前 | 年齢 | 性別 |
|---|---|---|
| 浅井義久 | 20歳 | 男性 |
| 森村裕子 | 24歳 | 女性 |
上記のテーブルのHTML
<table align="" class="table3" style="width:70%">
<colgroup>
<col style="width: 50%;" />
<col style="width: 25%;" />
<col style="width: 25%;" />
</colgroup>
<caption>テーブルタイトル</caption>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>性別</th>
</tr>
</thead><tbody>
<tr>
<td>浅井義久</td>
<td>20歳</td>
<td>男性</td>
</tr>
<tr>
<td>森村裕子</td>
<td>24歳</td>
<td>女性</td>
</tr>
</tbody>
</table>
テーブルのHTMLの貼り付け方
クリックすると拡大表示されます。右ボタンで作業の順番が表示されます。
左側からクリックしてください。
CSS
<style type="text/css">
.table3{
border-collapse: separate;
border-spacing:0;
border:none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
border:1px solid #8A959F;
}
.table3 th{
border:none;
padding:5px 5px 7px;
font-size:90%;
font-weight:normal;
color:#FFF;
border:1px solid #729CC6;
border-right:1px solid #255788;
border-bottom:1px solid #255788;
background:linear-gradient(#3377BB,#255788);
text-shadow:1px 1px 2px rgba(255,255,255,0.7);
text-shadow:-1px -1px 2px rgba(0,0,0,0.7);
text-align:center;
}
.table3 td{
background:#f7f7f7;
font-weight:normal;
border:none;
border:1px solid #FFFFFF;
border-right:1px solid #B7C4D2;
border-bottom:1px solid #B7C4D2;
padding:5px 5px 7px;
font-size:90%;
color:#255788;
text-align:center;
}
.table3 caption{
text-align:left;
font-size:90%;
color:#333;
}
.table3 thead tr:first-child th:first-child{
-webkit-border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-o-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.table3 thead tr:first-child th:last-child{
-webkit-border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-o-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.table3 tbody tr:last-child td:first-child{
-webkit-border-radius:0 0 0 6px;
-moz-border-radius:0 0 0 6px;
-o-border-radius:0 0 0 6px;
border-radius:0 0 0 6px;
}
.table3 tbody tr:last-child td:last-child{
-webkit-border-radius:0 0 6px 0;
-moz-border-radius:0 0 6px 0 ;
-o-border-radius:0 0 6px 0;
border-radius:0 0 6px 0;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
