顧名思義，表標(biāo)超是一小段文本，描述了表內(nèi)容的本質(zhì)。因此，對(duì)于2003年第4季度的一個(gè)股票行情表，表標(biāo)題元素的內(nèi)容可能讀作“Q4 2003 Stock Performance”，利用屬性caption-side，可以把這個(gè)元素放在table之上，也可以放在table的底下，而不論該表標(biāo)題出現(xiàn)在表結(jié)構(gòu)中的哪個(gè)位置（在HTML中，caption元素只能出現(xiàn)在開始table元素的后面，不過其他語言可能有不同的規(guī)則）。

表標(biāo)題有點(diǎn)奇怪，至少?gòu)囊曈X上看有些奇怪。網(wǎng)站建設(shè)規(guī)范指出，表標(biāo)題格式化為就好像它是直接放在表框之前（或之后）的一個(gè)塊框，只有兩個(gè)不同。首先，表標(biāo)題仍能從表繼承值；其次，用戶代理在考慮如何處理表前面的run-in元素時(shí)會(huì)忽略表標(biāo)越框。因此，如果一個(gè)run-in元素在表之前，它不會(huì)進(jìn)人表的上標(biāo)題，也不會(huì)進(jìn)入表中，而是處理為好像其display值為block。

caption-side

值：top | bottom

初始值：top

應(yīng)用于：display值為table-caption 的元素

繼承性：有

計(jì)算值：根據(jù)指定確定

說明：網(wǎng)站建設(shè)中還有值left和right，不過由于缺乏廣泛的支持，這兩個(gè)值在CSS2.1中已經(jīng)去掉

通過一個(gè)簡(jiǎn)單的例子就可以說明有關(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，因?yàn)閠able的上外邊距與caption的下外邊距合并，見第7章的描述。最后，caption的寬度要基于table元素的內(nèi)容寬度，這是caption的包含塊。如果把caption-side的值改為bottom，會(huì)得到同樣的結(jié)果，只不過caption將出現(xiàn)在表框的后面，另外將合并caption的上外邊距和table 的下外邊距。

大多數(shù)情況下，為caption應(yīng)用樣式非常類似于塊級(jí)元素，它們可以有內(nèi)邊距、邊框。背景等。例如，如果網(wǎng)頁設(shè)計(jì)人員需要改變caption中文本的水平對(duì)齊，可以使用屬性text-align。因此，要把上例中的標(biāo)題右對(duì)齊，可以寫作：

caption (background: gray; margin: 1em 0; caption-side: top; text-align: right;}

注意：到2006年中期，網(wǎng)頁設(shè)計(jì)人員為表標(biāo)題設(shè)置樣式還是一個(gè)很危險(xiǎn)的事情。有些瀏覽器支持表標(biāo)題的上下外邊距，但有些并不支持，有些瀏覽器會(huì)相對(duì)于表的寬度計(jì)算表標(biāo)題寬度，而另外一些瀏覽器則用完全不同的方法來計(jì)算。把所有這些行為都列出來是沒有意義的，因?yàn)榭梢灶A(yù)見到這個(gè)領(lǐng)域的變化很快。之所以在此特別說明，主要是為了讓讀者對(duì)可能遇到的問題提前有所認(rèn)識(shí)。