Learn HTML – Part 35 – thead, tbody, tfoot – Table Sections

The HTML thead, tbody, and tfoot tags are used to organize different parts of a table.

These elements help structure tables into logical sections such as header, body, and footer.

What are Table Sections?

Large tables can be easier to manage when they are divided into separate sections.

• thead – Defines the table header section
• tbody – Defines the main table body
• tfoot – Defines the table footer section

Basic Syntax

<table>

   <thead>
      <tr>
         <th>Header</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Data</td>
      </tr>
   </tbody>

   <tfoot>
      <tr>
         <td>Footer</td>
      </tr>
   </tfoot>

</table>

Example – Table with Sections

<table border="1">

   <thead>
      <tr>
         <th>Product</th>
         <th>Price</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Laptop</td>
         <td>$900</td>
      </tr>

      <tr>
         <td>Phone</td>
         <td>$500</td>
      </tr>
   </tbody>

   <tfoot>
      <tr>
         <td>Total</td>
         <td>$1400</td>
      </tr>
   </tfoot>

</table>

Output:

Why Use Table Sections?

• Improves table organization
• Makes tables easier to style using CSS
• Helps browsers handle large tables efficiently
• Improves accessibility

Table section tags help separate table headings, data, and summary information.

Table Section Structure

table
 ├── thead
 │     └── tr
 │          └── th
 ├── tbody
 │     └── tr
 │          └── td
 └── tfoot
       └── tr
            └── td

Common Mistakes Beginners Make

• Not grouping table rows properly
• Using header cells inside tbody incorrectly
• Forgetting that thead and tfoot improve accessibility

Conclusion

The HTML thead, tbody, and tfoot tags help organize tables into logical sections.

This structure improves readability, styling, and accessibility of HTML tables.

What’s Next?

Now that you understand how to organize tables using thead, tbody, and tfoot, the next step is learning about the caption tag, which is used to add a title to an HTML table.

Next: Learn HTML – Part 36 – caption Tag – Table Title →

Series: Learn HTML Series