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重疊解決

后話

您的項目需求