1. 完成表格的跨行合并功能
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>合并表格</title> </head> <body> <h3>合并表格</h3> <table border="1px" cellspacing="0px" cellpadding="10px" width="550px"> <!--标题--> <caption>购物车</caption> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>商品</th> <th>数量</th> <th>单价</th> <th>总金额</th> <th width="80">分类</th> <th width="160">操作</th> </tr> </thead> <!--表格主体--> <tbody align="center"> <tr> <td width="25" >1</td> <td width="50">苹果</td> <td width="50">2个</td> <td width="55">5</td> <td width="60">10元</td> <td rowspan="2">水果</td> <td><a href="#">删除</a>|<a href="#">编辑</a></td> </tr> <tr> <td>2</td> <td>草莓</td> <td>2个</td> <td>10</td> <td>20元</td> <td><a href="#">删除</a>|<a href="#">编辑</a></td> <!--<td>分类</td>--> </tr> <tr> <td>3</td> <td>毛巾</td> <td>1个</td> <td>15</td> <td>15元</td> <td rowspan="3">日用品</td> <td><a href="#">删除</a>|<a href="#">编辑</a></td> </tr> <tr> <td>4</td> <td>牙刷</td> <td>1个</td> <td>10元</td> <td>10元</td> <td><a href="#">删除</a>|<a href="#">编辑</a></td> <!--<td>分类</td>--> </tr> <tr> <td>5</td> <td>被子</td> <td>1个</td> <td>200元</td> <td>200元</td> <td><a href="#">删除</a>|<a href="#">编辑</a></td> <!--<td>分类</td>--> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="2">合计:</td> <!--<td>被子</td>--> <td>7个</td> <td>240元</td> <td colspan="2">255元</td> <td><a href="#">计算</a></td> <!--<td>分类</td>--> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例