HTML表格的一部分代码

1.最原始的表格代码 


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
		<tr><!--为第一行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
		<tr><!--为第二行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
		<tr><!--为第三行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
	</table>	
</body>
</html>

2.表格的表头标签与表结构


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td>21</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td>女</td>
			<td>20</td>
		
		</tr>
	</tbody>
	</table>	
</body>
</html>

 3.合并单元格


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td rowspan=2>20</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td>女</td>
			
		
		</tr>
	</tbody>
	</table>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead></br>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td>20</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td colspan="2">女</td>
			
		
		</tr>
	</tbody>
	</table>	
</body>
</html>

猜你喜欢

转载自blog.csdn.net/wusiye_123456/article/details/83064760