HTML的table中如何合并多行？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML的table中如何合并多行？相关的知识，希望对你有一定的参考价值。
现在有一个table，4行1列，要把上面3行合并（效果就是高度之比为3：1），怎么写？
我本来以为下面这样是可以的：
<table border="1" >
<tr><td rowspan="3" >xx</td></tr>
<tr><td rowspan="1">zz</td></tr>
</table>
但得出的却是2个高度一样的行。
请问各位该怎么写？
其实我想搞清楚的是：能不能用rowspan来实现这个效果？
1、跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th><!--rowspan=3，跨三行表元-->
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
2、跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th> <!--colspan=3，跨三列表元-->
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
扩展资料：
有合并就有拆分，下面是拆分的方法
拆分行：
<%@ page contentType="text/html;charset=ISO-8859-1" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table
font-size:10pt;
border:1px solid #808080;
th
border-bottom:1px solid #808080;
border-right:1px solid #808080;
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table id="table1" width="100%" cellspacing="0" cellpadding="0">
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFF;height:25px;">
<th rowspan="3">1-1</th>
<th rowspan="3">1-2</th>
<th rowspan="2">1-3</th>
<th rowspan="1">1-4</th>
<th rowspan="3">1-5</th>
</tr>
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFF;height:30px;">
<th>2-4</th>
</tr>
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFF;height:30px;">
<th>2-3</th>
<th>3-4</th>
</tr>
</table>
</form>
</body>
</html>
参考技术A 高度之比为3：1，你设置高度百分比不就可以了么。<html>
<body>
<table border="1" width=100% height=100%>
<tr height="75%"><td>xx</td></tr>
<tr height="25%"><td>zz</td></tr>
</table>
</body>
</html> 参考技术B 跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th> <!--colspan=3，跨三列表元-->
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th><!--rowspan=3，跨三行表元-->
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table> 参考技术C 当然可以呀 参考技术D <table border="1" style="height:120px;table-layout;font-size:14px;">
<tr><td style="height:90px;line-height:30px;">上面第一行<br />第二行<br />第三行</td></tr>
<tr><td style="height:30px;">下面一行</td></tr>
</table>本回答被提问者采纳
asp.net中的table控件怎么合并单元格
我想知道，那位高手可以指点一下？
用Html的Table就可以了<table>
<tr><td>单元格1</td><td>单元格2</td></tr>
<tr><td colspan="2">合并</td></tr>
</table>
希望以上的回答对你有所帮助 参考技术A 不要太依赖控件，你可以去 源视图中修改控件自动生成的html代码，把两个td合并不就ok了吗？ 参考技术B 可以
以上是关于HTML的table中如何合并多行？的主要内容，如果未能解决你的问题，请参考以下文章
求大神指点elementUI table如何合并第二三列，如何根据后台返回的数据合并行