深入理解HTML表格-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的咸寧網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

table

【默認(rèn)樣式】

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

【屬性】

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

border="0"http://沒(méi)有邊框border="8"http://8像素寬的邊框

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

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

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

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

4、summary(html5已廢棄)

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

5、width(html5已廢棄)

   　　 表格寬度

<table border="2" cellpadding="5" cellspacing="3" summary="測(cè)試表格" width="300">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

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

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

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

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

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

【樣式】

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

[注意]只有當(dāng)border-collapse值為separate時(shí)，該樣式才有效

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

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

empty-cells: hide 不在空單元格周?chē)L制邊框和背景，類(lèi)似于hidden效果
empty-cells: show(默認(rèn)) 在空單元格周?chē)L制邊框和背景

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

border-collapse:separate;

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

border-collapse:collapse;

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

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

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

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

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

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

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

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

4、table-layout

table-layout:auto//自動(dòng)寬度布局

【自動(dòng)布局的步驟】

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

b、對(duì)于各一列，計(jì)算最小和大列寬

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

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

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

【固定布局的步驟】

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

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

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

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

5、vertical-align

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

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

行

【<tr><th><td>】

  <tr>行 table row 
  <th>表頭 table head  <td>表格數(shù)據(jù) table data

【默認(rèn)樣式】

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

【屬性】

1、colspan

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

2、rowspan

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

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

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

列

【<col><colgroup>】

<col> -> column 列

為表格中一個(gè)或多個(gè)列定義屬性值

<colgroup> -> column group 列組

對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化

【屬性】

span

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

【樣式】

1、visibility:collapse

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

2、border

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

3、background

只有當(dāng)單元格及其行有透明背景時(shí)，列或列組的背景才可見(jiàn)

4、width

定義列或列組的最小寬度

<table border="1" >
  <colgroup span="2" ></colgroup>
  <col  >
  <tr>
    <td>數(shù)字</td>
    <td>中文</td>
    <td>英文</td>
  </tr>
  <tr>
    <td>1</td>
    <td>一</td>
    <td>a</td>
  </tr>
  <tr>
    <td>2</td>
    <td>二</td>
    <td>b</td>
  </tr>
</table>

其他表格元素

【<thead><tbody><tfoot>】

<thead>表格頁(yè)眉<tbody>表格主體<tfoot>表格頁(yè)腳

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

 【<caption>表格標(biāo)題】

【默認(rèn)樣式】

caption{
    text-align: center;
}

【樣式】

caption-side: top(默認(rèn))
caption-side: bottom

[注意]<caption>標(biāo)簽必須緊隨<table>標(biāo)簽之后，且只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題

<table border="1" >
　 <caption >北京天氣</caption>
  <thead>
    <tr>
      <th>地區(qū)</th>
      <th>天氣</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>北京</td>
      <td>都霧霾</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>城八區(qū)</td>
      <td>霧霾</td>
    </tr>
    <tr>
      <td>郊區(qū)</td>
      <td>霧霾</td>
    </tr>
  </tbody>
</table>

display

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;}

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

匿名表格對(duì)象

CSS定義了一種機(jī)制，將遺漏的組件作為匿名對(duì)象插入。詳細(xì)插入規(guī)則如下：

1、如果table-cell元素的父元素不是table-row元素，則插入匿名table-row對(duì)象

2、如果table-row元素的父元素不是table、inline-table或table-row-group元素，則插入匿名table元素

3、如果table-column元素父元素不是table、inline-table或table-row-group元素，則插入匿名table元素

4、如果table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父元素不是table元素，則插入匿名table元素

5、如果table元素或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption，則插入匿名table-row元素

6、如果table-row-group、table-header-group、table-footer-group元素的子元素不是table-row元素，則插入匿名table-row元素

7、如果table-row元素的子元素不是table-cell元素，則插入匿名tabel-cell元素

表格層

 　　CSS定義了6個(gè)不同的層，對(duì)應(yīng)表各個(gè)方面的樣式都在其各自的層上繪制。默認(rèn)地，所有元素背景都是透明的，如果單元格、行、列等沒(méi)有自己的背景，則table元素的背景將透明這些內(nèi)部元素可見(jiàn)。

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

邊距設(shè)置

【<table>】

若處于分隔邊框模型，margin和padding都可設(shè)置

若處于合并邊框模型，只可設(shè)置margin

【<thead><tbody><tfoot><tr><col><colgroup>】

 margin和padding都不可設(shè)置

【<td><th>】

 不可設(shè)置margin，但可以設(shè)置padding

【<caption>】

 margin和padding都可設(shè)置

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱(chēng)欄目：深入理解HTML表格-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article18/ddhggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)