一. 所要實現的表格
購物車表格
二 .實現過程
分析第一步
- 是一個5行4列的表格
- 表格樣式 border 寬為1px ,文字居中
代碼實現如下
<table border="1" style="text-align: center">
<caption>購物車</caption>
<tr>
<th>名稱</th>
<th>2016-11-22</th>
<th></th>
<th>小計</th>
</tr>
<tr>
<th></th>
<th>重量</th>
<th>單價</th>
<th></th>
</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>
<td>總計</td>
<td></td>
<td></td>
<td>27元</td>
</tr>
</table>
此時，頁面效果為：
頁面初步效果
分析第二步
發現與要實現的表格不一樣，原因是沒有合并單元格
colspan 合并列單元格
rowspan合并行單元格
運用合并單元格后，頁面效果為：
合并單元格后
好了，表格實現完畢。
每天都努力一點
謝謝你看完
