HTML 表格

TML 表格实例:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

在线实例

表格

这个例子演示如何在 HTML 文档中创建表格。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<tr>

</tr>

</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

更多实例

没有边框的表格

本例演示一个没有边框的表格。

表格中的表头(Heading)

本例演示如何显示表格表头。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、你看得懂权威的解释吗？

1. CSS 规范中对 BFC 的描述

CSS 规范(英文) | 中文翻译

浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文
在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并
在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩译注：环绕浮动元素放置的行框比正常的行短一些），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

2. MDN 对 BFC 的描述

MDN链接

区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
文档的根元素（<html>）。浮动元素（即 float 值不为 none 的元素）。绝对定位元素（position 值为 absolute 或 fixed 的元素）。行内块元素（display 值为 inline-block 的元素）。表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。表格标题（display 值为 table-caption，HTML 表格标题默认值）。匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。 overflow 值不为 visible 或 clip 的块级元素。 display 值为 flow-root 的元素。 contain 值为 layout、content 或 paint 的元素。弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。多列容器（column-count 或 column-width (en-US) 值不为 auto，且含有 column-count: 1 的元素）。 column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）
格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
包含内部浮动。排除外部浮动。阻止外边距重叠。

看了以上最权威的定义，你能看懂吗？如果不可以的话，那我们来看看国内 CSS 界大佬 —— 张鑫旭的描述吧。

3. 张鑫旭对 BFC 的描述

博客链接

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

张鑫旭直接不详细讲解了，而是让大家自行查找。

所以，不管你在网上怎么搜索，不管你问谁，你都无法得到关于 BFC 的详细定义。

二、为什么没法解释 BFC 是什么？

每个人都知道涩情是什么，但是没有一个人能把涩情说清楚

正如：

我不知道什么是 BFC
但是你写出样式，我就知道这是不是 BFC

BFC 就是这样的东西 (堆叠上下文也是)

它没有定义
他只有特性/功能

三、所以，我们究竟该如何理解 BFC？

既然 BFC 的定义我们讲不清楚，那我们就不去研究它的定义了，我们知道如何去使用就可以了，所以我们应该从特性/功能去理解 BFC

先把 BFC 翻译过来：

Block Formatting Context
块级格式化上下文

功能1: 爸爸管儿子

用 BFC 包住浮动元素。(注意！这不是清除浮动，.clearfix 才是清除浮动)

在特定的情况下，会导致父容器无法包裹住子容器，请看代码：

<style>
  .father{
    border: 1px solid red;
  }

  .son{
    height: 100px;
    background: blue;
    width: 400px;
    float: left; <- 注意这一行
  }
</style>

<div class="father">
  <div class="son"></div>
</div>

正常来讲，father 是会抱住裹住 son 的，但我在 son 加上 float: left; 之后，却包不住了，看下面效果截图：

解决方法：

让 father 浮动起来，例如加上：float：left;
把 father 设置为绝对定位，例如加上：position: absolute
让 father 变为非块盒容器，例如加上：display: inline-blocks
不让 father 的 overflow 的值为 visible，例如加上：overflow: auto
(overflow 的默认值是 visible)
使用绝招：在 father 上添加 display: flow-root;，这段代码只有一个功能，就是让当前元素变成一个 BFC，并且没有其他的副作用！

但是在 BFC 里的元素的垂直 margin 合并

功能2: 兄弟之间划清界限

用 float + div 做左右自适应布局

看代码：

<style>
  .big-bro{
    width: 100px;
    height: 200px;
    background:rgba(0,0,0,0.3);
    float: left;
    border: 2px solid blue;
  }

  .young-ber{
    height: 200px;
    background: yellow;
    border: 5px solid red;
  }
</style>

<div class="big-bro"></div>
<div class="young-ber"></div>

效果图：

哥哥把弟弟压到下面去了！

解决方法：在弟弟元素加上：overflow: auto;

请看效果：

为什么没有人能讲清楚 BFC？
原文链接：https://juejin.cn/post/7303392509664247835

文同步本人掘金平台的文章：https://juejin.cn/post/6844903655468957704

BFC(Block Formatting Context，块格式上下文)是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。对其的理解能够帮你更好的布局页面。

常见的定位方案

在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：

普通流(正常文档流)

在普通流中，元素按照其在HTML的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是流定位。也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。

额外：⚠️

HTML中，元素可以分成块级元素（block-level elements）和行内元素（inline-level elements）。具体的解析会另开一篇博文出来讲解。

下面给出普通流的一个例子：

<body>
	<span>first</span>
	<a href="javascript：;">second</a>
	<div class="demo demo1"></div>
	<div class="demo demo2"></div>
</body>
复制代码

html,body{
	margin: 0;
	padding: 0;
}
.demo{
	width: 200px;
	height: 200px;
}
.demo1{
	background: red;
}
.demo2{
	background: blue;
}
复制代码

浮动

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果和印刷排版中的文本环绕相似。如下：

<body>
	<div class="container">
		<div class="left"></div>
		文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 100px;
}
.container{
    border: 1px dotted red;
}
.container .left{
    width: 50px;
    height: 50px;
    background: blue;
    float: left;
}
复制代码

⚠️为什会内容环绕呢，而不是跟浮动元素重合呢？

《CSS权威指南》中指出，浮动的目的，最初只能用于图像，的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。

绝对定位

在绝对定位布局中，元素会整体脱离普通流（浮动布局可以理解成脱离父元素文本流），因此绝对定位不会对其兄弟元素造成影响，而具体的位置由绝对定位的坐标决定。

什么是BFC

Formatting context（格式上下文）是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC即Block Formatting Content（块级格式上下文），它属于上述定位方案的普通流。具有BFC特性的元素可以看作是**隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。**后面介绍。

简单来说，可以把BFC理解成一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的元素。

触发BFC的条件

下面的方式会创建块格式上下文：

根元素或包含根元素的元素，这里我理解为body元素
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed）
行内块元素（元素的display为inline-block）
表格单元格（元素的display为table-cell，html表格单元格默认为该值）
表格标题（元素的display为table-caption，html表格标题默认为该值）
匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是html table、row、tbody、thead、tfoot的默认属性）或inline-table）
overflow值不为visible的块元素
display值为flow-root的元素
contain值为layout、content或strict的元素
弹性元素（display为flex或inline-flex元素的直接子元素）
网格元素（display为grid或inline-grip元素的直接子元素）
多列容器（元素的column-count或column-width不为auto，包括column-count为1）
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

创建了块格式上下文的元素中的所有内容都会被包含在BFC中。以上的创建方式参考自块格式化上下文

BFC的特性（作用）

简单罗列下BFC的特性：

内部的box会在垂直方向，从顶部开始一个接一个地放置
box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集
在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。（对于从右到左的格式来说，则触碰到右边缘），即使是浮动也是如此。即不会发生margin穿透。
形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）
计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）

注意⚠️，对于第五点，原本浮动元素是应该脱离文档流的，但是BFC中会计算其高度。

BFC的一些应用

实现自适应的两栏布局

应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了文字环绕及类似情形。

<body>
	<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 50px;
}
.container {
    width: 100%;
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
.right {
    height: 200px;
    background-color: red;
    overflow: hidden; /*把.right这个自适应的box变成BFC，避免与.left box这个有float属性的元素重叠*/
}
复制代码

解决父元素高度塌陷

高度塌陷产生的原因：父元素未设置固定的高度，完全由子元素高度撑开；当子元素float之后脱离了文档流，父元素内部就没有支撑，造成了高度的塌陷。

解决这种问题我上之前的博文中有总结，地址请戳CSS清除浮动。这里再简单的说下原理：

也就是用到了BFC的特性五：闭合内部浮动。

<body>
	<div class="container">
	    <div class="left">left</div>
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    border: 1px solid red;
    overflow: hidden; /*形成BFC，使其能闭合浮动 box*/
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
复制代码

margin重叠解决

在正常的文档流中，在垂直方向上兄弟box的margin会取交集（取最大的显示），为神马会出现这种情况呢？可以说是一种bug，也可以说是一种规范。我比较倾向于后者。

<body>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>
复制代码

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
复制代码

上面出现的情况是BFC的特性三：属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集。那么，我们将他们隔离成不同的BFC不久解决问题了嘛。

<body>
    <div class='wrap'>
        <div class="top">top</div>
    </div>
    <div class="bottom">bottom</div>
</body>
复制代码

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
.wrap{
    overflow: hidden; /*将.top box包含在另外一个BFC中隔离开*/
}
复制代码

后话

使用好BFC能够是你更好的布局。文中部分内容参考网络内容。

各位大佬轻喷，还请多多指正。放上github地址github.com/reng99求指教就逃:)

在线咨询

上一篇：网页背景全屏就这？分享 1 段优质 CSS 代码片段！
下一篇：html5如何将表单数据提交到数据库表的指定空格

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 表格

、你看得懂权威的解释吗？

1. CSS 规范中对 BFC 的描述

2. MDN 对 BFC 的描述

3. 张鑫旭对 BFC 的描述

二、为什么没法解释 BFC 是什么？

三、所以，我们究竟该如何理解 BFC？

功能1: 爸爸管儿子

功能2: 兄弟之间划清界限

常见的定位方案

普通流(正常文档流)

浮动

绝对定位

什么是BFC

触发BFC的条件

BFC的特性（作用）

BFC的一些应用

实现自适应的两栏布局

解决父元素高度塌陷

margin重叠解决

后话

您的项目需求