本節(jié)將為大家講解 HTML 如何實現(xiàn)下圖所示表格效果最疆，先來看看最終實現(xiàn)效果吧助被！
table.png
- 新建 table.html 文件罕邀，并輸入以下框架代碼（本文編輯器采用Notepad++）爆存；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
- 對題目要求表格進(jìn)行分析六荒，可以發(fā)現(xiàn)該表格包含：表格標(biāo)題护姆，表頭和內(nèi)容三部分，且表格共有五行掏击。首先我們先創(chuàng)建表格標(biāo)題卵皂，caption 標(biāo)簽指定表格標(biāo)題，代碼如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
</table>
</body>
</html>
- 其次砚亭，創(chuàng)建五行內(nèi)容灯变，其中兩行為表頭，三行為內(nèi)容捅膘。行用 <tr> 標(biāo)簽表示添祸，代碼如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
- 其次，構(gòu)建表頭寻仗。表頭包含兩行刃泌，“名稱”和“小計”均占用兩行一列行，“2016-11-22”占用一行兩列，“重量”和“單價”均占用一行一列耙替。rowspan 屬性指定單元格占用行數(shù)亚侠，colspan 屬性指定單元格占用列數(shù)，因此表頭構(gòu)建代碼如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計</th>
</tr>
<tr>
<th>重量</th>
<th>單價</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
- 接下來林艘，填充表格第3~4行內(nèi)容盖奈，代碼如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計</th>
</tr>
<tr>
<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>
</tr>
</table>
</body>
</html>
- 最后，填充表格第5行內(nèi)容狐援，其中“總價”占用一行三列钢坦，且居中顯示。屬性
colspan="3"實現(xiàn)單元格占用三列效果啥酱，屬性align="center"實現(xiàn)居中顯示效果爹凹，因此表格最終代碼實現(xiàn)如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>購物車</caption>
<tr>
<th rowspan="2">名稱</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小計</th>
</tr>
<tr>
<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 colspan="3" align="center">總價</td>
<td>27元</td>
</tr>
</table>
</body>
</html>
相關(guān)資料：
W3School上的HTML教程：http://www.w3school.com.cn/tags/tag_table.asp
源碼 Github 鏈接：https://github.com/anyangxaut/HTML-Learning-Demo
