效果图
表格有用的属性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>
网友评论