在上一篇文章中我們介紹了列表的實(shí)現(xiàn)年缎，戳這里列表實(shí)現(xiàn)。
在網(wǎng)頁中铐然，我們經(jīng)常能看到各式各樣的表格宪摧，所以我們就來學(xué)習(xí)一下表格的常用標(biāo)簽和實(shí)現(xiàn)。今天要實(shí)現(xiàn)的表格是這個(gè)樣子的龄寞。
目標(biāo)表格
分析：
從大的方面講，這個(gè)表格由頁頭，主體和頁腳三部分構(gòu)成椎镣，細(xì)節(jié)上表格有表名，邊框兽赁，并且有些表項(xiàng)會(huì)出現(xiàn)跨行跨列的情況状答，同時(shí)表格中的文字全部居中冷守。
預(yù)備知識(shí)：
- 表格基本的標(biāo)簽
| 標(biāo)簽 | 含義 |
|---|---|
| <table> | 定義HTML文檔中的表格 |
| <thead> | 定義表格的頁頭 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
| <tr> | 定義表格中的一行 |
| <th> | 定義表格中的表頭 |
| <td> | 定義表格中的一列 |
| caption | 給表格設(shè)置標(biāo)題 |
- 表名的設(shè)置
<table>
<caption>購物車</caption>
</table>
- 邊框的設(shè)置
<table border="1"> </table>
border后面的這個(gè)參數(shù)代表邊框的寬度，根據(jù)實(shí)際需要可以選擇1惊科、2拍摇、3等數(shù)字。
- 跨行跨列的處理
colspan和rowspan分別設(shè)置表格占用標(biāo)準(zhǔn)表格的幾列和幾行馆截，
<td rowspan="2">名稱</td> 名稱占兩行
<td colspan="2">總價(jià)</td> 總價(jià)占兩列
- 文字居中
在標(biāo)簽thead充活、tbody和tfoot中，分別加上align="center"
<thead align="center"></thead>
<tbody align="center"></tbody>
<tfoot align="center"></tfoot>
實(shí)現(xiàn)過程
- 首先孙咪，我們實(shí)現(xiàn)表名和表格的head部分堪唐，具體代碼如下：
<body>
<table border="2">
<caption>購物車</caption>
<thead align="center">
<tr>
<td rowspan="2">名稱</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小計(jì)</td>
</tr>
<tr>
<td>重量</td>
<td>單價(jià)</td>
</tr>
</thead>
</table>
</body>
效果圖如下：
第一步效果圖
- 接著，實(shí)現(xiàn)表格的body部分翎蹈，body部分代碼如下：
<tbody align="center">
<tr>
<td>蘋果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>２公斤</td>
<td>６元/公斤</td>
<td>1２元</td>
</tr>
</tbody>
第二步效果圖如下：
第二步效果圖
- 最后淮菠，實(shí)現(xiàn)表格的foot部分，foot部分代碼如下：
<tfoot align="center">
<tr>
<td colspan="3">總價(jià)</td>
<td>27元</td>
</tr>
</tfoot>
最終的效果圖：
最終效果圖
本文的全部代碼在github中可以查看荤堪。
