使用thead、tbody 和tfoot 可提升HTML 表格的語義性、可訪問性和樣式控制；1. 結(jié)構(gòu)上應(yīng)按thead、tfoot、tbody 的順序編寫，儘管tfoot 顯示在底部；2. 優(yōu)勢包括增強語義、輔助技術(shù)識別、獨立樣式設(shè)置、打印分頁支持和JavaScript 操作便利；3. 可通過CSS 單獨設(shè)置各部分樣式，並結(jié)合display: table 和overflow 實現(xiàn)表頭表尾固定滾動；4. 注意每表僅一個thead 和tfoot，可多個tbody 用於數(shù)據(jù)分組，th 用於thead，所有tr 必須位於這些容器內(nèi)，不可直接放在table 中。

When building tables in HTML, using thead , tbody , and tfoot helps organize your content semantically and improves accessibility and styling control. These elements divide a table into logical sections: the header, body, and footer. Here's how to structure them properly.

1. Basic Table Structure with thead, tbody, and tfoot

Always start with a <table> element, then define the sections in this order:<br> <code><thead> , <code><tfoot> , <code><tbody> — yes, <code><tfoot> comes <em>before</em> <code><tbody> in the source, even though it displays at the bottom. This allows the browser to render the footer before the full table body loads, which is helpful for long tables.<pre class='brush:php;toolbar:false;'> &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Product&lt;/th&gt; &lt;th&gt;Price&lt;/th&gt; &lt;th&gt;Quantity&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td&gt;Total&lt;/td&gt; &lt;td&gt;$120.00&lt;/td&gt; &lt;td&gt;10&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Laptop&lt;/td&gt; &lt;td&gt;$100.00&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Mouse&lt;/td&gt; &lt;td&gt;$20.00&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><h3 id="Why-Use-thead-tbody-and-tfoot"> 2. Why Use thead, tbody, and tfoot?</h3><ul><li> <strong>Semantic clarity</strong> : Clearly separates header, data, and summary rows.</li><li> <strong>Accessibility</strong> : Screen readers can better interpret table structure.</li><li> <strong>Styling with CSS</strong> : You can target each section individually (eg, <code>thead th { background: #eee; } ).

3. Styling Tips

You can style each section differently:

 thead {
  background-color: #003366;
  color: white;
}

tbody {
  background-color: #f9f9f9;
}

tfoot {
  font-weight: bold;
  background-color: #ddd;
}

Also, if you want the header and footer to stay visible while scrolling a long table body, combine it with CSS:

 table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  height: 300px;
  overflow: auto;
}

thead, tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

tbody {
  display: block;
  height: 200px;
  overflow-y: auto;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

4. Important Notes

• Only one <thead> and one <tfoot> per table, but you can have multiple <tbody> elements if your data has natural groupings (eg, different categories).
• <th> elements should be used in <thead> for column headers.
• <tfoot> must come after <thead> but before <tbody> in the HTML source.
• All row elements ( <tr> ) must be inside one of these section elements — never directly in <table> .

Example with multiple <tbody> sections:

 <table>
  <thead>
    <tr><th>Department</th><th>Employees</th></tr>
  </thead>
  <tbody>
    <tr><td>Sales</td><td>12</td></tr>
  </tbody>
  <tbody>
    <tr><td>Engineering</td><td>20</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>32</td></tr>
  </tfoot>
</table>

Basically, use thead , tbody , and tfoot to make your tables cleaner, more maintainable, and more accessible. It's a small change with real benefits.

以上是如何在HTML中用斜面，tbody和tfoot構(gòu)造桌子的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！