如何使用thead，tbody和tfoot构建HTML表

使用<thead>、

<tbody>和 <tfoot>能提升表格的可读性、可访问性和可维护性；1. 表格应包含<thead>用于表头、 <tbody>用于主体数据、 <tfoot>用于汇总信息，且<tfoot>在代码中应位于 <tbody>之前以确保正确渲染；2. 这些元素有助于屏幕阅读器解析、支持CSS样式控制、实现打印时表头重复以及简化JavaScript操作；3. 每个表格只能有一个<thead>和一个 <tfoot>，但可包含多个 <tbody>以分组数据，应始终显式使用<th>定义表头并避免省略 <tbody>，从而增强语义化和专业性。

Using <thead>, <code><tbody>, and <code><tfoot> properly helps structure an HTML table for better readability, accessibility, and styling. These elements divide a table into logical sections: the header, body, and footer. Here's how to use them effectively.<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175439496521131.jpeg" class="lazy" alt="How to use thead, tbody, and tfoot to structure an HTML table"><hr> <h3 id="strong-Basic-Structure-of-a-Table-with-thead-tbody-and-tfoot-strong"><strong>1. Basic Structure of a Table with thead, tbody, and tfoot</strong></h3> <p>Always wrap your table content in <code><table>, and use the following elements to define its sections:<ul><li><code><thead>: Contains the header row(s), typically with column labels.<li><code><tbody>: Contains the main data rows.<li><code><tfoot>: Contains summary or totals row(s), usually at the bottom.<pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;Salary&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;&lt;/td&gt; &lt;td&gt;$120,000&lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;John Doe&lt;/td&gt; &lt;td&gt;30&lt;/td&gt; &lt;td&gt;$70,000&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Jane Smith&lt;/td&gt; &lt;td&gt;28&lt;/td&gt; &lt;td&gt;$50,000&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><blockquote><p>? <strong>Note:</strong> Even though <code><tfoot> appears before <tbody> in the code, browsers will render it at the bottom of the table automatically.

---

2. Why Use thead, tbody, and tfoot?

✅ Improved Accessibility

Screen readers can better interpret table structure when these elements are used. Users can navigate headers and footers separately from data.

✅ Better Styling with CSS

You can target specific sections easily:

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

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

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

✅ Print-Friendly Tables

When a table spans multiple printed pages, browsers can repeat the <thead> on each page automatically.

✅ JavaScript & DOM Manipulation

Easier to select and manipulate data:

// Example: Add a new row to the table body
const tableBody = document.querySelector('tbody');
const newRow = `<tr><td>New Person</td><td>35</td><td>$60,000</td></tr>`;
tableBody.insertAdjacentHTML('beforeend', newRow);

---

3. Rules and Best Practices

• Only one <thead> and one <tfoot> per table, but multiple <tbody> sections if needed (e.g., for grouping data).
• Place <tfoot> before <tbody> in the HTML to ensure proper rendering.
• Use <th> in <thead> for column headers (not just <td>).
• Don’t skip <tbody>—browsers often add it automatically, but it’s better to include it explicitly for clarity.

Example with multiple <tbody> sections:

<table>
  <thead>
    <tr><th>Department</th><th>Employee</th><th>Salary</th></tr>
  </thead>
  <tbody>
    <tr><td>Engineering</td><td>Alice</td><td>$90,000</td></tr>
    <tr><td>Engineering</td><td>Bob</td><td>$85,000</td></tr>
  </tbody>
  <tbody>
    <tr><td>Marketing</td><td>Carol</td><td>$60,000</td></tr>
    <tr><td>Marketing</td><td>Dave</td><td>$55,000</td></tr>
  </tbody>
</table>

This allows styling or scripting each department group separately.

---

Basically, using <thead>, <tbody>, and <tfoot> isn’t required for a table to work—but it makes your tables more semantic, maintainable, and professional. Don’t skip them in real projects.

以上是如何使用thead，tbody和tfoot构建HTML表的详细内容。更多信息请关注PHP中文网其他相关文章！