HTML表格實例分析

本篇內(nèi)容主要講解“HTML表格實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML表格實例分析”吧!

目前累計服務客戶超過千家，積累了豐富的產(chǎn)品開發(fā)及服務經(jīng)驗。以網(wǎng)站設計水平和技術實力，樹立企業(yè)形象，為客戶提供網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設計、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。創(chuàng)新互聯(lián)公司始終以務實、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領先技術的掌握、對創(chuàng)意設計的研究、對客戶形象的視覺傳遞、對應用系統(tǒng)的結合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

table

【默認樣式】

復制代碼

//IE7-瀏覽器不支持border-spacing

table{

border-collapse: separate;

border-spacing: 2px;

border: 1px solid gray;

}

復制代碼

【屬性】

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

border="0"//沒有邊框

border="8"//8像素寬的邊框

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

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

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

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

4、summary(html5已廢棄)

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

5、width(html5已廢棄)

　　表格寬度

復制代碼

<tr>

</tr>

<tr>

</tr>

</table>

復制代碼

IFrame

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

值描述

void 不顯示外側邊框。

above 顯示上部的外側邊框。

below 顯示下部的外側邊框。

hsides 顯示上部和下部的外側邊框。

vsides 顯示左邊和右邊的外側邊框。

lhs 顯示左邊的外側邊框。

rhs 顯示右邊的外側邊框。

box 在所有四個邊上顯示外側邊框。

border 在所有四個邊上顯示外側邊框。

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

值描述

none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

<演示框>點擊下列相應屬性值可進行演示

IFrame

【樣式】

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實際上有兩種截然不同的邊框模型。按布局術語來說，如果單元格相互之間是分隔的，是分隔邊框模型在起作用；另一種是合并邊框模型，單元格邊框會相互合并。

border-collapse:separate;

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

border-collapse:collapse;

在合并邊框模型中，表格無法設置內(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)先級逐漸降級

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

IFrame

4、table-layout

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

【自動布局的步驟】

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

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

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

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

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

【固定布局的步驟】

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

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

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應用到表格單元格時會被忽略

行

【<tr><th><td>】

<tr>行 table row

<th>表頭 table head

<td>表格數(shù)據(jù) table data

【默認樣式】

復制代碼

th{

padding: 1px;

text-align: center;

font-weight: bold;

}

td{

padding: 1px;

}

復制代碼

【屬性】

1、colspan

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

2、rowspan

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

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

<演示框>點擊下列相應屬性值可進行演示

IFrame

列

【<col><colgroup>】

<col> -> column 列

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

<colgroup> -> column group 列組

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

【屬性】

span

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

【樣式】

1、visibility:collapse

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

2、border

只有當border-collapse:collapse時，才能設置border

3、background

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

4、width

定義列或列組的最小寬度

復制代碼

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

復制代碼

其他表格元素

【<thead><tbody><tfoot>】

<thead>表格頁眉

<tbody>表格主體

<tfoot>表格頁腳

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

【<caption>表格標題】

【默認樣式】

caption{

text-align: center;

}

【樣式】

caption-side: top(默認)

caption-side: bottom

[注意]<caption>標簽必須緊隨<table>標簽之后，且只能對每個表格定義一個標題

復制代碼

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

<tr>

</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元素設置與表格有關的display值

匿名表格對象

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

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

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個不同的層，對應表各個方面的樣式都在其各自的層上繪制。默認地，所有元素背景都是透明的，如果單元格、行、列等沒有自己的背景，則table元素的背景將透明這些內(nèi)部元素可見。

<演示框>點擊下列相應屬性值可進行演示

邊距設置

【<table>】

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

若處于合并邊框模型，只可設置margin

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

margin和padding都不可設置

【<td><th>】

不可設置margin，但可以設置padding

【<caption>】

margin和padding都可設置

到此，相信大家對“HTML表格實例分析”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

本文名稱：HTML表格實例分析
網(wǎng)頁鏈接：http://muchs.cn/article34/pjjhse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站設計、網(wǎng)站制作、移動網(wǎng)站建設、手機網(wǎng)站建設

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

猜你還喜歡下面的內(nèi)容