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

最新推荐文章于 2024-07-01 22:21:31 发布

坚持曾今曾坚持的

最新推荐文章于 2024-07-01 22:21:31 发布

阅读量1.5k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44791674/article/details/108207905

版权

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

摘要由CSDN通过智能技术生成

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