CSS中的表格2️⃣之合并/拆分单元格以及单元格中在存放表格(跨行或者跨列)

最新推荐文章于 2023-09-25 15:24:06 发布

原创最新推荐文章于 2023-09-25 15:24:06 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 表格合并拆分单元格跨行跨列

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

HTML与CSS

14 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用rowspan和colspan属性来实现表格数据的跨行与跨列显示，通过具体代码示例展示了如何减少重复信息，使表格布局更加灵活高效。

需求:在consequence中,增加了一条记录,并且重用了两个信息没有改变的单元格.也就是增加新行的时候,只需要列出要增加的不同的信息
       consequence August 9 93 4242ft 7289 5/5
                       August 27 98 4/5
       HTML中可以使用rowspan属性指定一个表格数据单元格占多少行,然后从这个单元格所跨越的其他行中
       删除相应的表格数据元素.看例子先咯
       ok,看过例子之后,我们继续看下跨列,只需要为td元素添加一个colspan属性,然后指定列数就可以了.
       与rowspan不同,跨多列的时候,需要删除同一行中表格数据元素;看例子咯
       另外td中可以同时出现colspan和rowspan

先看下效果图

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格1</title>

		<style type="text/css">
			td,
			th {
				border: 1px solid black;
				/* 单元格设置边框 */
			}
			table {
				margin-left: 20px;
				margin-right: 20px;
				border: thin solid black;
				/* 表格标题在表格的下方 */
				caption-side: bottom;
				/* border-spacing: 10px 30px; */
				border-collapse: collapse;
			}
			th,
			td {
				border: thin dotted gray;
			}

			th {
				background-color: #00FFFF;
			}

			caption {
				font-style: italic;
				padding-top: 8px;
			}

			.text-center {
				text-align: center;
			}

			.text-right {
				text-align: right;
			}

			.cell-color {
				background-color: #fcba7a;
			}
			
		
		
		</style>
	</head>
	<body>
		<!-- 分析;一共是7行6列 -->
		<div>
			<table style="margin-top: 100px;">
				<tr>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
				</tr>
				<tr>
					<td >june16</td>
					<td >75</td>
					<td >1204ft</td>
					<td >29686</td>
					<td >4/5</td>
					<td >4/5</td>
				</tr>
				<tr>
					<td rowspan="2">june16</td>
					<td >75</td>
					<td rowspan="2">1204ft</td>
					<td rowspan="2">29686</td>
					<td >4/5</td>
					<td >4/5</td>
				</tr>
				<tr>
					<td >75</td>
					<td >4/5</td>
					<td >4/5</td>
				</tr>
	
			</table>
				<table style="margin-top: 100px;">
					<tr>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
					</tr>
					<tr>
						<td >june16</td>
						<td >75</td>
						<td >1204ft</td>
						<td >29686</td>
						<td >4/5</td>
						<td >4/5</td>
					</tr>
					<tr >
						<td >june16</td>
						<td >75</td>
						<td >1204ft</td>
						<td >29686</td>
						<td >4/5</td>
						<td >4/5</td>
					</tr>
					<tr>
						<td >75</td>
						<td colspan="5">4/5</td>
					</tr>
		
				</table>
		</div>
	</body>
</html>