table标签基础

最新推荐文章于 2024-08-01 18:41:26 发布

原创最新推荐文章于 2024-08-01 18:41:26 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了HTML中table标签的使用方法，包括表格的属性设置、单元格的跨行跨列等，以及如何通过CSS进行样式调整，是前端开发人员必备的知识点。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		<style type="text/css">
			
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!--table主要属性：
		bgcolor：表格背景颜色
		align：对齐方式，表格整体对齐方式，值有三个，left；right；center
		border：边框大小  单位可以不加px
		bordercolor：边框颜色
		width，height：宽高，单位px
		cellspacing：表格内部边框间边距，最小为0，单位px
		cellpadding：单个表格内部内容与边框间边距，最小为0，单位px
		background：背景图片
		-->
		
		<table bgcolor="aqua" align="center" border="1" bordercolor="black" width="900px" height="150px" cellspacing="0" cellpadding="">
				
				<!--不推荐在tr标签内添加属性-->
			<tr>
				<!--推荐在td标签内添加属性-->
				<!--td属性：
					bgcolor：背景色
					width，height：宽高，可以用px也可以用%
					没有border属性
					align：水平对齐
					valign：垂直对齐
					background：背景图片
				-->
				<td colspan="2">内容</td>
				<td rowspan="2">内容</td>
				
			</tr>
			<tr>
				<!--跨域：
				跨行和跨列：
				跨行：rowspan
				跨列：colspan
				rowspan或colspan都应写在td标签内
				需要跨多少行/列，值就为多少
				完成跨行/列之后，要保证行列数不变，多出来的要删掉
				-->
				<td rowspan="2">内容</td>
				<td>内容</td>
				
			</tr>
			<tr>
				<td colspan="2">内容</td>
				
				
			</tr>
		</table>
		
		
	</body>
</html>