利用HTML和CSS绘制出好看的表格
p1b.css
p1a.css
<html>
<head>
<meta charset="UTF-8">
<title>CS 142 Project 1,Problem 1</title>
<link rel="stylesheet" type="text/css" href="p1a.css"/>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="td1">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz</td>
<td>2.50</td>
<td>1</td>
<td>2.50</td>
</tr>
<tr class="td2">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td>2.79</td>
<td>2</td>
<td>5.58</td>
</tr>
<tr class="td1">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td>1.00</td>
<td>2</td>
<td>2.00</td>
</tr>
<tr class="td2">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td>1.99</td>
<td>1</td>
<td>1.99</td>
</tr>
<tr class="td1">
<td>Extra-Wide Egg Noodles</td>
<td>Golden</td>
<td>12 oz</td>
<td>0.87</td>
<td>3</td>
<td>2.61</td>
</tr>
<tr class="td6">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td>9</td>
<td>14.68</td>
</tr>
</table>
</body>
</html>
table {
font-family: Tahoma;
font-size: 13px;
border-collapse:collapse;
}
td,th{
border: solid white;
border-width: 3px 0px;
}
th{
background-color: #687291;
color: white;
font-weight: bold;
text-align: left;
}
tr.td1{
background-color: #eeeff2;
}
tr.td2{
background-color: #dfe1e7;
}
.td6{
border-top:5px black;
visibility: hidden;
}
tr>td{
padding-left: 3px;
padding-right: 17px;
}
tr>th{
padding-right: 5px;
}
tr>td+td+td~td{
text-align: center;
}
table {
padding: 20px;
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
border-spacing: 0 1px;
/*border-spacing: 0 1px设置相邻单元格的边框间的距离
如果不加这一句，每一个td都是分离的，如果设置某行所有td的 border-top为一条实线，
那么将会出现相邻的td线间出现间距，这里设置列间border-spacing为0，
可以将多个td的border-top拼接在一起形成一条直线*/
}
th {
text-align: left;
}
tr>td+td+td~td{/*这个选择器的意思是，tr里的第一个td再后数两个td，以及之后所有td*/
text-align: center;
}
.td6 td{/*在table没有collapse时，tr没有border属性，只有td可以设置border。.td6 td相当于.td6>td*/
border-top: 2px solid black;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
