简单表格
table.html代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css">
<meta charset="utf-8">
<title>So bored</title>
</head>
<body>
<table>
<caption>Alternating Row Colors</caption>
<tr>
<th>Item</th>
<th>Description</th>
<th>Cost</th>
<th>Subtotal</th>
</tr>
<tr class="two">
<td>Imation CD-R 25pk</td>
<td>Blank CDs 25pk 700mb data and audio</td>
<td>16.99</td>
<td>16.99</td>
</tr>
<tr class="one">
<td>Biro</td>
<td>Bic biro black</td>
<td>25</td>
<td>17.24</td>
</tr>
<tr class="two">
<td>Envelopes</td>
<td>25 pack DL size brown</td>
<td>2.50</td>
<td>19.74</td>
</tr>
<tr class="one">
<td>Pencils</td>
<td>10xHB pencils</td>
<td>1.50</td>
<td>21.24</td>
</tr>
<tr class="two">
<td>Value Paper Reem</td>
<td>500 sheets economy deskjet paper</td>
<td>2.50</td>
<td>23.74</td>
</tr>
<tr class="one">
<td>Bulldog Clip</td>
<td>Large silver bulldog</td>
<td>1.80</td>
<td>25.54</td>
</tr>
<tr class="two">
<td>Elastic bands</td>
<td>100 pack multi-color elashc bands</td>
<td>0.99</td>
<td>26.99</td>
</tr>
</table>
</body>
</html>
table.css
body{
background-color: white;
}
table{
padding: 15px;
}
table caption{
font-size: 28px;
font-weight: bolder;
text-align:left;
}
th{
font-size: 16px;
font-weight: bolder;
background-color: #E0E0E0;
}
.one{
background-color: #E0E0E0;
}
.two{
background-color:#B2B2B2;
}
扫一扫
7089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
