效果图
表格有用的属性rowspan、colspan、align
rowspan是跨行属性，图中的"名称"就是跨了两行，rowspan="2"就实现了跨两行的功能。
colspan是跨列属性，图中"总价"跨了三列，colspan="3"就实现了跨三列的功能。
在每个td里设置align="center"实现了单元格居中的样式。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p align="center">购物车</p>
<table border="1" align="center">
<tr>
<td align="center" rowspan="2">名称</td>
<td align="center" colspan="2"><b>2016-11-22</b></td>
<td align="center" rowspan="2">小计</td>
</tr>
<tr>
<td align="center">重量</td>
<td align="center">单价</td>
</tr>
<tr>
<td align="center">苹果</td>
<td align="center">3公斤</td>
<td align="center">5元/公斤</td>
<td align="center">15元</td>
</tr>
<tr>
<td align="center">香蕉</td>
<td align="center">2公斤</td>
<td align="center">6元/公斤</td>
<td align="center">12元</td>
</tr>
<tr>
<td align="center" colspan="3">总价</td>
<td align="center">27元</td>
</tr>
</table>
</body>
</html>
网友评论