HTML不使用Table标签怎么写出Table表格的效果-大型CMS开发实战第九期 - 作业

今天在这里分享HTML如何在不使用Table标签怎么写出Table表格的效果！首先第一步给自己定一个小目标，就写一个上学时期的课程表把！
实例
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>如何在不使用Table标签怎么写出Table表格的效果</title>
		<meta name="Keywords" content=""/>
		<meta name="Description" content=""/>
		
		<style>
			*{
				padding: 0;
				margin: 0;
				font-size: 1rem;
			}
			
			/* body {
				background: #000000;
			} */
			
			.table {
				width: 607px;
				height: 300px;
				display: table;
				text-align: center;
				box-sizing: border-box;
				margin: 0 auto;
				position: relative;
			}
			
			.table-caption {
				padding: 10px;
				display: table-caption;
				
			}
			
			.table-caption > h1 {
				color: cadetblue;
				font-size: 1.4rem;
			}
			
			.table-thead {
				display: table-header-group;
			}
		
			.table-row {
				display: table-row;
				height: 40px;
				
			}
			
			.table-row:first-of-type >.table-td  {
				border-top: 1px solid rgba(0,0,0,.3);
			}
			
			.table-tbody {
				display: table-row-group;
				
			}

			.table-td {
				display: table-cell;
				border-bottom: 1px solid rgba(0,0,0,.3);
				border-right: 1px solid rgba(0,0,0,.3);
				width: 100px;
				height: 40px;
				line-height: 40px;
				
			}
			
			.table-td:first-of-type{
				border-left: 1px solid rgba(0,0,0,.3);
			}
			
			.table-tfoot{
				display: table-footer-group;
				position: relative;
			}
			
			.table-tfoot > .table-td:first-of-type { 
				width: 101px;
				background: linear-gradient(greenyellow,cadetblue);
				color: #333;
				position: absolute;
				left: 0;
			}
			
			.table-tfoot > .table-td:last-of-type {
				width: 506px;
				background: linear-gradient(greenyellow,cadetblue);
				color: #333;
				position: absolute;
				left:101px;
			}
			
			.table-tbody > .table-row:nth-last-of-type(4) > .table-td:first-of-type {
				width: 241px;
				background: yellow;
				color: #333;
				position: absolute;
				left: 0;
			}
			
			.table-tbody > .table-row:nth-last-of-type(4) > .table-td:last-of-type {
				width: 364px;
				background: yellow;
				color: #333;
				position: absolute;
				left:243px;
			}
			
			
		</style>
		
	</head>
	<body>
		<div class="table">
			<!-- 这里是表格页头部分 -->
			<div class="table-caption">
				<h1>七年级(15)班课程表</h1>
			</div>
			
			<!-- 给table-thead加上 display:table-header-group属性后，等同于Table 内的thead  -->
			<div class="table-thead">
				
				<!-- 给table-row 加上 display:table-row属性后，等同于Table 内的tr -->
				<div class="table-row">
					
					<div class="table-td">
						星期一
					</div>
					<div class="table-td">
						星期二
					</div>
					<div class="table-td">
						星期三
					</div>
					<div class="table-td">
						星期四
					</div>
					<div class="table-td">
						星期五
					</div>
				</div>
			</div>
			
			<div class="table-tbody">
					<!-- 给table-row 加上 display:table-row属性后，等同于Table 内的tr -->
					<div class="table-row">
						
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					
					
					<div class="table-row">
						
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					
					<div class="table-row">
						
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					
					<div class="table-row">
						
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					
					<div class="table-row">
						<div class="table-td">
							上午：7：20 - 11：40
						</div>
						
						<div class="table-td">
							下午：14：20 - 17：40
						</div>
					</div>
					
					<div class="table-row">
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					<div class="table-row">
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							数学
						</div>
					</div>
					<div class="table-row">
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							语文
						</div>
						<div class="table-td">
							英语
						</div>
						<div class="table-td">
							数学
						</div>
						<div class="table-td">
							
						</div>
					</div>
			</div>
			
			<div class="table-tfoot">
				<div class="table-td">
					提示：
				</div>
				<div class="table-td">
					如遇到特殊情况课程需要调整时，会在群内另行通知
				</div>
			</div>
			
		</div>
	
		
	</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：下次不要把一天作业分成几个博客提交了, 不好核查