目标效果
目标效果
html标签
- <tr>标签定义表格中的一行
- <th>标签定义表格中的表头
- <td>标签定义表格中的一列
- <thead>标签定义表格的页头
- <tbody>标签定义表格的主体
- <tfoot>标签定义表格的页脚
- rowspan和colspan属性分别设置表格的占用标准表格的几行和几列
详细的教程请点击这里：HTML Table学习
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table border="1">
<caption>购物车</caption>
<thead>
<tr>
<td rowspan="2">名称</td>
<td colspan="2">2016-11-22</td>
<td rowspan="2">小计</td>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
</thead>
<tbody>
<tr>
<th>苹果</th>
<th>3公斤</th>
<th>5元/公斤</th>
<th>15元</th>
</tr>
<tr>
<th>香蕉</th>
<th>2公斤</th>
<th>6元/公斤</th>
<th>12元</th>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价</td>
<td>27元</td>
</tr>
</tfoot>
</table>
</body>
</html>
