HTML的tbody的目的是什麼？

Question

有人在表中使用HTML的tbody的主要原因是什麼？僅用於格式化目的嗎？一般使用head和body;我沒有使用thead和tbody。

Answer 1

爲了使語意到表：

<table> 
    <thead> 
    <tr> 
     <th>Person</th> 
     <th>Amount</th> 
     <th>Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Person1</td> 
     <td>$5.99</td> 
     <td>02/03/09</td> 
    </tr> 
    <tr> 
     <td>Person2</td> 
     <td>$12.99</td> 
     <td>08/15/09</td> 
    </tr> 
    </tbody> 
</table> 

According to the specification：

錶行可分爲表頭，表腳，以及一個或多個表身部分，採用THEAD，TFOOT和TBODY元素。這種劃分使用戶代理可以獨立於桌面和桌面支持滾動桌面主體。打印長表時，表格頭部和腳部信息可能會在包含表格數據的每個頁面上重複。

表頭和表腳應包含有關表格列的信息。表格主體應該包含多行表格數據。

當存在時，每個THEAD，TFOOT和TBODY都包含一個行組。每個行組必須至少包含一行，由TR元素定義。

除了這個重要的語義重要性（思考屏幕閱讀器）之外，您可以輕鬆地設置您的標題與數據行不同。另一個相關的例子是jQuery插件，如Tablesorter插件可以很容易地找出你的數據結構是什麼樣的。

Answer 2

要分離HTML表格的標題（thead），body（tbody）和footer（tfoot）部分。這是令人難以置信的有用。一個典型的用法是將你的列標題放入你的thead元素和tbody中的數據。 tfoot元素不太常見，但有時很有用。

順便說一句，即使你沒有指定tbody，它也是爲你隱式創建的。

您可以用這個造型太用途如：

table thead tr { background-color: yellow; } 
table tbody tr { background-color: #C9C9C9; } 

它也是有用的Javascript和jQuery的具有可選擇行的表（就像一個例子）。您通常只對tbody中的行選擇或高亮顯示感興趣，而不是頂部的標題行。

Answer 3

它可以用於樣式，是的，它也有用的jQuery選擇器，以幫助區分你想選擇的元素。畢竟，你可以有tr標籤thead或tbody。

Answer 4

我發現tbody的一個好處是允許行可以滾動，同時保持列標題和頁腳可見。這隻適用於實際上支持css的瀏覽器。對不起沒有Internet Explorer！

<tbody style="height: 150px; overflow-y: scroll"> 

Answer 5

如果表格的標題是每行的第一列，該怎麼辦？在這種情況下，無法指定表格的標題。它實際上會破壞HTML，因爲解析器會假定所有內容都是表格主體的一部分。

爲什麼這個標籤是必需的，因爲th指定了標題字段 - 瀏覽器可以通過這些字段找出表的哪一部分是標題。

thead和tbody有什麼意義？ 它們適用於某些情況並在其他情況下破壞HTML。 他們複製th的功能。 他們使代碼複雜化，並可能導致問題 - 在我知道tbody之前，我認爲tr-s是桌子的孩子。

Answer 6

的THEAD，TBODY，和TFOOT在HTML元件用於組表中的行成基於其內容的邏輯部分。有你想這樣做主要有兩個原因：

1. 讓身體獨立頁眉和/或頁腳
2. 的滾動爲了方便不同風格的規則適用於不同的部分的表格。

<table> 
 
    <thead> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>Sum</td> 
 
     <td>$180</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>