一个后台展示页面需要一个子列可以动态划分出等份的行,如果是固定的还好,可以用rowspan解决,但是这里不固定,所以,只能在列中嵌套一个表了,然后再进行行遍历。
具体效果图-列表里边嵌套子表
代码:
<html>
<body>
<h2 align="center">合并表格行或列</h2>
<!--显示菜单-->
<table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px">
<tr>
<!--colspan="3"表该列要占用三列-->
<td align="center" colspan="3">菜谱</td>
</tr>
<tr>
<td rowspan="3">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小炒韭菜</td>
<td>白豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>清蒸龙</td>
<td>鱼香肉丝</td>
</tr>
<tr>
<td>小炒肉
<imgsrc="dog.jpg" width="70px" />
</td>
<td>水煮肉片</td>
</tr>
</table>
<h2 align="center">列里边嵌入子表</h2>
<table border="1" align="center" bordercolor="#E76BFF" height="200px" cellpadding="1px" cellspacing="0px" width="400px">
<caption>购物车</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>名称</td>
<td align=center>
<table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
<tr>
<td align=center>1</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>2</td>
</tr>
</table>
</td>
<td>
<table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
<tr>
<td align=center>1</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>2</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>3</td>
</tr>
</table>
</td>
<td>小计</td>
</tr>
<tr>
<td>名称</td>
<td align=center><b>2016-11-22</b></td>
<td>小计</td>
<td>小计</td>
</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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。