For better organization and accessibility, you can divide your table into three semantic sections using the thead, tbody, and tfoot tags.

The Three Sections

• thead - Contains the header row(s)
• tbody - Contains the main data rows
• tfoot - Contains the footer row(s)

These tags wrap the tr elements to clearly define different sections of the table:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>$2.00</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$3.00</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$19.00</td>
      <td>8</td>
    </tr>
  </tfoot>
</table>

Benefits of Using Table Sections

1. Accessibility: Screen readers can better understand and navigate the table structure.
2. Styling: You can apply different CSS styles to each section.
3. Printing: When printing long tables, browsers can repeat the header and footer on each page.
4. Scrolling: With CSS, you can create scrollable table bodies while keeping headers fixed.

Row Headings

You can also use th elements in the body to create row headings. Just place a th as the first element in a tr:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Morning</th>
      <td>Meeting</td>
      <td>Review</td>
    </tr>
    <tr>
      <th>Afternoon</th>
      <td>Coding</td>
      <td>Testing</td>
    </tr>
  </tbody>
</table>

Table Caption

A table should have a caption tag that describes its content. Place it immediately after the opening table tag:

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

The caption is displayed above the table by default and provides important context for users, especially those using screen readers.

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Tables
2:	How to Span Rows and Columns in HTML Tables
3:	▶︎ Using thead, tbody, and tfoot in HTML Tables