HTML表格与布局入门教程-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_65384293/article/details/127966353

这篇博客介绍了HTML中表格的使用，包括如何定义表格标题、添加表头、设置单元格跨行和跨列，以及使用cellspacing和cellpadding属性。此外，还提及了div布局和table布局的基本概念，提供了实现这些布局的案例。

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

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>caption</title>
	 </head>
	 <body>
		 <table border = "3" width = "300px" height = "300px">
			 <caption>
				 caption		
			 </caption>
			 <tr>
				 <td>HTML</td>
				 <td>HTML1</td>
			 </tr>
			 <tr>
				 <td>http</td>
				 <td>https</td>
			 </tr>
		</table>
	</body>
</html>

caption 元素定义表格标题：
HTML 中表格标题通过 <caption> 定义。
width 宽单位为px
height 高单位为px

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>th</title>
	</head>
	<body>
		<table border = "3" width = "300px" height = "300px">
			<caption>
				th
			</caption>
			<tr>
				<th>前端</th>
				<th>后端</th>
			</tr>
			<tr>
				<td>html</td>
				<td>js</td>
			</tr>
			<tr>
				<td>python</td>
				<td>SQL</td>
			</tr>
		</table>
	</body>
</html>

给表格添加表头：
表格的表头使用 <th> 标签进行定义

<!DOCTYPE html>
 <html>
	 <head>
		<meta charset = "UTF-8"/>
		<title>colspan rowspan</title>
	 </head>
	 <body>
		 <table border = "3px" width = "300px" height = "300px">
			<tr>
				 <th>前端</th>
				 <th colspan = "3">html</th>
			</tr>
			<tr>
				<td>后端</td>
				<td>python</td>
				<td>SQL</td>
			</tr>
			<tr>
				<td>前端</td>
				<td>HTML</td>
				<td>js</td>
			</tr>
		</table>
		<table border  = "3" cellspacing = "3">
			<tr>
				<th>前端</th>
				<td>HTML</td>
			</tr>
			<tr>
				<th rowspan = "3">JS</th>
				<td>HTML3</td>
			</tr>
			<tr>
				<td>HTML5</td>
			</tr>
	</body>
</html>

单元格跨行和跨列:
colspan 合并列
rowspan 合并行
colspan 又称跨列
colspan 又称跨列
cellspacing 设置单元格与单元格之间的距离单位为px像素值默认为2px
cellpadding 设置文字与单元格之间的距离单位为px像素值默认为1px
bgcolor 设置背景颜色
在第一个单元格内设置 rowspan 或者 colspan
并将其他多余的单元格代码删除。

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>前端</title>
	 </head>
	 <body>
		 <div style = "width:30%;border:3px solid#d4d4d4">JS</div>
		 <meta />
			 <div style = "background-color:skyblue">HTML</div>
			 <hr/>
			 <div style = "background-color:plum">前端</div>
			 <hr/>
	 </body>
</html>

div 布局:
使用 div 可以将网页中的任何元素布局到网页中的任何位置

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>前端</title>
	 </head>
	 <body>
		 <table style = "width:30%;border:3px solid #d4d4d4">
			 <tr>
				 <td style = "background-color:skyblue">HTML</td>
			 </tr>
			 <tr>
				 <td style = "background-color:plum">JS</td>
			 </tr>
		 </table>
	 </body>
</html>

table 布局：
理解比较简单。
不同的浏览器看到的效果一般相同。

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>前端</title>
	 </head>
	 <body>
		 <table border = "3" width = "30%" bgcolor = "plum" cellpadding = "3">
			 <caption>
				 HTML
			 </caption>
		     <tr align = "center">
				 <td colspan = "2">时间\日期</td>
				 <td>一</td>
				 <td>二</td>
				 <td>三</td>
				 <td>四</td>
				 <td>五</td>
			 </tr>
			 <tr align = "center">
				 <td rowspan = "3">上午</td>
				 <td>8:00-10:00</td>
				 <td>python</td>
				 <td>js</td>
				 <td>c</td>
				 <td>HTML</td>
				 <td>SQL</td>
			 </tr>
			 <tr align = "center">
				 <td>10:00-12:00</td>
				 <td>SQL</td>
				 <td>HTML</td>
				 <td>c</td>
				 <td>js</td>
				 <td>python</td>
			 </tr>
			 <tr>
				 <td colsapn = "9">&nbsp;</td>
			 </tr>
			 <tr align = "center">
				 <td rowspan = "3">下午</td>
				 <td>14:00-16:00</td>
				 <td>python</td>
				 <td>js</td>
				 <td>c</td>
				 <td>HTML</td>
				 <td>SQL</td>
			 </tr>
			 <tr align = "center">
				 <td>16:00-18:00</td>
				 <td>SQL</td>
				 <td>HTML</td>
				 <td>c</td>
				 <td>js</td>
				 <td>python</td>
			 </tr>
		</table>
	</body>
</html>