深入理解HTML表格

在CSS出現(xiàn)之前，table元素常常用來布局。這種做法在HTML4之后不再推薦使用。而現(xiàn)在有些矯枉過正，使用table展示數(shù)據(jù)都可能會被說不規(guī)范。本文將詳細介紹HTML表格table

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了盧龍免費建站歡迎大家使用！

table

【默認樣式】

深入理解HTML表格

//IE7-瀏覽器不支持border-spacingtable{
　　border-collapse: separate;
　　border-spacing: 2px;
　　border: 1px solid gray;
}

深入理解HTML表格

【屬性】

1、border(在html5中，border只能為"1"或" ")(html5已廢棄)

border="0"http://沒有邊框border="8"http://8像素寬的邊框

2、cellpadding(px/%)(html5已廢棄)

　　規(guī)定單元邊界與單元內(nèi)容之間的間距

3、cellspacing(px/%)(html5已廢棄)

　　規(guī)定單元格之間的間距

4、summary(html5已廢棄)

　　表格內(nèi)容的摘要

5、width(html5已廢棄)

　　表格寬度

深入理解HTML表格


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

深入理解HTML表格

6、frame(IE7-瀏覽器不能正常顯示)(html5已廢棄)

值	描述
void	不顯示外側(cè)邊框。
above	顯示上部的外側(cè)邊框。
below	顯示下部的外側(cè)邊框。
hsides	顯示上部和下部的外側(cè)邊框。
vsides	顯示左邊和右邊的外側(cè)邊框。
lhs	顯示左邊的外側(cè)邊框。
rhs	顯示右邊的外側(cè)邊框。
box	在所有四個邊上顯示外側(cè)邊框。
border	在所有四個邊上顯示外側(cè)邊框。

　7、rules(IE7-瀏覽器不能正常顯示)(html5已廢棄)

值	描述
none	沒有線條。
groups	位于行組和列組之間的線條。
rows	位于行之間的線條。
cols	位于列之間的線條。
all	位于行和列之間的線條。

<演示框>點擊下列相應(yīng)屬性值可進行演示

【樣式】

1、border-spacing[可替代HTML屬性cellspaing](IE7-不支持)

[注意]只有當border-collapse值為separate時，該樣式才有效

border-spacing: x y//x:水平間距 y:垂直間距。若只有一個值，則水平間距和垂直間距相等。注意，不可為負值。

　2、empty-cells(IE7-不支持)

empty-cells: hide 不在空單元格周圍繪制邊框和背景，類似于hidden效果
empty-cells: show(默認) 在空單元格周圍繪制邊框和背景

　3、CSS實際上有兩種截然不同的邊框模型。按布局術(shù)語來說，如果單元格相互之間是分隔的，是分隔邊框模型在起作用；另一種是合并邊框模型，單元格邊框會相互合并。

border-collapse:separate;

　[注意]在分隔邊框模型中，不能為行、行組、列和列組設(shè)置邊框。

border-collapse:collapse;

　在合并邊框模型中，表格無法設(shè)置內(nèi)邊距padding，且單元格邊框之間也沒有間距。單元格之間的邊框會在單元格間的假想表格線上居中，且表格寬度只包含表格邊框的一半

【邊框合并的規(guī)則】

a、某個合并邊框的border-style為hidden，它會優(yōu)先于所有其他合并邊框。這個位置上的所有邊框都隱藏

b、某個合并邊框的border-style為none，它的優(yōu)先級最低

c、寬邊框優(yōu)先于窄邊框

d、若寬度相同，double\solid\dashed\dotted\ridge\outset\groove\inset，優(yōu)先級逐漸降低

e、若樣式也相同，cell\row\row group\column\column group\table，優(yōu)先級逐漸降級

　　<演示框>點擊下列相應(yīng)屬性值可進行border-style的演示

4、table-layout

table-layout:auto//自動寬度布局

【自動布局的步驟】

a、對于一列中的單元格，計算最小和最大單元格寬度

b、對于各一列，計算最小和最大列寬

c、若單元格跨列，最小列寬之和要等于跨列單元格最小單元格寬度

table-layout:fixed//固定寬度布局

[注意]對于表單元格的長文本來說，使用word-wrap或word-break來強制換行，使用text-overflow實現(xiàn)文本溢出控制都需要設(shè)置table-layout:fixed

【固定布局的步驟】

a、width屬性值不是auto的所有列元素會根據(jù)width值設(shè)置該列的寬度

b、如果一個列的寬度為auto，則根據(jù)該單元格設(shè)置此列寬度，如果跨多列，則寬度平均分配

c、如果列寬度仍為auto，則自動確定其大小，使其寬度盡可能相等

[注意]使用固定寬度布局，用戶代理可以更快地計算出表格的布局

5、vertical-align

vertical-align: top;//頂端對齊vertical-align: bottom;//底端對齊vertical-align: middle;//中間對齊vertical-align: baseline(默認);//基線對齊

[注意]vertical-align:sub\super\text-top\text-bottom應(yīng)用到表格單元格時會被忽略

行

【】

  行 table row 
  表頭 table head  表格數(shù)據(jù) table data

【默認樣式】

深入理解HTML表格

th{
    padding: 1px;
    text-align: center;
    font-weight: bold;
}
td{
    padding: 1px;
}

深入理解HTML表格

【屬性】

1、colspan

規(guī)定單元格可橫跨的列數(shù)

2、rowspan

規(guī)定單元格可橫跨的行數(shù)

　[注意]關(guān)于行的表格元素生成矩形框，這些框有內(nèi)容、內(nèi)邊距和邊框，但是沒有外邊距margin。表頭呈現(xiàn)為居中的粗體文本

<演示框>點擊下列相應(yīng)屬性值可進行演示

列

【】

-> column 列

為表格中一個或多個列定義屬性值

-> column group 列組

對表格中的列進行組合，以便對其進行格式化

【屬性】

span

規(guī)定col元素應(yīng)該橫跨的列數(shù)

【樣式】

1、visibility:collapse

該列或列組的所有單元格不顯示(設(shè)置為其他值則無效)

2、border

只有當border-collapse:collapse時，才能設(shè)置border

3、background

只有當單元格及其行有透明背景時，列或列組的背景才可見

4、width

定義列或列組的最小寬度

深入理解HTML表格

深入理解HTML表格

其他表格元素

【】

表格頁眉表格主體表格頁腳

　[注意]它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳

【表格標題】

【默認樣式】

caption{
    text-align: center;
}

　【樣式】

caption-side: top(默認)
caption-side: bottom

　[注意]標簽必須緊隨

標簽之后，且只能對每個表格定義一個標題

深入理解HTML表格


　 北京天氣

地區(qū)	天氣
北京	都霧霾
城八區(qū)	霧霾
郊區(qū)	霧霾

深入理解HTML表格

display

深入理解HTML表格

table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}

深入理解HTML表格

　　 [注意]IE7-瀏覽器不支持為HTML元素設(shè)置與表格有關(guān)的display值