![]()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.goods_list{
width:600px;
height:200px;
border-collapse:collapse;
}
.goods_list th, .goods_list td{
border: 1px solid #dddddd;
text-align: center;
}
.goods_list th{
background: #5289ce;
color: white;
}
/*text-align: center; 设置水平居中*/
/*border-collapse:collapse; 合并表格*/
/*border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格*/
/*table常用标签*/
/*1、table标签：声明一个表格*/
/*2、tr标签：定义表格中的一行*/
/*3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格*/
/*table常用属性：*/
/*1、border 定义表格的边框*/
/*2、cellpadding 定义单元格内内容与边框的距离*/
/*3、cellspacing 定义单元格与单元格之间的距离*/
/*4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right*/
/*5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom*/
/*6、colspan 设置单元格水平合并*/
/*7、rowspan 设置单元格垂直合并*/
</style>
</head>
<body>
<table class="goods_list" >
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>备注</th>
</tr>
<tr>
<td>01</td>
<td>苹果</td>
<td>1000</td>
<td>￥ 5.00</td>
<td><a href="#">立即发货</a>
<a href="#"> 退款</a>
</td>
</tr>
<tr>
<td>02</td>
<td>葡萄</td>
<td>1000</td>
<td>￥ 5.00</td>
<td><a href="#">立即发货</a>
<a href="#"> 退款</a>
</td>
</tr>
<tr>
<td>03</td>
<td>火龙果</td>
<td>1000</td>
<td>￥ 5.00</td>
<td><a href="#">立即发货</a>
<a href="#"> 退款</a>
</td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号