我们的任务是这样哒：
表格实现
下笔之前
- 分析表格，有标题，内容两部分，内容中包括跨行跨列的表格
- 搜一下教程，菜鸟教程里面很详细，例子也很明了
- 复习有关表格的标签用法
- 看了几个关于跨行跨列的例子代码，明白其中写法
- 在自己电脑上试一下怎么实现跨行跨列
- 开始实现完整的表格
写好的代码
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PracticeForm</title>
</head>
<body>
<table border="1">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</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>
</pre>
学到的
-
border用来设置表格的边界 -
<caption></caption>用来设置表格标题 - 跨行跨列问题
<tr> <th rowspan="2">跨两列</th> <th colspan="2">跨两行</th> </tr> - 写表格的时候一行一行按顺序写，对于跨列问题，与它对齐的第一行为起始位置，之后合并单元格
网友评论