您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“HTML表格實(shí)例分析”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML表格實(shí)例分析”吧!
table
【默認(rèn)樣式】
復(fù)制代碼
//IE7-瀏覽器不支持border-spacing
table{
border-collapse: separate;
border-spacing: 2px;
border: 1px solid gray;
}
復(fù)制代碼
【屬性】
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已廢棄)
表格寬度
復(fù)制代碼
<table border="2" cellpadding="5" cellspacing="3" summary="測試表格" 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>
復(fù)制代碼
IFrame
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 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。
<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示
IFrame
【樣式】
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 不在空單元格周圍繪制邊框和背景,類似于hidden效果
empty-cells: show(默認(rèn)) 在空單元格周圍繪制邊框和背景
3、CSS實(shí)際上有兩種截然不同的邊框模型。按布局術(shù)語來說,如果單元格相互之間是分隔的,是分隔邊框模型在起作用;另一種是合并邊框模型,單元格邊框會(huì)相互合并。
border-collapse:separate;
[注意]在分隔邊框模型中,不能為行、行組、列和列組設(shè)置邊框。
border-collapse:collapse;
在合并邊框模型中,表格無法設(shè)置內(nèi)邊距padding,且單元格邊框之間也沒有間距。單元格之間的邊框會(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的演示
IFrame
4、table-layout
table-layout:auto//自動(dòng)寬度布局
【自動(dòng)布局的步驟】
a、對(duì)于一列中的單元格,計(jì)算最小和最大單元格寬度
b、對(duì)于各一列,計(jì)算最小和最大列寬
c、若單元格跨列,最小列寬之和要等于跨列單元格最小單元格寬度
table-layout:fixed//固定寬度布局
[注意]對(duì)于表單元格的長文本來說,使用word-wrap或word-break來強(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)確定其大小,使其寬度盡可能相等
[注意]使用固定寬度布局,用戶代理可以更快地計(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)樣式】
復(fù)制代碼
th{
padding: 1px;
text-align: center;
font-weight: bold;
}
td{
padding: 1px;
}
復(fù)制代碼
【屬性】
1、colspan
規(guī)定單元格可橫跨的列數(shù)
2、rowspan
規(guī)定單元格可橫跨的行數(shù)
[注意]關(guān)于行的表格元素生成矩形框,這些框有內(nèi)容、內(nèi)邊距和邊框,但是沒有外邊距margin。表頭呈現(xiàn)為居中的粗體文本
<演示框>點(diǎn)擊下列相應(yīng)屬性值可進(jìn)行演示
IFrame
列
【<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è)置為其他值則無效)
2、border
只有當(dāng)border-collapse:collapse時(shí),才能設(shè)置border
3、background
只有當(dāng)單元格及其行有透明背景時(shí),列或列組的背景才可見
4、width
定義列或列組的最小寬度
復(fù)制代碼
<table border="1" style="border-collapse: collapse">
<colgroup span="2" style="width:100px; background-color: red"></colgroup>
<col style="background-color: green; width:200px; border: 3px solid blue;" >
<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>
復(fù)制代碼
其他表格元素
【<thead><tbody><tfoot>】
<thead>表格頁眉
<tbody>表格主體
<tfoot>表格頁腳
[注意]它們的出現(xiàn)次序是:thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳
【<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)題
復(fù)制代碼
<table border="1" >
<caption style="caption-side:bottom">北京天氣</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>
復(fù)制代碼
display
復(fù)制代碼
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;}
復(fù)制代碼
[注意]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)地,所有元素背景都是透明的,如果單元格、行、列等沒有自己的背景,則table元素的背景將透明這些內(nèi)部元素可見。
<演示框>點(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è)置
到此,相信大家對(duì)“HTML表格實(shí)例分析”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。