利用Html和CSS做一张课程表
一 思路
利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理
二 步骤
- 建立一个七行六列的表格
- 将第一列的第二行到第四行合并成一个单元格（rowspan）
- 将第一列的第五行到第七行合并成一个单元格 （rowspan）
- 在相应的单元格中填上时间和课程
三 注意点
- 一定要将要合并的单元格注销掉
四 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
}
tr,th,td{
width: 80px;
height: 30px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table align="center">
<caption>课程表</caption>
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuseday</th>
<th>Wednsday</th>
<th>Thurday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>Math</td>
<td>English</td>
<td>Chinese</td>
<td>History</td>
<td>Geography</td>
</tr>
</tbody>
</table>
</body>
</html>
