本节将为大家讲解 HTML 如何实现下图所示表格效果，先来看看最终实现效果吧！
table.png
- 新建 table.html 文件，并输入以下框架代码（本文编辑器采用Notepad++）；
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>
- 对题目要求表格进行分析，可以发现该表格包含：表格标题，表头和内容三部分，且表格共有五行。首先我们先创建表格标题，caption 标签指定表格标题，代码如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<table border="1">
<caption>购物车</caption>
</table>
</body>
</html>
- 其次，创建五行内容，其中两行为表头，三行为内容。行用 <tr> 标签表示，代码如下所示：
<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>
- 其次，构建表头。表头包含两行，“名称”和“小计”均占用两行一列行，“2016-11-22”占用一行两列，“重量”和“单价”均占用一行一列。rowspan 属性指定单元格占用行数，colspan 属性指定单元格占用列数，因此表头构建代码如下所示：
<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行内容，代码如下所示：
<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行内容，其中“总价”占用一行三列，且居中显示。属性
colspan="3"实现单元格占用三列效果，属性align="center"实现居中显示效果，因此表格最终代码实现如下所示：
<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>
相关资料：
W3School上的HTML教程：http://www.w3school.com.cn/tags/tag_table.asp
源码 Github 链接：https://github.com/anyangxaut/HTML-Learning-Demo
