怎么在html里把一行中的两列合并?

html-css08

怎么在html里把一行中的两列合并?,第1张

colspan等于几就是合并几个单元格这是合并列

colspan="2"colspan等于几就是合并几个单元格这是合并列rowspan="2"这个是合并行它们是写在<td>标签里的。

合并单元格 行合并就设置td的colspan属性为要合并的单元格个数 列合并就设置td的rowspan。

此时会弹出一个“拆分单元格”对话框,在其中设置单元格拆分的行列数,例如,现在选择将其拆分成3列1行,然后单击“确定”按钮。

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/htmlcharset=ISO-8859-1" language="java" %>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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:#FFFFFFheight: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:#FFFFFFheight:30px">

<th>2-4</th>

</tr>

<tr align="center" bgcolor="#3E3695" style="color:#FFFFFFheight:30px">

<th>2-3</th>

<th>3-4</th>

</tr>

</table>

</form>

</body>

</html>