下面我們來(lái)完成下圖表格的效果
table.png
Step 1
通過學(xué)習(xí)，可以得出如下結(jié)構(gòu)圖：
表格.png
注意：從實(shí)用角度出發(fā)，最好不要規(guī)定 frame，而是使用 CSS 來(lái)添加
從表格效果圖中可以看出，整個(gè)表格由標(biāo)題，表頭，表項(xiàng)組成，其中存在單元格跨行和跨列，并且存在邊框。
Step 2
標(biāo)題是：“購(gòu)物車”，
表頭是：“名稱”，“重量”，“單價(jià)”，“小計(jì)”，“2016-11-22”，“蘋果”，“香蕉”，“總價(jià)”。其中“名稱”，“小計(jì)”縱向跨越2行，“2016-11-22”橫向跨越2列，“總價(jià)”橫向跨越3列。
其余的是表項(xiàng)。
可以看出需要完成的表格是5行4列
Step 3
按照如下步驟完成該表格。
- 創(chuàng)建表格，并添加標(biāo)題。代碼如下：
<table >
<caption>購(gòu)物車</caption>
</table>
- 為表格添加邊框。代碼如下：
<table border="1">
<caption>購(gòu)物車</caption>
</table>
- 形成5行4列的表格。代碼如下：
<table border="1">
<caption>購(gòu)物車</caption>
<tr>
<th>名稱</th>
<th>2016-11-22</th>
<th></th>
<th>小計(jì)</th>
</tr>
<tr>
<td></td>
<th>重量</th>
<th>單價(jià)</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>總價(jià)</th>
<td></td>
<td></td>
<td>27元</td>
</tr>
</table>
執(zhí)行效果如下：
5行4列.png
- 合并單元格，用colspan 和 rowspan。代碼如下：
<table border="1">
<caption>購(gòu)物車</caption>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
</tr>
<tr>
<th>重量</th>
<th>單價(jià)</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">總價(jià)</th>
<td>27元</td>
</tr>
</table>
