今天來完成下面的表格
需要實現(xiàn)的表格
border設(shè)置表格邊框
這個表格是有邊框的，所以需要進行設(shè)置扩灯。
代碼如下：
<table border="1"> </table>
caption 設(shè)置標題
可以看到這個表格是有一個標題赖草，我們使用 caption 來添加表格的標題。
代碼如下：
<table border="1">
<caption>購物車</caption>
</table>
這個運行結(jié)果就不寫了磅摹。
實現(xiàn)一個簡單的5行4列的表格
簡單講一下實現(xiàn)這個表格會用到哪些標簽：
-
<tr>標簽是來定義一行的 -
<th>標簽定義表格中的表頭 -
<td>標簽定義表格中的一列 -
<thead>標簽定義表格的頁頭 -
<tbody>標簽定義表格的主體 -
<tfoot>標簽定義表格的頁腳
代碼如下：
<table border="1">
<caption>購物車</caption>
<thead>
<tr>
<th>名稱</th>
<th>2016-11-22</th>
<th></th>
<th>小計</th>
</tr>
<tr>
<th></th>
<th>重量</th>
<th>單價</th>
<th></th>
</tr>
</thead>
<tbody>
<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>
</tbody>
<tfoot>
<tr>
<td>總計</td>
<td></td>
<td></td>
<td>27元</td>
</tr>
</tfoot>
</table>
效果如下：
合并表格空白處
使用 colspan 和 rowspan 來合并。
colspan 是用來合并列
rowspan 是用來合并行
代碼如下：
<table border="1">
<caption>購物車</caption>
<thead>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計</th>
</tr>
<tr>
<th>重量</th>
<th>單價</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
<tfoot>
<tr>
<td colspan="3">總計</td>
<td>27元</td>
</tr>
</tfoot>
</table>
運行效果：
這樣就實現(xiàn)了這個表格霎奢。
