实现如下表格
分析:
该表格为五行四列,其中头部包括两行,内容为两行,最后一行为统计的内容;
其中“名称”、“2016-11-22”、“重量”、“单价”、“小计”、“苹果”、“香蕉”、“总价”均加粗可视为标题,
第一行中时间横跨两列,最后一行中“总价”横跨三列;
第一行的“名称”竖跨两行,最后一列中的“小计”竖跨两行。
代码内容
<table border="1">
<theader>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
</theader>
<tbody>
<tr>
<th>苹果</th>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<th>香蕉</th>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
</tbody>
<tfoot>
<th colspan="3">总价</th>
<td>27元</td>
</tfoot>
</table>
代码分析:
通过colspan以及rowspan实现跨列和跨行;
使用th标签达到加粗的标题