顧名思義,表標(biāo)超是一小段文本,描述了表內(nèi)容的本質(zhì)。因此,對于2003年第4季度的一個股票行情表,表標(biāo)題元素的內(nèi)容可能讀作“Q4 2003 Stock Performance”,利用屬性caption-side,可以把這個元素放在table之上,也可以放在table的底下,而不論該表標(biāo)題出現(xiàn)在表結(jié)構(gòu)中的哪個位置(在HTML中,caption元素只能出現(xiàn)在開始table元素的后面,不過其他語言可能有不同的規(guī)則)。
表標(biāo)題有點奇怪,至少從視覺上看有些奇怪。網(wǎng)站建設(shè)規(guī)范指出,表標(biāo)題格式化為就好像它是直接放在表框之前(或之后)的一個塊框,只有兩個不同。首先,表標(biāo)題仍能從表繼承值;其次,用戶代理在考慮如何處理表前面的run-in元素時會忽略表標(biāo)越框。因此,如果一個run-in元素在表之前,它不會進(jìn)人表的上標(biāo)題,也不會進(jìn)入表中,而是處理為好像其display值為block。
caption-side
值:top | bottom
初始值:top
應(yīng)用于:display值為table-caption 的元素
繼承性:有
計算值:根據(jù)指定確定
說明:網(wǎng)站建設(shè)中還有值left和right,不過由于缺乏廣泛的支持,這兩個值在CSS2.1中已經(jīng)去掉
通過一個簡單的例子就可以說明有關(guān)表標(biāo)題表示的大部分重要方面??紤]以下樣式,如圖11-5所示:
caption {background: gray; margins 1em 0;caption-side: top;}
table{color: white; background: black; margin: 0.5em 0,"}
caption元素中的文本從table繼承了color值white,但caption有自己的背景。table 的外邊框邊界和caption的外邊距邊界之間的間隔為1em,因為table的上外邊距與caption的下外邊距合并,見第7章的描述。最后,caption的寬度要基于table元素的內(nèi)容寬度,這是caption的包含塊。如果把caption-side的值改為bottom,會得到同樣的結(jié)果,只不過caption將出現(xiàn)在表框的后面,另外將合并caption的上外邊距和table 的下外邊距。
大多數(shù)情況下,為caption應(yīng)用樣式非常類似于塊級元素,它們可以有內(nèi)邊距、邊框。背景等。例如,如果網(wǎng)頁設(shè)計人員需要改變caption中文本的水平對齊,可以使用屬性text-align。因此,要把上例中的標(biāo)題右對齊,可以寫作:
caption (background: gray; margin: 1em 0; caption-side: top; text-align: right;}
注意:到2006年中期,網(wǎng)頁設(shè)計人員為表標(biāo)題設(shè)置樣式還是一個很危險的事情。有些瀏覽器支持表標(biāo)題的上下外邊距,但有些并不支持,有些瀏覽器會相對于表的寬度計算表標(biāo)題寬度,而另外一些瀏覽器則用完全不同的方法來計算。把所有這些行為都列出來是沒有意義的,因為可以預(yù)見到這個領(lǐng)域的變化很快。之所以在此特別說明,主要是為了讓讀者對可能遇到的問題提前有所認(rèn)識。
當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計中的表標(biāo)題
當(dāng)前URL:http://www.gtalker.cn/news/wzzz/3020.html