html课程表(html+css)

时间:2024-03-03 08:16:08
<!DOCTYPE html>
<head>
<title>
课程表
</title>
<style type="text/css">
.C3{border-top:40px  rgb(101,147,74) solid;/*上边框宽度等于表

格第一行行高*/ 

width:0px;/*让容器宽度为0*/ 
height:0px;/*让容器高度为0*/ 
border-left:80px rgb(160,191,124) solid;/*左边框宽度等于表格第

一行第一格宽度*/ 
position:relative;/*让里面的两个子容器绝对定位*/ }
b{font-style:normal;display:block;position:absolute;top:-

40px;left:-40px;width:35px;} 
em{font-style:normal;display:block;position:absolute;top:-

25px;left:-70px;width:55x;} 
.C2{
background-color:rgb(160,191,124)
}
.C1{
background-color:rgb(101,147,74);
}
body{
margin:auto;
width:50%;
background-color:rgb(255,255,255);
font-family:"微软雅黑"
color:rgb(3,35,14);
border:1px solid green;
}
table,th,td{
border-collapse:collapse;
border:1px solid green;
text-align:right;
text-align:center
}
.F1{
font-family:"黑体";
font-size:30px;
color:rgb(64,116,52);
}
</style>
</head>
<body>
<table>
<caption class="F1">
磨叽大学2015年课程表
</caption>
<tr class="C1">
<th>
<div class="C3"> 
<b>时间</b>
<em>地点
</em>
</div>
</th>
<th>
星期一
</th>
<th>
星期二
</th>
<th>
星期三
</th>
<th>
星期四
</th>
<th>
星期五
</th>
<th>
星期六
</th>
<th>
星期天
</th>
</tr>
<td colspan="8">
上午
</td>
</tr>
<tr class="C2"><td>8:30</td><td>语文</td><td>语文

</td><td>语文</td><td>语文</td><td>语文</td><td>语

文</td><td></td>
</tr>
<tr class="C2"><td>
9:30</td><td>化学</td><td>化学</td><td>化学</td><td>

化学</td><td>化学</td><td>化学</td><td></td>
</tr>
<tr class="C2"><td>
10:30</td><td>物理</td><td>物理</td><td>物理

</td><td>物理</td><td>物理</td><td>物理

</td><td></td>
</tr>
<td colspan="8">
下午
</td>
</tr>
<tr class="C2"><td>
14:30</td><td>语文</td><td>语文</td><td>语文

</td><td>语文</td><td>语文</td><td>语文

</td><td></td>
</tr>
<tr class="C2"><td>
15:30</td><td>化学</td><td>化学</td><td>化学

</td><td>化学</td><td>化学</td><td>化学

</td><td></td>
</tr>
<tr class="C2"><td>
16:30</td><td>物理</td><td>物理</td><td>物理

</td><td>物理</td><td>物理</td><td>物理

</td><td></td>
</table>
</body>