網頁中應用表格愛好者

主頁 > 學習 > HTML >

次瀏覽

摘要:你認為已經知道怎么制做表格了吧。當然,你已經了解 table、tr、td和th標簽了,甚至還在你的口袋里裝入了rowspan和colspan。你確實可以制做一個精美小巧的咖啡色三合板桌子(表格),但難道你不想做一個優雅穩固,上面有玻璃的,足以承受一頭大笨象的宴會桌(

你認為已經知道怎么制做表格了吧。當然,你已經了解 table、tr、td和th標簽了,甚至還在你的口袋里裝入了rowspan和colspan。你確實可以制做一個精美小巧的咖啡色三合板桌子(表格),但難道你不想做一個優雅穩固,上面有玻璃的,足以承受一頭大笨象的宴會桌(表格)?

列反罷工

表格行簡直使表格列看起來很愚蠢。同樣的工作,表格由行與行構建,讓列感到十分沮喪。

但是很幸運,colgroup和col標簽來拯救熱心的列了。

這兩個標簽允許你定義表格列和盡你所需地樣式化它們,對于你需要把列排成行或不同著色特別有用,如果沒有它們,你需要樣式化每一個單獨的單元格。

這是一個使用這些標簽的例子:













ThisThatThe other
LadybirdLocustLunch

alternate類的樣式將被應用到第二列,或者說每一行的第二個單元格。

你當然可以在colgroup或者col上使用span屬性,跟rowspan和colspan有相似的用途

colgroup一起使用可以定義屬于列組的行數,比如會組合頭兩列。當在colgroup使用span時,不應該再使用col標簽。

在col里使用span是更明智的,可以,比如,應用在上述例子像這樣:



 ...

這將把alternate類應用到最后兩列。

注意

哦,但是可能有一個陷井,不是嗎?那就是:你僅能樣式化列的是邊框、背景、寬度和可見性。

Internet Explorer在這方面看起來比其他瀏覽器表現更好因為它裝載有漂亮的CSS屬性比如 color,但是,正如結果一樣,這是因為它瘋狂古怪的行為而已。這種奇特的異常可以讓Ian Hixie來解釋。

摘要和說明插曲

一個簡要和容易的提高易用性的思考是,總是為表格應用摘要和說明。

摘要可以在表格起始標簽table中用summary屬性應用到表格中。這不會顯示,但可以輔助非可視化的表格表現。

caption標簽在起始標簽table后直接定義說明。它默認直接在表格頂端出現,但可以在CSS屬性caption-side中設置top、right、bottom或者left值,盡管IE不會在意。



...

表頭、表注和滾動表格的探討

thead、tfoot和tbody允許你把表格分為表頭、表注和表格主體。對于大表格尤其有用,在打印的時候,表頭和表注應該會在每一頁都出現。

這些元素必須按thead-tfoot-tbody的順序定義,像這樣:

Locust mating habits





















 ...

Header 1Header 2Header 3
Footer 1Footer 2Footer 3
Cell 1Cell 2Cell 3

你可以讓表格主體tbody在基于Gecko的瀏覽器(Mozilla、Firefox和Netscape 6+等)滾動,通過應用overflow: auto; max-height: [whatever] 的樣式。然后你可以看見表頭和表注固定,而表的主體右邊有滾動條。你應該謹慎使用max-height屬性因為IE不認識,比較安全的做法是使用 height屬性,IE將為它應用到每一行。

注意:說回瀏覽器的差異,目前IE遇到表頭和表注時還是沒有什么線索,盡管還是當作表格來處理,但打印的時候不會在哦每一頁都出現表頭和表注,只孤零零地傳遞滾動的表格。

注意

謹慎對待滾動表格。盡管它們提供十分有用的目的,大部分用戶不習慣它們并且認為線性數據是唯一的。

隨機新聞
急速赛车收