收藏
批改状态：合格
老师批语：下次不要把一天作业分成几个博客提交了, 不好核查
今天在这里分享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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
