HTML高級教程表格_XHTML教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

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

列反罷工

表格行簡直使表格列看起來很愚蠢。同樣的工作，表格由行與行構(gòu)建，讓列感到十分沮喪。
但是很幸運，colgroup和col標(biāo)簽來拯救熱心的列了。
這兩個標(biāo)簽答應(yīng)你定義表格列和盡你所需地樣式化它們，對于你需要把列排成行或不同著色非凡有用，假如沒有它們，你需要樣式化每一個單獨的單元格。
這是一個使用這些標(biāo)簽的例子：

示例代碼 [m.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>

alternate類的樣式將被應(yīng)用到第二列，或者說每一行的第二個單元格。
你當(dāng)然可以在colgroup或者col上使用span屬性，跟rowspan和colspan有相似的用途
colgroup一起使用可以定義屬于列組的行數(shù)，比如<colgroup span="2"></colgroup>會組合頭兩列。當(dāng)在colgroup使用span時，不應(yīng)該再使用col標(biāo)簽。

在col里使用span是更明智的，可以，比如，應(yīng)用在上述例子像這樣：

示例代碼 [m.hl5o.cn]

<table>
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
...

這將把alternate類應(yīng)用到最后兩列。

注重

示例代碼 [m.hl5o.cn]

哦，但是可能有一個陷井，不是嗎？那就是：你僅能樣式化列的是邊框、背景、寬度和可見性。
Internet Explorer在這方面看起來比其他瀏覽器表現(xiàn)更好因為它裝載有漂亮的CSS屬性比如 color，但是，正如結(jié)果一樣，這是因為它瘋狂古怪的行為而已。這種奇異的異�？梢宰孖an Hixie來解釋。

摘要和說明插曲

一個簡要和輕易的提高易用性的思考是，總是為表格應(yīng)用摘要和說明。
摘要可以在表格起始標(biāo)簽table中用summary屬性應(yīng)用到表格中。這不會顯示，但可以輔助非可視化的表格表現(xiàn)。
caption標(biāo)簽在起始標(biāo)簽table后直接定義說明。它默認直接在表格頂端出現(xiàn)，但可以在CSS屬性caption-side中設(shè)置top、right、bottom或者left值，盡管IE不會在意。

示例代碼 [m.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>
...

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

thead、tfoot和tbody答應(yīng)你把表格分為表頭、表注和表格主體。對于大表格尤其有用，在打印的時候，表頭和表注應(yīng)該會在每一頁都出現(xiàn)。

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

示例代碼 [m.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>

你可以讓表格主體tbody在基于Gecko的瀏覽器（Mozilla、Firefox和Netscape 6 等）滾動，通過應(yīng)用overflow: auto; max-height: [whatever] 的樣式。然后你可以看見表頭和表注固定，而表的主體右邊有滾動條。你應(yīng)該謹慎使用max-height屬性因為IE不熟悉，比較安全的做法是使用height屬性，IE將為它應(yīng)用到每一行。
注重：說回瀏覽器的差異，目前IE碰到表頭和表注時還是沒有什么線索，盡管還是當(dāng)作表格來處理，但打印的時候不會在哦每一頁都出現(xiàn)表頭和表注，只孤零零地傳遞滾動的表格。

注重

示例代碼 [m.hl5o.cn]

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