html5两列代码 html表格两列合并成一列

转载

gjnet 2023-07-03 11:42:26

文章标签 html5两列代码 html 心得介绍前端 文章分类 HTML5 移动开发

现在跟我一起学习一下行列的合并：

列的合并（属性：colspan）

贴代码来演示一下：

先来做一个3行3列的细线表格：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
	横向单元格的合并
</caption>
	<tr bgcolor="white">
	<td ></td>
	<td></td>
	<td></td>
	</tr>
	<tr bgcolor="white">
		<td></td>
		<td></td>
		<td></td>
	</tr>
		<tr bgcolor="white">
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>

效果如图所示：

html5两列代码 html表格两列合并成一列_html5两列代码

合并第一行的左侧两个单元格：

代码：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
	横向单元格的合并
</caption>
	<tr bgcolor="white">
	<td colspan="2"></td>   <!--因为把这个单元格看成两个来处理，因此要再下边去掉一个单元格-->
	<!-- <td></td> -->
	<td></td>
	</tr>
	<tr bgcolor="white">
		<td></td>
		<td></td>
		<td></td>
	</tr>
		<tr bgcolor="white">
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>

效果如图所示：

html5两列代码 html表格两列合并成一列_心得_02

纵向单元格的合并（属性 rowspan）：

同理创建一个3行3列的细线表格，在此就不贴代码了，和上面的一样。

然后合并第一二行的单元格。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<table bgcolor="black" border="1px" width="300px" height="300px" align="center">
<caption>
	纵向单元格的合并
</caption>
	<tr bgcolor="white">
	<td rowspan="2"></td>    <!--因为把它看成第一行和第二行两个单元格，因此要把第二行的单元格去掉一个-->
	<td></td>
	<td></td>
	</tr>
	<tr bgcolor="white">
		<!-- <td></td> -->
		<td></td>
		<td></td>
	</tr>
		<tr bgcolor="white">
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>

html5两列代码 html表格两列合并成一列_html_03