![]()
<!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号