HTML 基礎(chǔ)的&lt;table&gt; 標(biāo)簽

例

一個簡單的 HTML 表格，包含兩列兩行：

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

瀏覽器支持

所有主流瀏覽器都支持 <table> 標(biāo)簽。

標(biāo)簽定義及使用說明

<table> 標(biāo)簽定義 HTML 表格

一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。

<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。

更復(fù)雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

HTML 4.01 與 HTML5之間的差異

在 HTML5 中，僅支持 "border" 屬性，并且只允許使用值 "1" 或 ""。

屬性

屬性	值	描述
align	leftcenterright	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定表格相對周圍元素的對齊方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定表格的背景顏色。
border	1""	規(guī)定表格單元是否擁有邊框。
cellpadding	pixels	HTML5 不支持。規(guī)定單元邊沿與其內(nèi)容之間的空白。
cellspacing	pixels	HTML5 不支持。規(guī)定單元格之間的空白。
frame	voidabovebelowhsideslhsrhsvsidesboxborder	HTML5 不支持。規(guī)定外側(cè)邊框的哪個部分是可見的。
rules	nonegroupsrowscolsall	HTML5 不支持。規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。
summary	text	HTML5 不支持。規(guī)定表格的摘要。
width	pixels%	HTML5 不支持。規(guī)定表格的寬度。

全局屬性

<table> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<table> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

家好，我是三木。

這篇文章，替大家匯總了css的布局方式，在每個布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接，不僅僅可以當(dāng)作學(xué)習(xí)資料，也可以當(dāng)作方法的查詢手冊，以后開發(fā)的時候忘記了某個屬性就來查查。

看完推薦的文章保準(zhǔn)解決你 99% 的css布局問題

每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網(wǎng)站的在線代碼編輯，可以自己修改屬性嘗試。

普通布局

使用方法——display: block/inline/inline-block

根據(jù)CSS規(guī)范的規(guī)定，每一個網(wǎng)頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。

資料文章：

w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display

w3c：https://www.w3school.com.cn/css/css_inline-block.asp

用法：https://zhuanlan.zhihu.com/p/65353887

浮動布局

使用方法：float:left/right

指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。

float屬性用于定位和格式化內(nèi)容，例如讓圖像向左浮動到容器中的文本。

float的值有：

left- 元素浮動到其容器的左側(cè)
right- 元素浮動到其容器的右側(cè)
none- 元素不浮動（將僅顯示在文本中出現(xiàn)的位置）。這是默認(rèn)的
inherit- 元素繼承其父元素的浮點值

資料文章：

w3c：https://www.w3schools.com/css/css_float.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

CSS深入理解之float浮動：https://segmentfault.com/a/1190000014554601

彈性布局

使用方法——display：flex/inline-flex

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項目默認(rèn)沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器有以下屬性：

flex-direction-屬性決定主軸的方向（即項目的排列方向）
flex-wrap-定義設(shè)置換行模式
flex-flow-定義了項目在主軸上的對齊方式
justify-content-定義項目在交叉軸上如何對齊
align-items-定義項目在交叉軸上如何對齊
align-content-定義了多根軸線的對齊方式

資料文章：

w3c：https://www.w3schools.com/css/css3_flexbox_container.asp

Flex 布局教程：語法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936

48張小圖帶你領(lǐng)略flex布局之美：https://juejin.cn/post/6866914148387651592

定位布局

使用方法——position：absolute/relative...

給元素設(shè)置postion屬性后，就可以定義該元素的top,bottom,left,right四個屬性。當(dāng)然postion的值不同，對應(yīng)的top,bottom,left,right這四個屬性的值代表的含義也不相同

position屬性用來指定一個元素在網(wǎng)頁上的位置，一共有5種定位方式：

static-靜態(tài)
relative-相對定位
fixed-固定定位
absolute-絕對定位
sticky-粘性定位

資料文章：

w3c: https://www.w3schools.com/css/css_positioning.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

CSS 定位詳解：https://www.ruanyifeng.com/blog/2019/11/css-position.html

表格布局

使用方法——display:table/table-row/table-cell....

有兩種方式使用表格布局 -HTML Table（<table>標(biāo)簽）和CSS Table（display:table 等相關(guān)屬性）。

HTML Table是指使用原生的<table>標(biāo)簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。

table布局的display總共包含如下值

table：指定對象作為塊元素級的表格，相當(dāng)于html標(biāo)簽<table>
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格，相當(dāng)于html標(biāo)簽<table>
table-caption：指定對象作為表格標(biāo)題，相當(dāng)于html標(biāo)簽<caption>
table-cell：指定對象作為表格單元格，相當(dāng)于html標(biāo)簽<td>
table-row：指定對象作為表格行，相當(dāng)于html標(biāo)簽<tr>
table-row-group：指定對象作為表格行組，相當(dāng)于html標(biāo)簽<tbody>
table-column：指定對象作為表格列，相當(dāng)于html標(biāo)簽<col>
table-column-group：指定對象作為表格列組顯示，相當(dāng)于html標(biāo)簽<colgroup>
table-header-group：指定對象作為表格標(biāo)題組，相當(dāng)于html標(biāo)簽<thead>
table-footer-group：指定對象作為表格腳注組，相當(dāng)于html標(biāo)簽<tfoot>

資料文章：

display:table的幾個用法：https://blog.51cto.com/u_4048786/3205160

css table布局大法：https://segmentfault.com/a/1190000007007885

display:table的用法：https://www.jianshu.com/p/037a706ba9e9

柵格布局

使用方法 ——display：grid

網(wǎng)格布局將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。

column-gap Specifies the gap between the columns

grid：設(shè)置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow屬性
grid-area：設(shè)置grid-row-start, grid-column-start, grid-row-end, grid-column-end屬性
grid-auto-columns：設(shè)置瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬
grid-auto-flow：設(shè)置排序方式
grid-auto-rows：設(shè)置瀏覽器自動創(chuàng)建的多余網(wǎng)格的行高
grid-column ：設(shè)置grid-column-start and、grid-column-end properties
grid-column-end：設(shè)置右邊框所在的垂直網(wǎng)格線
grid-column-gap：設(shè)置列間距
grid-column-start：設(shè)置左邊框所在的垂直網(wǎng)格線
grid-gap：設(shè)置grid-row-gap、grid-column-gap屬性
grid-row：設(shè)置grid-row-start、grid-row-end屬性
grid-row-end：設(shè)置下邊框所在的水平網(wǎng)格線
grid-row-gap：設(shè)置行間距
grid-row-start：設(shè)置上邊框所在的水平網(wǎng)格線
grid-template：設(shè)置grid-template-rows,、grid-template-columns、grid-areas屬性
grid-template-areas：設(shè)置網(wǎng)格的區(qū)域，一個區(qū)域由多少單元格組成
grid-template-columns：設(shè)置列寬
grid-template-rows：設(shè)置行高
row-gap：設(shè)置行與行之間的間距

資料文章：

w3c：https://www.w3schools.com/css/css_grid.asp

CSS Grid 網(wǎng)格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局：https://juejin.cn/post/6854573220306255880

A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/

多列布局

使用方法——column-count

column-count： length ｜ auto

column-width：interger ｜ auto

column-count：描述元素的列數(shù)
column-fill：設(shè)置多列內(nèi)容的平衡填充模式
column-gap：屬性用來設(shè)置元素列之間的間隔（gutter）大小
column-rule：屬性規(guī)定了列與列之間的直線
column-rule-color：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的顏色
column-rule-style：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的樣式
column-rule-width：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的寬度
column-span：設(shè)置某一個內(nèi)容是否跨多欄顯示。
columns：用來設(shè)置元素的列寬和列數(shù)

資料文章：

淺談CSS3多列布局：https://juejin.cn/post/6844903450623524872

CSS columns分欄布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

Column 對象

Column 對象是HTML table（表格）中的列。

在每個HTML文檔的 <col> 標(biāo)簽中，都可以創(chuàng)建Column對象。

<col> 元素描述了在 <colgroup> 元素中的每個列屬性。

如需對全部列應(yīng)用樣式，<col> 標(biāo)簽很有用，這樣就不需要對各個單元和各行重復(fù)應(yīng)用樣式了。

Column對象屬性

屬性	描述
span	設(shè)置或者返回列中span屬性的值。

標(biāo)準(zhǔn)屬性和事件

Column 對象同樣支持標(biāo)準(zhǔn) 屬性和事件.

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：HTML DOM 元素對象
下一篇：僅需 5 步，用 JavaScript 直接通過前端發(fā)送電子郵件

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 基礎(chǔ)的&amp;lt;table&amp;gt; 標(biāo)簽

普通布局

資料文章：

浮動布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

您的項目需求

HTML 基礎(chǔ)的<table> 標(biāo)簽