下面我们来完成下图表格的效果
table.png
Step 1
通过学习,可以得出如下结构图:
表格.png注意:从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加
从表格效果图中可以看出,整个表格由标题,表头,表项组成,其中存在单元格跨行和跨列,并且存在边框。
Step 2
标题是:“购物车”,
表头是:“名称”,“重量”,“单价”,“小计”,“2016-11-22”,“苹果”,“香蕉”,“总价”。其中“名称”,“小计”纵向跨越2行,“2016-11-22”横向跨越2列,“总价”横向跨越3列。
其余的是表项。
可以看出需要完成的表格是5行4列
Step 3
按照如下步骤完成该表格。
- 创建表格,并添加标题。代码如下:
<table >
<caption>购物车</caption>
</table>
- 为表格添加边框。代码如下:
<table border="1">
<caption>购物车</caption>
</table>
- 形成5行4列的表格。代码如下:
<table border="1">
<caption>购物车</caption>
<tr>
<th>名称</th>
<th>2016-11-22</th>
<th></th>
<th>小计</th>
</tr>
<tr>
<td></td>
<th>重量</th>
<th>单价</th>
<td></td>
</tr>
<tr>
<th>苹果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<th>总价</th>
<td></td>
<td></td>
<td>27元</td>
</tr>
</table>
执行效果如下:
5行4列.png- 合并单元格,用colspan 和 rowspan。代码如下:
<table border="1">
<caption>购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
<tr>
<th>苹果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<th colspan="3">总价</th>
<td>27元</td>
</tr>
</table>
网友评论