HTML（的简单表格）的案例_html表格代码案例-优快云博客

本文链接：https://blog.youkuaiyun.com/ChengMeng11/article/details/104719250

这篇博客介绍了HTML表格的使用，从创建简单的表格开始，逐步讲解了如何合并单元格以及如何构建更复杂的高级表格，通过代码案例帮助读者理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、简单的表格

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px">
		<tr align="right" valign="top">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>

		<tr align="center" valign="middle" bgcolor="blue">
			<td>hello</td>
			<td bgcolor="yellow" valign="bottom">hello</td>
			<td>hello</td>
		</tr>


		<tr valign="bottom" background="../../img/heihei.gif">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
</body>
</html>

案例：在这里插入图片描述

2、合并单元格

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>td{hello$}*4)*4 -->
	<table border="1" width="500px" height="300px">
		<tr>
			<td colspan="4" align="center">hello1</td>
		</tr>
		<tr>
			<td rowspan="3">hello1</td>
			<td>hello2</td>
			<td>hello3</td>
			<td>hello4</td>
		</tr>
		<tr>
			
			<td>hello2</td>
			<td rowspan="2" colspan="2">hello3</td>
			
		</tr>
		<tr>
			
			<td>hello2</td>
			
			
		</tr>
	</table>
</body>
</html>

案例：在这里插入图片描述

3、高级的表格

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="600px" height="300px" align="center">
		<caption><h2>学生基本信息表</h2></caption>

		<thead bgcolor="cyan">
			<th>学号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</thead>
		<tbody bgcolor="#cccccc">
			<tr>
				<td>1001</td>
				<td>阿牛</td>
				<td>21</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>阿花</td>
				<td>20</td>
				<td>女</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>张三</td>
				<td>19</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>李四</td>
				<td>22</td>
				<td>女</td>
			</tr>
		</tbody>

		<tfoot bgcolor="yellow" align="center">
			<tr>
				<td width="25%">总计人数</td>
				<td colspan="3">4</td>
				
			</tr>
		</tfoot>
	</table>
</body>
</html>