表格的跨行跨列 rowspan colspan

表格的跨行跨列

跨列(即横着占两个或两个以上的单元格)
colspan元素

<td colspan="2">1 1</td>

设置单元格跨横向两列

<td rowspan="2">2 1</td>

设置单元格跨纵向两行
当引号中的数字设置为2 则会占两列挨着的单元格 数字为几则会占几格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table cellspacing="0" border="1">
			<tr>
				<td colspan="2">1 1</td>
				<!--colspan元素设置跨列 就是设置的这个单元格
					要想保存此行的原有长度则需要删除此行的一个单元格
				-->
				<td>1 2</td>
				<td>1 3</td>
				<td>1 4</td>
				<td>1 5</td>
			</tr>
			<tr>
				<td rowspan="2">2 1</td>
				<!--rowspan元素设置跨行 就是设置的这个单元格会站两行
					要想保存此列的原有长度则需要删除此列的一个单元格
				-->
               <!--当引号中的数字设置为2 则会占两列挨着的单元格 数字为几则会占几格-->				
                <td>2 2</td>
				<td>2 3</td>
				<td>2 4</td>
				<td>2 5</td>
			</tr>
			<tr>
				<td rowspan="2" colspan="2">3 1</td>
				<!--占两行两列-->
				<td>3 2</td>
				<td>3 3</td>
				<td>3 4</td>
				<td>3 5</td>
			</tr>
			<tr>
				<td>4 1</td>
				<td>4 2</td>
				<td>4 3</td>
				<td>4 4</td>
				<td>4 5</td>
			</tr>
			<tr>
				<td>5 1</td>
				<td>5 2</td>
				<td>5 3</td>
				<td>5 4</td>
				<td>5 5</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45821251/article/details/108757308