快捷導(dǎo)航

html工作中表格<tbody>標(biāo)簽的使用技巧

更新時(shí)間：2008年09月10日 23:48:31 作者：

公司大部分的項(xiàng)目都是基于BS結(jié)構(gòu)，UI設(shè)計(jì)階段做WEB原型頁(yè)面時(shí)要把各種交互效果實(shí)現(xiàn)出來(lái)，與真正的后臺(tái)編程不同，就用JS前臺(tái)編程來(lái)實(shí)現(xiàn)，讓程序員編程前知道要做成什么樣的效果就行了。

在做頁(yè)面的時(shí)候，經(jīng)常要根據(jù)不同的操作來(lái)顯示或隱藏一個(gè)表格中的部分內(nèi)容，隱藏一行直接用<tr>標(biāo)簽，隱藏多行時(shí)用<tbody>就很方便。
<table>
<tbody id="content1">
<tr><td>表單內(nèi)容</td></tr>
</tbody>
<tbody id="content2" style="display:none">
<tr><td>多行內(nèi)容</td></tr>
<tr><td>多行內(nèi)容</td></tr>
</tbody>
</table>
用js來(lái)控制樣式display來(lái)顯示和隱藏，很方便。聽(tīng)說(shuō)這樣還可以控制網(wǎng)頁(yè)加載時(shí)顯示的順序，content1會(huì)比content2先顯示，而不是等表格加載完后一起顯示，沒(méi)有實(shí)驗(yàn)過(guò)，在表格數(shù)據(jù)很多時(shí)會(huì)有作用。

使用過(guò)程中發(fā)現(xiàn)<tbody>不能嵌套使用，會(huì)出現(xiàn)莫名的問(wèn)題,<tbody>是用來(lái)定義表格主體的，定義多個(gè)主體不說(shuō)，主體里再來(lái)個(gè)主體確實(shí)不符合W3C對(duì)其的定義，像下面這樣使用看起來(lái)好像沒(méi)錯(cuò)，但實(shí)際上是有錯(cuò)誤的。
<table>
<tbody id="all">
<tbody id="content1">
<tr><td>表單內(nèi)容</td></tr>
</tbody>
<tbody id="content2">
<tr><td>多行內(nèi)容</td></tr>
<tr><td>多行內(nèi)容</td></tr>
</tbody>
</tobdy>
</tbale>

做原型頁(yè)面時(shí)會(huì)為了實(shí)現(xiàn)交互效果才這樣用<tbody>，實(shí)際的后臺(tái)編程中用不著，只要根據(jù)判斷輸出相應(yīng)的表體就行了。
頁(yè)面制作時(shí)表格的設(shè)計(jì)用<thead><tbody><tfoot><th><caption>等以前不常用的標(biāo)簽加上CSS的定義可以實(shí)現(xiàn)很多不錯(cuò)的效果，標(biāo)準(zhǔn)又語(yǔ)義，很強(qiáng)大，看過(guò)相關(guān)的一篇文章，找到收藏起來(lái)。