<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的跨行跨列</title>
<style>
table{
width:500px;
text-align: center;/*设置字体居中*/
margin:0 auto;/*body居中*/
}
table,th,td{
border-collapse: collapse;/*表示把所有table，th，td标签边框合并*/
}
</style>
</head>
<!--
作者：[email protected]
时间：2020-02-21
描述：rowspan="2" 合并行两行
colspan="5" 合并以后五列
-->
<body>
<table border="1">
<caption>学生课表</caption>
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr >
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>政治</td>
<td>历史</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>政治</td>
<td>体育</td>
<td>化学</td>
<td>物理</td>
<td>地理</td>
</tr>
<tr>
<td>美术</td>
<td>音乐</td>
<td>微机</td>
<td>语文</td>
<td>历史</td>
</tr>
<tr>
<td>晚上</td>
<td colspan="5">自习</td>
</tr>
</table>
</body>
</html>
