效果图:
html代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>课程表</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body background="image/bg_pattern2.jpg">
<table class="table table-bordered table-hover" style="margin-top:30px;">
<caption>
<h2 style="margin-top:40px; color:white;" align="center">课程表</h2>
</caption>
<thead>
<tr class="info">
<td align="center" valign="middle">项目</td>
<td colspan="5" align="center" valign="middle">上课</td>
<td colspan="2" align="center" valign="middle">休息</td>
</tr>
</thead>
<tbody>
<tr class="success">
<td align="center" valign="middle">星期</td>
<td align="center" valign="middle">星期一</td>
<td align="center" valign="middle">星期二</td>
<td align="center" valign="middle">星期三</td>
<td align="center" valign="middle">星期四</td>
<td align="center" valign="middle">星期五</td>
<td align="center" valign="middle">星期六</td>
<td align="center" valign="middle">星期天</td>
</tr>
<tr class="success">
<td rowspan="4" align="center" valign="middle">上午</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">英语</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">英语</td>
<td rowspan="4" align="center" valign="middle">休息</td>
</tr>
<tr class="success">
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
<td align="center" valign="middle">数学</td>
</tr>
<tr class="success">
<td align="center" valign="middle">政治</td>
<td align="center" valign="middle">历史</td>
<td align="center" valign="middle">地理</td>
<td align="center" valign="middle">政治</td>
<td align="center" valign="middle">历史</td>
<td align="center" valign="middle">地理</td>
</tr>
<tr class="success">
<td align="center" valign="middle">物理</td>
<td align="center" valign="middle">化学</td>
<td align="center" valign="middle">生物</td>
<td align="center" valign="middle">体育</td>
<td align="center" valign="middle">美术</td>
<td align="center" valign="middle">计算机</td>
</tr>
<tr class="success">
<td class="success" rowspan="2" align="center" valign="middle">下午</td>
<td align="center" valign="middle">英语</td>
<td align="center" valign="middle">物理</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">政治</td>
<td align="center" valign="middle">体育</td>
<td align="center" valign="middle">语文</td>
<td rowspan="2" align="center" valign="middle">休息</td>
</tr>
<tr class="success">
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
<td align="center" valign="middle">物理</td>
<td align="center" valign="middle">化学</td>
<td align="center" valign="middle">生物</td>
</tr>
</tbody>
</table>
</body>
</html>
源码下载地址: