在HTML中,很容易知道哪些元素屬于表,因為像tr和td之類(lèi)元素的處理已經(jīng)內置在瀏覽器中。與此不同,在XML中則沒(méi)有辦法從根本上知道哪些元素可能是表的一部分。
因此引人了一組display值。
這一章中,我們只討論網(wǎng)頁(yè)設計與表有關(guān)的值,因為其他值已經(jīng)在其他章節討論過(guò)。與表相關(guān)的值可以總結如下:
table
這個(gè)值指定一個(gè)元素定義了一個(gè)塊級表。因此,它定義了一個(gè)生成塊框的矩形塊。相應的HTML元素當然是table。
display
值:
none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
初始值:inline
應用于:所有元素
繼承性:無(wú)
計算值:對于浮動(dòng),定位和根元素,計算值可變(見(jiàn)CSS2.1第9.7節否則,根據指定確定
說(shuō)明:網(wǎng)站建設中還有值compact和marker,不過(guò)由于缺乏廣泛的支持,在 CSS2.1中已經(jīng)去掉
inline-table
這個(gè)值指定一個(gè)元素定義了一個(gè)行內級表。這說(shuō)明,該元素定義了一個(gè)生成行內框的矩形塊,與之最接近的非表值是inline-block。最接近的HTML元素為table,不過(guò),默認情況下HTML表不是行內元素。
table-row
這個(gè)值指定一個(gè)元素是一個(gè)單元格的行。相應的HTML元素是tr元素。
table-row-group
這個(gè)值指定一個(gè)元素是一個(gè)或多個(gè)行的組。相應的HTML值是tbody。
table-header-group
這個(gè)值與table-row-group非常相似,只是視覺(jué)格式化方面有所不同,標題行組總是在所有其他行和行組之前顯示。打印時(shí),如果一個(gè)表需要多頁(yè)打印,用戶(hù)代理可以在各頁(yè)頂端重復標題行,規范沒(méi)有定義如果為多個(gè)元素指定table-header-group值會(huì )發(fā)生什么情況。標題組可以包含多個(gè)行。與之對應的HTML元素是thead。
table-footer-group
這個(gè)值與table-header-group很類(lèi)似,不過(guò)腳注行組總是在所有其他行之后顯示,如果最下面有頁(yè)腳標S,要在該總標題之前顯示。打印時(shí),如果一個(gè)表需要多頁(yè)打印,用戶(hù)代理可以在各頁(yè)底端重復頁(yè)腳行。規范沒(méi)有定義如果為多個(gè)元素指定table-foo.ter-group值會(huì )有什么結果。與之對應的HTML元素是tfoot。
table-column
這個(gè)值聲明元素描述了一個(gè)單元格的列。按網(wǎng)站建設的術(shù)語(yǔ)來(lái)說(shuō),有這個(gè)display值的元素并不顯示,就好像它的display值為none—樣。之所以存在這個(gè)值,主要是為了幫助定義列中單元格的表示。相應的HTML元素是col元素。
table-column-group
網(wǎng)站建設這個(gè)值聲明一個(gè)元素是一個(gè)或多個(gè)列的組。類(lèi)似于table-column元素,table- column-group元素也不顯示,不過(guò)這個(gè)值有助于定義列組中元素的表示。相應的HTML元素是colgroup元素。
table-cell
這個(gè)值指定一個(gè)元素表示表中的單個(gè)單元格。HTML元素th和td都屬于table- eell元素。
table-caption
這個(gè)值定義一個(gè)表的總標題。網(wǎng)站建設沒(méi)有定義如果多個(gè)元素的display值都為caption時(shí)會(huì )發(fā)生什么情況,不過(guò)CSS確實(shí)明確地警告,“……創(chuàng )作人員不要在一個(gè)表或行內表元素中放多個(gè)有display: caption的元素?!?/p>
下面從附錄C給出的示例HTML 4.0樣式表中節取一部分,對這些值的一般效果做了一個(gè)簡(jiǎn)短的總結:
table {display: table;}
tr {display: table-row;}
thead {display: table-header-group;}
tbody {display: table-row-group;}
tfoot {display: table-footer-group;}
col {display: table-column;}
colgroup {display: table-column-group;}
td, th {display: table-cell;}
caption {display: table-caption;}
在XML中,默認地元素沒(méi)有顯示語(yǔ)義,所以這些值非常有用??紤]以下標記:
<scores>
<headers>
<label>Team</label> clabel>Score</label>
</headers>
<garne sport="MLB" league="NL">
<name>Reds</name>
<score>8</score>
</team>
<name>Cubs</name>
<score>5</score>
</team>
</ganle>
</scores>
可以用以下樣式將其格式化為一種表格形式:
scores {display: table;}
headers {display: table-header-group;}
game {display: table-row-group;}
team {display: table-row;}
label, name., score {display: table-cell;}
然后根據需要對各個(gè)單元格應用樣式,例如,將label元素變?yōu)榇煮w,對scores右對齊。
注意:盡管理論上可以為任何HTML元素指定與表有關(guān)的display值,不過(guò)在IE7之前,Internet Explorer并不支持這個(gè)功能,
當前文章標題:網(wǎng)頁(yè)設計中的表顯示值
當前URL:http://amzcoolest.com/news/wzzz/shows-values.html