HTML和CSS编写的精美的个人时间表

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.imagetable th {
    background:#b5cfd2 url('cell-blue.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {
    background:#dcddc0 url('cell-grey.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
</style>
<center>
<!-- Table goes in the document BODY -->
<table class="imagetable" width="800" height="494">
<tr colspan="8">我的时间表</tr>
<tr>
    <th>时间</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期天</th>
</tr>
<tr align="center">
    <td>7:30-8:20</td>
    <td>起床</td>
    <td>起床</td>
    <td>起床</td>
    <td>起床</td>
    <td>起床</td>
    <td rowspan="3">工作2小时</td>
    <td rowspan="3">学习1小时</td>
</tr>
<tr>
<td colspan = "6" height="10">上班start</td>
</tr>
<tr align="center">
    <td>8:45-11:55</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
<tr>
<td colspan = "8" height="50">午休时间90min</td>
</tr>
<tr align="center">
    <td>13:30-15:30</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td rowspan="7">做毕设</td>
    <td rowspan="7">工作2小时</td>
</tr>
<tr>
<td colspan = "6" height="10">下午活动时间20min</td>
</tr>
<tr align="center">
    <td>15:50-18:10</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
    <td>工作</td>
</tr>
<tr>
<td colspan = "6" height="10">下班end</td>
</tr>
<tr align="center">
    <td>19:30-22:00</td>
    <td>学习、工作</td>
    <td>学习、工作</td>
    <td>学习、工作</td>
    <td>学习、工作</td>
    <td>学习、工作</td>
</tr>
<tr >
<td colspan = "6" height="10" bgcolor="red">自由时间</td>
</tr>
<tr align="center">
    <td>23:00 -</td>
    <td>晚安</td>
    <td>晚安</td>
    <td>晚安</td>
    <td>晚安</td>
    <td>晚安</td>
</tr>
</table>
</center>

 

效果图如下

记得点赞收藏关注我♪(＾∀＾●)ﾉ，让小哥哥带你闯荡互联网开发的世界♥♥♥♥♥

转载于:https://www.cnblogs.com/lucklyphp/p/10529386.html