html工作中表格&lt;tbody&gt;標簽的使用技巧

2020-10-23 18:31:27

字體：大中小

來源：轉載

供稿：網友

在做頁面的時候，經常要根據不同的操作來顯示或隱藏一個表格中的部分內容，隱藏一行直接用<tr>標簽，隱藏多行時用<tbody>就很方便。
<table>
<tbody id="content1">
<tr><td>表單內容</td></tr>
</tbody>
<tbody id="content2" style="display:none">
<tr><td>多行內容</td></tr>
<tr><td>多行內容</td></tr>
</tbody>
</table>
用js來控制樣式display來顯示和隱藏，很方便。聽說這樣還可以控制網頁加載時顯示的順序，content1會比content2先顯示，而不是等表格加載完后一起顯示，沒有實驗過，在表格數據很多時會有作用。

使用過程中發現<tbody>不能嵌套使用，會出現莫名的問題,<tbody>是用來定義表格主體的，定義多個主體不說，主體里再來個主體確實不符合W3C對其的定義，像下面這樣使用看起來好像沒錯，但實際上是有錯誤的。
<table>
<tbody id="all">
<tbody id="content1">
<tr><td>表單內容</td></tr>
</tbody>
<tbody id="content2">
<tr><td>多行內容</td></tr>
<tr><td>多行內容</td></tr>
</tbody>
</tobdy>
</tbale>

做原型頁面時會為了實現交互效果才這樣用<tbody>，實際的后臺編程中用不著，只要根據判斷輸出相應的表體就行了。
頁面制作時表格的設計用<thead><tbody><tfoot><th><caption>等以前不常用的標簽加上CSS的定義可以實現很多不錯的效果，標準又語義，很強大，看過相關的一篇文章，找到收藏起來。

上一篇：input為disabled提交后得不到該值的解決方法

下一篇：Firefox下樣式設置寬度奇怪現象