表格的跨行跨列 rowspan colspan

最新推荐文章于 2023-10-25 23:00:00 发布

你好牛蛙

最新推荐文章于 2023-10-25 23:00:00 发布

阅读量826

点赞数 2

分类专栏： html+css笔记文章标签： html html5

本文链接：https://blog.csdn.net/qq_45821251/article/details/108757308

版权

html+css笔记专栏收录该内容

33 篇文章 2 订阅

订阅专栏

表格的跨行跨列

跨列(即横着占两个或两个以上的单元格)
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>

在这里插入图片描述

你好牛蛙

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
表格的跨行跨列 rowspan colspan

表格的跨行跨列跨列(即横着占两个或两个以上的单元格)colspan元素<td colspan="2">1 1</td>设置单元格跨横向两列<td rowspan="2">2 1</td>设置单元格跨横向两行当引号中的数字设置为2 则会占两列挨着的单元格数字为几则会占几格<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <
复制链接

扫一扫