明確目標(biāo)
我們需要實(shí)現(xiàn)這樣的表格
目標(biāo).png
任務(wù)列表
1.設(shè)定表格邊框和加上標(biāo)題
2.實(shí)現(xiàn)一個(gè)類似目標(biāo)表格的表格
3.合并表格以及把該居中的表格數(shù)據(jù)居中
4.加粗字體
任務(wù)拆分
1.首先先將表格的框框給設(shè)定好央星，以及寫上表格的標(biāo)題
<table border="1">//border負(fù)責(zé)設(shè)置邊框大小龙屉，也可以設(shè)置邊框的其他屬性
<caption>購(gòu)物車</caption>//caption是責(zé)設(shè)置表格標(biāo)題及將標(biāo)題居中
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
運(yùn)行結(jié)果
運(yùn)行結(jié)果.png
2.因?yàn)檫@是一個(gè)四行四列的表格，所以我們先將表格實(shí)現(xiàn)出來
<table border="1">
<caption>購(gòu)物車</caption>
<tr>//每個(gè)表格行由 tr 標(biāo)簽開始
<td>名稱</td>//每個(gè)表格數(shù)據(jù)由 td 標(biāo)簽開始
<td>2016-11-22</td>
<td>
</td>
<td>小計(jì)</td>
</tr>
<tr>
<td> </td>
<td>重量</td>
<td>單價(jià)</td>
<td> </td>
</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>總價(jià)</td>
<td> </td>
<td> </td>
<td>27元</td>
</tr>
</table>
運(yùn)行結(jié)果
初步表格.png
3.接下來我們負(fù)責(zé)合并表格并把該居中的表格數(shù)據(jù)居中
<tr>
<td rowspan="2">名稱</td>//rowspan是負(fù)責(zé)橫跨列單元格的套像，至于橫跨幾格可以自己設(shè)置
<td colspan="2">2016-11-22</td>//colspan是負(fù)責(zé)橫跨行單元格的，也是可以自己設(shè)置
<td rowspan="2">小計(jì)</td>
</tr>
<tr>
<td colspan="3" align="center">總價(jià)</td>//align是負(fù)責(zé)將表格數(shù)據(jù)定位的轧房，這里我們將數(shù)據(jù)設(shè)為居中
<td>27元</td>
</tr>
運(yùn)行結(jié)果
合并.png
4.將該加粗的字體加粗
<tr>
<th rowspan="2">名稱</th>//將td改為th便可以將字體加粗了
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計(jì)</th>
</tr>
最后整合一下代碼便可以得到目標(biāo)表格了口予。
用詞不夠嚴(yán)謹(jǐn)若有錯(cuò)誤之處歡迎指出胰坟。
