HTML表格高級(jí)教程_XHTML教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
你認(rèn)為已經(jīng)知道怎么制做表格了吧。當(dāng)然,你已經(jīng)了解 table、tr、td和th標(biāo)簽了,甚至還在你的口袋里裝入了rowspan和colspan。你確實(shí)可以制做一個(gè)精美小巧的咖啡色三合板桌子(表格),但難道你不想做一個(gè)優(yōu)雅穩(wěn)固,上面有玻璃的,足以承受一頭大笨象的宴會(huì)桌(表格)?
列反罷工
表格行簡(jiǎn)直使表格列看起來很愚蠢。同樣的工作,表格由行與行構(gòu)建,讓列感到十分沮喪。
但是很幸運(yùn),colgroup和col標(biāo)簽來拯救熱心的列了。
這兩個(gè)標(biāo)簽允許你定義表格列和盡你所需地樣式化它們,對(duì)于你需要把列排成行或不同著色特別有用,如果沒有它們,你需要樣式化每一個(gè)單獨(dú)的單元格。
這是一個(gè)使用這些標(biāo)簽的例子:
alternate類的樣式將被應(yīng)用到第二列,或者說每一行的第二個(gè)單元格。
你當(dāng)然可以在colgroup或者col上使用span屬性,跟rowspan和colspan有相似的用途
colgroup一起使用可以定義屬于列組的行數(shù),比如<colgroup span="2"></colgroup>會(huì)組合頭兩列。當(dāng)在colgroup使用span時(shí),不應(yīng)該再使用col標(biāo)簽。
在col里使用span是更明智的,可以,比如,應(yīng)用在上述例子像這樣:
這將把a(bǔ)lternate類應(yīng)用到最后兩列。
注意
摘要和說明插曲
一個(gè)簡(jiǎn)要和容易的提高易用性的思考是,總是為表格應(yīng)用摘要和說明。
摘要可以在表格起始標(biāo)簽table中用summary屬性應(yīng)用到表格中。這不會(huì)顯示,但可以輔助非可視化的表格表現(xiàn)。
caption標(biāo)簽在起始標(biāo)簽table后直接定義說明。它默認(rèn)直接在表格頂端出現(xiàn),但可以在CSS屬性caption-side中設(shè)置top、right、bottom或者left值,盡管IE不會(huì)在意。
表頭、表注和滾動(dòng)表格的探討
thead、tfoot和tbody允許你把表格分為表頭、表注和表格主體。對(duì)于大表格尤其有用,在打印的時(shí)候,表頭和表注應(yīng)該會(huì)在每一頁都出現(xiàn)。
這些元素必須按thead-tfoot-tbody的順序定義,像這樣:
你可以讓表格主體tbody在基于Gecko的瀏覽器(Mozilla、Firefox和Netscape 6+等)滾動(dòng),通過應(yīng)用overflow: auto; max-height: [whatever] 的樣式。然后你可以看見表頭和表注固定,而表的主體右邊有滾動(dòng)條。你應(yīng)該謹(jǐn)慎使用max-height屬性因?yàn)镮E不認(rèn)識(shí),比較安全的做法是使用height屬性,IE將為它應(yīng)用到每一行。
注意:說回瀏覽器的差異,目前IE遇到表頭和表注時(shí)還是沒有什么線索,盡管還是當(dāng)作表格來處理,但打印的時(shí)候不會(huì)在哦每一頁都出現(xiàn)表頭和表注,只孤零零地傳遞滾動(dòng)的表格。
注意
列反罷工
表格行簡(jiǎn)直使表格列看起來很愚蠢。同樣的工作,表格由行與行構(gòu)建,讓列感到十分沮喪。
但是很幸運(yùn),colgroup和col標(biāo)簽來拯救熱心的列了。
這兩個(gè)標(biāo)簽允許你定義表格列和盡你所需地樣式化它們,對(duì)于你需要把列排成行或不同著色特別有用,如果沒有它們,你需要樣式化每一個(gè)單獨(dú)的單元格。
這是一個(gè)使用這些標(biāo)簽的例子:
示例代碼 [www.hl5o.cn]
<table>
<colgroup> <col /> <col class="alternate" /> <col /> </colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>
<colgroup> <col /> <col class="alternate" /> <col /> </colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>
alternate類的樣式將被應(yīng)用到第二列,或者說每一行的第二個(gè)單元格。
你當(dāng)然可以在colgroup或者col上使用span屬性,跟rowspan和colspan有相似的用途
colgroup一起使用可以定義屬于列組的行數(shù),比如<colgroup span="2"></colgroup>會(huì)組合頭兩列。當(dāng)在colgroup使用span時(shí),不應(yīng)該再使用col標(biāo)簽。
在col里使用span是更明智的,可以,比如,應(yīng)用在上述例子像這樣:
示例代碼 [www.hl5o.cn]
<table>
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
...
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
...
這將把a(bǔ)lternate類應(yīng)用到最后兩列。
注意
示例代碼 [www.hl5o.cn]
哦,但是可能有一個(gè)陷井,不是嗎?那就是:你僅能樣式化列的是邊框、背景、寬度和可見性。
Internet Explorer在這方面看起來比其他瀏覽器表現(xiàn)更好因?yàn)樗b載有漂亮的CSS屬性比如 color,但是,正如結(jié)果一樣,這是因?yàn)樗偪窆殴值男袨槎�。這種奇特的異�?梢宰孖an Hixie來解釋。
Internet Explorer在這方面看起來比其他瀏覽器表現(xiàn)更好因?yàn)樗b載有漂亮的CSS屬性比如 color,但是,正如結(jié)果一樣,這是因?yàn)樗偪窆殴值男袨槎�。這種奇特的異�?梢宰孖an Hixie來解釋。
摘要和說明插曲
一個(gè)簡(jiǎn)要和容易的提高易用性的思考是,總是為表格應(yīng)用摘要和說明。
摘要可以在表格起始標(biāo)簽table中用summary屬性應(yīng)用到表格中。這不會(huì)顯示,但可以輔助非可視化的表格表現(xiàn)。
caption標(biāo)簽在起始標(biāo)簽table后直接定義說明。它默認(rèn)直接在表格頂端出現(xiàn),但可以在CSS屬性caption-side中設(shè)置top、right、bottom或者left值,盡管IE不會(huì)在意。
示例代碼 [www.hl5o.cn]
<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
<caption>Locust mating habits</caption>
...
<caption>Locust mating habits</caption>
...
表頭、表注和滾動(dòng)表格的探討
thead、tfoot和tbody允許你把表格分為表頭、表注和表格主體。對(duì)于大表格尤其有用,在打印的時(shí)候,表頭和表注應(yīng)該會(huì)在每一頁都出現(xiàn)。
這些元素必須按thead-tfoot-tbody的順序定義,像這樣:
示例代碼 [www.hl5o.cn]
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
...
</tbody>
</table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
...
</tbody>
</table>
你可以讓表格主體tbody在基于Gecko的瀏覽器(Mozilla、Firefox和Netscape 6+等)滾動(dòng),通過應(yīng)用overflow: auto; max-height: [whatever] 的樣式。然后你可以看見表頭和表注固定,而表的主體右邊有滾動(dòng)條。你應(yīng)該謹(jǐn)慎使用max-height屬性因?yàn)镮E不認(rèn)識(shí),比較安全的做法是使用height屬性,IE將為它應(yīng)用到每一行。
注意:說回瀏覽器的差異,目前IE遇到表頭和表注時(shí)還是沒有什么線索,盡管還是當(dāng)作表格來處理,但打印的時(shí)候不會(huì)在哦每一頁都出現(xiàn)表頭和表注,只孤零零地傳遞滾動(dòng)的表格。
注意
示例代碼 [www.hl5o.cn]
謹(jǐn)慎對(duì)待滾動(dòng)表格。盡管它們提供十分有用的目的,大部分用戶不習(xí)慣它們并且認(rèn)為線性數(shù)據(jù)是唯一的。
相關(guān)XHTML教程:
- HTML5 INPUT placeholder及兼容性處理
- HTML表單里的Label標(biāo)簽
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- title和alt 標(biāo)簽介紹及其異同
- 淺析HTML標(biāo)簽strong和em的區(qū)別
- 說說XHTML中的alt屬性和title屬性
- Semantics語義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- 九個(gè)W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問題
- 請(qǐng)注意頁面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗(yàn)證HTML代碼穿越多重瀏覽器標(biāo)準(zhǔn)
- XHTML具有語義的標(biāo)簽:有關(guān)H1位置的討論
- 相關(guān)鏈接:
- 教程說明:
XHTML教程-HTML表格高級(jí)教程
。