HTML的table中如何合并多行?

现在有一个table,4行1列,要把上面3行合并(效果就是高度之比为3:1),怎么写?我本来以为下面这样是可以的:<tableborder="1"><tr><tdrows... 现在有一个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来实现这个效果?
展开
 我来答
大野瘦子
高粉答主

推荐于2019-10-09 · 繁杂信息太多,你要学会辨别
知道小有建树答主
回答量:1227
采纳率:100%
帮助的人:33.9万
展开全部

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>

elizaniall
2009-12-29
知道答主
回答量:22
采纳率:0%
帮助的人:0
展开全部
高度之比为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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
世道路险通通6
推荐于2017-11-25 · TA获得超过137个赞
知道答主
回答量:36
采纳率:0%
帮助的人:30.1万
展开全部
跨多行、多列的表元(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>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2010-01-05
展开全部
当然可以呀
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
csharpxml
2009-12-28 · TA获得超过590个赞
知道小有建树答主
回答量:371
采纳率:0%
帮助的人:283万
展开全部
<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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式