css学习第二天--表格样式
2018-08-28 本文已影响4人
胆小的米老鼠
创建表格样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格样式</title>
<!--定义类样式,层级样式-->
<style type="text/css">
.goods_list{
width:600px;
height:200px;
font-size: 20px;
font-family: "Microsoft Yahei";
border: 1px solid #333;
border-collapse: collapse;
}
.goods_list th, .goods_list td {
border: 1px solid #333;
text-align: center;
}
.goods_list th{
background-color: #3366cc;
color: #ffffff;
}
</style>
</head>
<body>
<!--定义样式后 ，在表格里用class标签引用-->
<table class="goods_list">
<tr>
<th>名称</th>
<th >重量</th>
<th>价格</th>
<th>状态</th>
</tr>
<tr>
<td>苹果</td>
<td>1kg</td>
<td>$0.8</td>
<td>正常</td>
</tr>
<tr>
<td>桔子</td>
<td>10Kg</td>
<td>$1</td>
<td>正常</td>
</tr>
</table>
</body>
</html>
展示效果：
image.png
