HTML表格的语法及使用(详细代码案例讲解)

最新推荐文章于 2024-02-16 23:45:17 发布

船_.

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量928

点赞数 10

文章标签： html 前端 java 青少年编程

本文链接：https://blog.csdn.net/weixin_69026046/article/details/134879942

版权

1.表格的基本使用

表格：Table键

表格长度边框粗细
<table width="1000" border="5">

<tr>（行）
<td></td>（列）
<th></th> (加粗列)
</tr>
</table>

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		表格的使用
			HTML中提供的表格标签：
				table   表格框架
				tr 		行标签
				td 		单元格标签
	 -->
	<!-- 需求：5行4列的表格 -->
	<!-- 
		表格的属性
			border  边框  0 隐藏 1显示 >1 控制粗细
			width|height  宽度   高度
			bgcolor 背景颜色
			cellspacing 控制单元格与单元格之间的间距
			cellpadding 内填充（单元格的边框与文本的间距）
			align    水平对齐  left center  right
			valign   垂直居中  top  middle  bottom
            background 背景 图片 设置
	 -->
	<table borderColor = "red" background = "imgs\\刘亦菲.jpg" align="center" border="1" width="70%" height = "800" cellspacing="0" cellpadding="0">
		<!-- 第一行 -->
		<tr align="center" valign="top">
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr bgcolor="red" style = "color: yellow;">
			<td>第2行第1个单元格</td>
			<td>第2行第2个单元格</td>
			<td>第2行第3个单元格</td>
			<td>第2行第4个单元格</td>
		</tr>
		<tr>
			<td bgcolor="blue">第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
		<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
			<td>第1行第4个单元格</td>
		</tr>
	</table>
 
 
</body>
</html>

2.表格标签的使用标题表头

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table标签中的其他子标签使用
		另类单元格标签   th
			特点：自动加粗+自动居中
			作用：作用在表头
		captin标签
			设置表格的标题
		thead|tbody|tfoot
			HTML中将表格可以分为三个等分
	 -->
	 <table align="center" border = "1" width="400">
	 	<caption><h2>学员信息表</h2></caption>
	 	<thead>
			<tr>
		 		<th>学号</th>
		 		<th>姓名</th>
		 		<th>性别</th>
		 	</tr>
	 	</thead>
	 	<tbody>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td>item2</td>
	 		<td>item3</td>
	 	</tr>
	 	</tbody>
	 	<tfoot>
			<tr>
		 		<td>xxxx</td>
		 		<td>xxxxx</td>
		 		<td>xxxxx</td>
		 	</tr>
	 	</tfoot>
	 </table>
</body>
</html>

3.表格的跨行与跨列（就是合并单元格）

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		1.表格的跨行与跨列
			colspan|rowspan  针对的是单元格
		rowspan  跨行
		colspan  跨列
			算上本身
	 -->
	 <table width="50%" border="1">
	 	<tr>
	 		<td colspan="3">item1</td>
	 		<!-- <td>item2</td>
	 		<td>item3</td> -->
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<td rowspan = "2">item2</td>
	 		<td>item3</td>
	 	</tr>
	 	<tr>
	 		<td>item1</td>
	 		<!-- <td>item2</td> -->
	 		<td>item3</td>
	 	</tr>
	 </table>
</body>
</html>

4.表格中嵌套表格

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>
            嵌套的表 
				<table border="1" width="100%">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
 
	</table>
</body>
</html>

5.表格表单的嵌套使用

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body bgcolor="pink">
	<form action="#" method = "post" >
		<table border="0"align = "center">
			<caption><h3>用户登录</h3></caption>
			<tr>
				<td>账号</td>
				<td><input type="text" placeholder="输入账号"></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password"></td>
			</tr>
			<tr align="center">
				<td colspan = "2">
					<input type="submit" value = "登录">
					<input type="reset" value="重置">
				</td>
			</tr>
 
 
		</table>
 
 
	</form>
</body>
</html>