12-表格

最新推荐文章于 2024-05-04 21:02:30 发布

茉莉发2233

最新推荐文章于 2024-05-04 21:02:30 发布

阅读量312

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_45719149/article/details/106015593

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表格

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格.

表格是
标签来定义的。

而
标签中的行就是标签，而列就是
标签，必须先定义行才能定义列。

因为html中，每一列是在一行当中的。

表格:在15年前的时候是非常火爆的

页面所有的内容都是用表格制作的:排版布局,天生有优势,

随着开发发展被淘汰了,现在网站几乎没有用表格开发

目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

table 表格整体的容器,table在英文中为桌子的意思,你想象在桌子上铺上一个棋盘.

我们去写上table标签

<table></table>
/*打开控制台,找到table发现table是什么元素?
  table写的display:table.
  我们之前的说过页面中元素就分为两种,一种是盒子,一种是文本.
  table这个元素其实也是一个块级盒子而已.
  那我们去写上文字看看会在哪里*/

table{
		width: 300px;
		height: 300px;
	}
<table></table>
	我在那
	/*我们可以去设置宽高,table好像也是独占一行的*/

table的对外表现是块级性,并且具有包裹性

我们还可以去设置背景颜色

table{background-color: skyblue;}
/*天蓝盒子就出来了.
  我们怎么去画出表格一条条的网格线?
  我们按照之前 给大家的划分的三大结构去划分*/

thead(tablehead):表头

tbody(tablebody):表的主体内容

tfood(tablefood):表的尾部

这个和我们之前html写的head和body是不是一模一样?head是头部,body是主体内容.

<table>
		<thead></thead>
		<tbody></tbody>
		<tfoot></tfoot>
</table>
/*这时候刷新网页,table的高度和宽度为什么就没有作用了?
  这时候高度塌陷,我们的表一般是水平方向上面不增加,竖直方向上面增加.
  比如要统计同学们的姓名,我一般是在竖直方向上去写出你们的名字而已.
  所以我们能定宽,不能定高.*/

/*table{height: 300px;}高度是由里面的元素撑开的*/

我们说说thead里面放什么东西?

是不是表的标题?

我们看到表头就知道要展示什么内容.是不是很符合我们的SEO?

蜘蛛爬虫读到这里就知道是表格头部标题了.

	<thead>
			<caption>期末考试成绩</caption>
	</thead>
		/*相当于我们head标签里面的title.
		  为什么我们写的caption在边框之上,没有被边框包裹进去?
      因为表头标题一般是没有边框线的.
		  这里可以写多个标题*/

tbody(tablebody):表的主体内容

行是表的一个主要内容:tr行,tr行排列使得添加和删除变得很方便.

tbody第一行的内容应该填什么东西?

就是我们的栏目.

表示接下来这一竖排的所有东西都跟这个关键词有关系,

我想去看成绩,我看这一行就行了.我们要去写上这个表的标题

	table{
			width: 300px;
			background-color: skyblue;
		}
	<tbody>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>成绩</th>
				<th>是否录取</th>
			</tr>
		</tbody>
		/*文字自动居中排列在这一行,并且还有加粗展示.
       打开控制台可以发现每个th不一定是同样的大小,有的宽一点有的要窄一点.
       接下来我们是不是应该写下面人员的具体的信息了?*/

th:table-head 列的头部

td:table-data 数据信息

<table>
		<thead>
			<caption>期末考试成绩</caption>
		</thead>
		<tbody>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>成绩</th>
				<th>是否录取</th>
			</tr>
			<tr>
				<td>云牧</td>
				<td>男</td>
				<td>200</td>
				<td>是</td>/*正文内容,现在td是一个左对齐的方式*/
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>

		<tr>
			<td>sherry</td>
			<td>男</td>
			<td>200</td>
			<td>否(作弊)</td>
		</tr>
		/*每一项成绩都整整齐齐都能出现在表格当中.
			以前我们去做元素排列的时候,其实总是对不齐.
       用浮动还要设置margin计算还有意想不到的Bug等,浮动来做非常难计算.
		   所以在页面开发初期,没有更好的布局方案的时候.我们用table来进行页面布局. */

	<tfoot>
			<tr>
				<td>2020年</td>
			</tr>
		</tfoot>
/*此时就在尾部进行展示.
  看起来我们的tbody是涵盖了tfoot的内容,我们tfoot通常情况下用得比较少.
 	我们用的最多的还是thead和tbody.
  我们此时看起来还不像表格,我想写上边框线.*/

th,td{border: 1px solid #000;}
/*我们的表写感觉是出来了,但是这时候边框线之间的空格是怎么回事?*/

在通常情况下,表示会分割每一个元素的,每一个元素都有间隙,默认2px

我们打开控制台可以看到table有border-spacing,这时候我们可以去调整这个属性.

table{ border-spacing:0px;}
/*调整为0px的时候你以为单元格合并了?
  其实并没有,只是进行了一个重叠.并且这里不能为负数.
  可以设置两个数值的.第一个代表水平方向,第二个代表竖直方向.*/

td里面可以放什么东西?

td里面可以放文字,盒子,图片,视频,表格.

td就相当于一个单纯盒子,正常盒子能放什么它也能放什么.

现在我想让我的盒子里面的单元格边框为1px.进行合并,怎么办?

table{border-collapse:collapse;}
/*此时单元格合并,border-spacing会失效.
  但是此时没有被划掉,因为只有样式覆盖才会被划掉;*/

border-collapse

separate;默认单元格分割
collapse;单元格合并

如果要给表格设置大小,需要给每个单元格设置大小的.不需要整体的大小,由里面的元素所撑开.

	th,td{	 
         width: 50px;
				height: 30px;
	 }
/*此时为什么单元格的宽度会不一样呢?
  因为我们给大盒子设置了300px宽,这时候给小盒子设置50px宽.
  就相当于变相告诉游览器小盒子宽度是一样的.所以大盒子的300像素会均分给每个小盒子.
  所以我们把大盒子的宽度注释.*/

/*table{ width:500px;}
 可是为什么不是50px宽呢?
  因为每一个th,td小盒子都有一个默认的边框border和内边距padding.为了防止内容靠的太近.
  我们就可以去清除它的默认padding*/

th,td{ padding: 0; }
/*此时就保证每个盒子的宽高都是同样大小.*/

此时我们想要这里面的文字水平竖直居中?

	th,td{
			border: 1px solid #000;
			width: 100px;
			height: 100px;
			padding: 0;
			text-align: center;
		}
/*里面的文字就水平居中了.
  里面的加粗字体如果让它恢复正常呢?*/

 th,td{ font-weight:normal; }
/*我们可以将th标签着重去设置下,作为强调*/

th{  background-color: skyblue;}

但是在我们表中tr里面不是所有内容都是td的.

如果表里面的第一竖排假如是学号.

学号作为表中的组件,根据学号排列,我们也可以把td改成th标签

	<tbody>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>成绩</th>
				<th>是否录取</th>
			</tr>
			<tr>
				<th>云牧</th>
				<td>男</td>
				<td>200</td>
				<td>是</td>
			</tr>
			<tr>
				<th>sherry</th>
				<td>男</td>
				<td>200</td>
				<td>否(作弊)</td>
			</tr>
		</tbody>

我们还可以让我们的表居中去排列

table{ margin: 100px auto 0; }

table默认特性

table可以设置宽高,tr/td近似均分.
th默认加粗,水平竖直居中.
td默认上下居中,左对齐.
一列的宽度，由该列最宽的单元格内容决定,一行的高度，由该行最高的单元格内容决定

假如没有给表设置设置固定宽度

/*th,td{width: 100px;}*/
/*最宽的一列是字数最多的一列.
  一列元素,就由最宽的元素撑开
  所以我们最好给元素定好规定的宽度高度.*/

5.th,td没有margin(调整元素之间的间距)

打开控制台可以看到我们的无论是th,td都是没有margin值的.

因为如果有marin的话盒子排列起来就会东倒西歪.不支持margin,

只有border-spacing,但是每个元素都是相同的间距.这样我们才能对齐

单元格合并

rowspan:当前单元格纵向向下横跨单元格的行数

	<tbody>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>成绩</th>
				<th>是否录取</th>
			</tr>
			<tr>
				<th>云牧</th>
				<td rowspan="2">男</td>
				<td>400</td>
				<td>是</td>
			</tr>
			<tr>
				<th>sherry</th>
				<td>400</td>
				<td>否(作弊)</td>
			</tr>
		</tbody>

2.colspan:当前单元格横向向右横跨单元格的行数

	<tbody>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>成绩</th>
				<th>是否录取</th>
			</tr>
			<tr>
				<th>云牧</th>
				<td rowspan="2">男</td>
				<td colspan="2">400</td>
			</tr>
			<tr>
				<th>sherry</th>
				<td>400</td>
				<td>否(作弊)</td>
			</tr>
		</tbody>
/* 单元格合并只能合并矩形区域 */

模拟表格

这些table,caption,thead,tbody,tr,th,td是怎么被识别为表格的一部分的?

通过display,display决定了你的元素是哪一种元素,虽然只说过三种,其实还有很多特性.

我们这里用表格的方式总结一下标签名对应的display的值

	table{
			border-collapse:collapse;
			margin: 100px auto 0;
			background-color: skyblue;
		}
	th,td{
			border: 1px solid #000;
			width: 100px;
			height: 30px;
			padding: 0;
			text-align: center;
			font-weight:normal;
		}
<table>	
	<tbody>
			<tr>
				<th>标签名</th>
				<th>display的值</th>
				<th>补充的信息</th>
			</tr>
			<tr>
				<td>table</td>
				<td>table</td>
				<td>inline-table</td>
			</tr>
		</tbody>
</table>
/*inline-table是什么意思*/

inline-block: 对外表现为行内元素,对内表现为块元素

inline-table: 对外表现为文本元素,对内还是表格

table{	display: inline-table;}
/*居中已经失效,在table后面写上文字.
  文字和table一行排列*/

	<tbody>
			<tr>
				<th>标签名</th>
				<th>display的值</th>
				<th>补充的信息</th>
			</tr>
			<tr>
				<td>table</td>
				<td>table</td>
				<td>inline-table</td>
			</tr>
			<tr>
				<td>thead</td>
				<td>table-header-group</td>
				<td></td>
			</tr>
			<tr>
				<td>caption</td>
				<td>table-caption</td>
				<td></td>
			</tr>
			<tr>
				<td>tbody</td>
				<td>table-row-group</td>
				<td></td>
			</tr>
			<tr>
				<td>tfoot</td>
				<td>table-footer-group</td>
				<td></td>
			</tr>
			<tr>
				<td>tr</td>
				<td>table-row</td>
				<td></td>
			</tr>
			<tr>
				<td>td</td>
				<td rowspan="2">table-cell</td>
				<td rowspan="2">注意理解记忆</td>
			</tr>
			<tr>
				<td>th</td>
			</tr>
		</tbody>

	.table {
        display: table;
        border: 1px solid #cccccc;
				border-collapse: collapse;
        /*display: table时padding会失效*/
    }
    .row {
        display: table-row;
        border: 1px solid #cccccc;
        /*display: table-row时margin、padding同时失效*/
    }
    .cell{
        display: table-cell;
        border: 1px solid #cccccc;
        padding: 5px;
        /*display: table-cell时margin会失效*/
    }
    <div class="table">
		<div class="row">
			<div class="cell">张三</div>
			<div class="cell">李四</div>
			<div class="cell">王五</div>
		</div>
		<div class="row">
			<div class="cell">张三</div>
			<div class="cell">李四</div>
			<div class="cell">王五</div>
		</div>
	</div>

让块级标签实现行内效果，即浮动至同一横轴，并实现等高效果

table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

举个例子吧，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

 .table {
        display: table;
        width: 1000px;
    }
    .row {
         display: table-row; 
    }
    .cell {
			 border: 1px solid #000;
        display: table-cell;
        padding: 10px;
        background-color: red;
    }
<div class="table">
		<div class="row">
			<div class="cell">我要忘了你的样子</div>
			<div class="cell">我要忘了你的样子</div>
			<div class="cell">我要忘了你的样子</div>
		</div>
	</div>

茉莉发2233

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-表格

表格表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格.表格是标签来定义的。而标签中的行就是标签，而列就是标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。表格:在15年前的时候是非常火爆的页面所有的内容都是用表格制作的:排版布局,天生有优势,随着开发发展被淘汰了,现在网站几乎没有用表格开发目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用tab
复制链接

扫一扫