效果图和代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>课程表</title> <style type="text/css"> #tab{ margin: 0 auto; width: 70%; height: 800px; font-size: 18px; font-weight: bold; } body{ background-color: cadetblue; } </style> </head> <body> <h1 align="center" style="color: crimson;">欢迎进入课程表页面</h1> <!-- 表格属性 align lefe、center、right 规定表格相对周围元素的对齐方式 border 1或 "" 规定表格单元是否有边框 width 像素或百分比 规定表格的宽度 cellpadding 规定表格之间的空白,也就是内容与边框的距离 cellspacing 规定单元格与单元格之间的距离 thead:用于定义表格的头部,thead内部必须有tr标签,一般是位于第一行 tbody:用于定义表格的主体,主要用于放数据本体 合并单元格: rowspan="合并单元格的个数" 跨行合并 colspan="合并单元格的个数" 跨列合并 --> <table id="tab" border="3" cellpadding="20" cellspacing="1"> <thead> <tr> <th colspan="8">课程表</th> </tr> <tr><td></td> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> </thead> <tbody> <tr> <td rowspan="2">上午</td> <td>大学英语(二)1-311</td> <td rowspan="2">软件测试技术4-409</td> <td rowspan="2">网页设计与制作4-409</td> <td>大学英语(二)1-314</td> <td>空</td> <td rowspan="6">空</td> <td rowspan="6">空</td> </tr> <tr> <td>空</td> <td>空</td> <td>毛中概论1-409</td> </tr> <tr> <td rowspan="2">下午</td> <td>Linux操作系统基础4-509</td> <td rowspan="2">空</td> <td>毛中概论1-409</td> <td rowspan="2">离散结构4-511B</td> <td rowspan="2">空</td> </tr> <tr> <td>武术运动</td> <td>Linux操作系统基础4-509</td> </tr> <tr> <td rowspan="2">晚上</td> <td rowspan="2">空</td> <td rowspan="2">空</td> <td>性健康教育1-235</td> <td rowspan="2">空</td> <td rowspan="2">程序设计基础4-417</td> </tr> <tr> <td>空</td> </tr> </tbody> </table> </body> </html>