作业内容
0_1479544895949_upload-9102d3f5-89ae-49b7-943e-0deb84b6ef38
知识点：HTML 表格
表格标签
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义用于表格列的属性
<colgroup> 定义表格列的组
合并属性
colspan 列合并
rowspan 行合并
边框属性
border = 边框粗细
思路
如图实现思路：
- 五行四列的一个含标题的表格
有边框
第一行的第一列和第四列与下一行的对应列进行合并
第一行的第二列与第二列进行列合并并且该列为表头
最后一行的前三列进列合并并且该列为表头
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body><table border="1">
<caption>购物车</caption>
<tr>
<td rowspan="2">名称</td>
<th colspan="2">2016-11-22</th>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<th colspan="3">总价</th>
<td>27元</td>
</tr>
</table>
</body>
</html>
网友评论