主要利用HTML&HTML5标签及表格table等知识开发课程表。 相关要点: 1、HTML&HTML5标签及表格table的使用; 2、代码结构的处理 3、HTML5语义的使用 4、使用了css进行美化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>课程表</title> <!-- S CSS --> <style> * { padding: 0; margin: 0; } table { border: 1px solid #3bafda; margin: 100px auto; text-align: center; border-collapse: collapse; } table th { border: 1px solid #3bafda; padding: 10px; } table td { border: 1px solid #48cfad; padding: 4px 10px; } </style> <!-- E CSS --> </head> <body> <!-- S 课程表 --> <table> <caption>课程表</caption> <thead> <tr> <th colspan="2">时间</th> <th>星期一</th> <th>星期二</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> <td rowspan="4">户外活动</td> <td rowspan="8">休息</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> <td>中午</td> <td colspan="7">午休</td> </tr> <tr> <td rowspan="3">下午</td> <td>1</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td rowspan="3">拓展训练</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> </tbody> </table> <!-- S 课程表 --> </body> </html>实现效果如下:
总结:此次练习是一个十分基础的table标签及相关标签的使用。