Html中的表格、Table和div，表格页面、员工登记表、Div代码

最新推荐文章于 2023-07-27 18:05:24 发布

坚持曾今曾坚持的

最新推荐文章于 2023-07-27 18:05:24 发布

阅读量1.6k

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_44791674/article/details/108207905

版权

本文详细介绍了HTML中Table和Div的使用，包括表格的基本结构、单元格属性，以及Div作为分块元素的特点和应用。同时，提到了表格页面布局、员工入职登记表的设计，强调了块级元素与行内元素的区别。

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

Table和div

Table 表格
Web1班名册
学号姓名性别年龄
01 张三男 21
02 李四女 20
…
人数合计： 60

表格的组成部分：标题表头主体表尾
table： 定义一个表格
caption： 定义表格的标题
thead ：定义表头的部分
tbody ：定义表格的主体（数据）部分
tfoot ：定义表尾，一般来显示汇总信息

tr ：定义一行
th、 td 来定义数据项（单元格） th一般用于表头，有加粗的样式。
td 一般用于主体部分，没有加粗的样式
td ：rowspan 和 colspan 分别定义了单元格跨行的行数，跨列的列数

cellspacing= 间距
cellpadding= 边距

div

定义一个分块（division）

特点：在新的一行显示块级标签

块级标签与行内标签的区别：
块级标签占满行行内标签会按照顺序从左到右依次排列

块级标签：h1-h6 p ul ol li div table dl form
行内标签：span a br lable i em
行内块：img input

块级元素的特点：display:block

每个块都是从新的一行开始，后面的元素会另起一行（霸道）
元素的宽度，高度，行高，内外边距都可以设置的
如果不设置元素的宽度，是它父容器的100%，除非你给他设定高度

行内元素的特点： display:inline

和其他的元素都在一行上
不能设置元素的宽度，高度，行高，内外边距
元素的宽度是它包含文字或图片的宽度，不能改变

行内块元素的特点： display:inline-block

和其他的元素都在一行上
宽度，高度，行高，内外边距都可以设置的

表格页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10" align="center">
			<caption>web1班名册</caption>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
		<tbody>
			<tr>
				<td>01</td>
				<td>李四</td>
				<td>女</td>
				<td>20</td>
			</tr>
			<tr>
				<td>02</td>
				<td>王二</td>
				<td>男</td>
				<td>21</td>
			</tr>
			<tr>
				<td>03</td>
				<td>张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">人数合计：</td>
				<td>60</td>
			</tr>
		</tfoot>
	</table>
	</body>
</html>

DIV

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div</title>
	</head>
	<style type="text/css">
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<body>
		<div style="width: 900px;height: 900px;background-color:antiquewhite;">
			<h2>鹅鹅鹅</h2>
			<p>曲项向天歌</p>
			<img src="./img/a.jpg" >
		</div>
		<div style="width: 200px;height: 200px;background-color:antiquewhite;"></div>
		<div style="width: 200px;height: 200px;background-color:antiquewhite;"></div>
		<span style="width: 200px;height: 200px;">赤橙黄绿青蓝紫</span>
		<span>赤橙黄绿青蓝紫</span>
		<i>内容</i>
		<em>内容</em>
	</body>
</html>

员工入职登记表

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10" align="center">
				<caption>新员工入职登记表</caption>
				<tbody>
					<tr>
						<td>姓   名</td>
						<td></td>
						<td>性   别</td>
						<td><input type="radio" name="sex"> 男
						<input type="radio" name="sex"> 女
						</td>
						<td>出生年月</td>
						<td> </td>
						<td rowspan="5">一寸近照<br><input type="file"/></td>	
					</tr>
				
				<tr>
					<td>曾用名</td>
					<td>   </td>
					<td>体  重</td>
					<td>   </td>
					<td>升  高</td>
					<td>     </td>	
				</tr>
				
					<tr>
						<td>民  族</td>
						<td> 
						 <select>
						 	<option value ="h">汉族</option>
							<option value ="m">苗族</option>
							<option value ="hui">回族</option>
						 </select>
						 </td>
						<td>籍  贯</td>
						<td>   </td>
						<td>婚姻状况</td>
						<td> <input type="radio" name="sex"> 未婚
			<input type="radio" name="sex"> 已婚</td>	
					</tr>
					
					<tr>
						<td>政治面貌</td>
						<td>
						<input type="radio" name="sex"> 团员
						<input type="radio" name="sex"> 群众
						</td>
						<td>健康状况</td>
						<td>   </td>
						<td>血   型</td>
						<td>
						<input type="radio" name="sex"> A
						<input type="radio" name="sex"> B
						</td>	
					</tr>

				
					<tr>
						<td>身份证号码</td>
						<td colspan="5"></td>
					</tr>
		</table>
	</head>
	<body>
	</body>
</html>