表格学习 table th tr td

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table注意事项</title>
	<style>
		table{
			border-collapse: collapse; /*合并表格线*/
			border: 1px solid #ccc;
			width: 800px;
		}
		th,td,tr{
			width: 50px;
			height: 40px;
			text-align: center;
		}		
	</style>
</head>
<body>
	<table border="1">
		<tr>
			<th>时间日期</th>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<th rowspan="2">上午</th> <!-- 跨行合并-->
			<td>语文</td>
			<td>地理</td>
			<td>代数</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<!-- <th>上午</th> -->
			<td>语文</td>
			<td>地理</td>
			<td>代数</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="6">午自修</td><!-- 跨列合并 -->
<!-- 			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td> -->
		</tr>
		<tr>
			<th rowspan="2">下午</th><!--跨行合并 -->
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<!-- <th>下午</th> -->
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_34608447/article/details/88667507