HTML的table中如何合并多行？
我本来以为下面这样是可以的：
<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>
<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>
跨多列的表元 <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>
<tr><td style="height:90px;line-height:30px;">上面第一行<br />第二行<br />第三行</td></tr>
<tr><td style="height:30px;">下面一行</td></tr>
</table>
|
广告 您可能关注的内容 |
