课表截图
html源代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>实验小学课程表</title> <link rel="stylesheet" href="style/table.css"> </head> <body> <table class="lesson"> <caption> 实验小学课程表 </caption> <thead> <tr> <th colspan="2"></th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> </thead> <tbody> <tr> <td rowspan="4">上午</td> <td>1</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>2</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>3</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>4</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr class="rest"> <td colspan="7">午间休息</td> </tr> <tr> <td rowspan="3">下午</td> <td>5</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>6</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <td>7</td> <td>课外活动:</td> <td colspan="4">各班自行安排</td> </tr> </tbody> </body></html>
样式表源代码
/* 商品信息表 */.product { border-collapse: collapse; width: 30em; margin: auto; text-align: center;}.product caption { font-size: 1.2rem; margin-bottom: 0.5em;}.product thead tr,.product tr:hover { background-color: lightcyan; cursor: pointer;}.product td,.product th { border: 1px solid #000; padding: 5px;}.page { text-align: center;}.page a { text-decoration: none; color: #666; padding: 2px 5px; border: 1px solid #000;}.page a.active,.page a:hover { background-color: lightcyan;}/* --------------------------------------- *//* 课程表: 行与列的合并 */.lesson { border-collapse: collapse; width: 40em; text-align: center; margin: auto;}.lesson caption { font-size: 1.2rem; margin: 1em;}.lesson thead { background-color: lightcyan;}.lesson th,.lesson td { border: 1px solid; padding: 0.5em;}.lesson .rest { background-color: #efefef;}.lesson td[rowspan="4"],.lesson td[rowspan="3"] { background-color: rgb(186, 245, 213);}
