Does a <tr> have to be inside a <tbody>

StackOverflow https://stackoverflow.com/questions/5872924

Question

Does a table row (<tr>) have to be in a table body (<tbody>), if the table has a table body, or can it exist outside of the table body?

<table>
    <tr>
      <td colspan='2'>...</td>
    </tr>

    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>

    <tr>
      <td colspan='2'>...</td>
    </tr>

    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>

</table>
Was it helpful?

Solution

No, the <tr> can be in the <thead>, <tbody>, <tfoot> or it doesn't have to be in any of them.

OTHER TIPS

Contrary to what Terrill Thomson said, a table with <tr> tags outside of the <thead>, <tfoot> and <tbody> tags but inside the <table> tags will validated against the W3C Markup Validation Service.

This document was successfully checked as HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
  <head>
  </head>
  <body>
    <table>
      <thead>
        <th colspan="2">head1</th>
        <th>head2</th>
      </thead>
      <tfoot>
        <th colspan="2">foot1</th>
        <th>foot2</th>
      </tfoot>

      <tr><td colspan="3">this row is outside of thead and tfoot</td></tr>

      <tbody>
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>3-3</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
        </tr>
      </tbody>
  </body>
</html>

<tbody> is used to mark body of your <table>, if your table contains <thead> (table header) or <tfoot> (table footer) elements. If your table doesn't contain those elements, you're free to not use <tbody>.

Correct usage would be:

<table>
<thead><tr><th>Item          </th><th>Cost </th></tr></thead>
<tbody><tr><td>Stack Overflow</td><td>Free </td></tr>
       <tr><td>Something cool</td><td>$1.00</td></tr></tbody>
</table>

HTML4 specification to tables

If you have a <tr> outside of a <tbody>, the page will not validate: http://validator.w3.org

As others have noted, <tbody> is optional unless you're using <thead> or <tfoot>. The main reason to use the latter two elements is so the header and footer are repeated on each page if a long table is printed.

It sounds like you might be creating something like a calendar, where you're wanting to have alternating rows of <th> (e.g., for dates) and <td> (e.g., for events on that date). If that's the case, you shouldn't wrap the alternating rows in <thead> and <tbody> - doing so would confuse the heck out of browsers when it came to printing the page. If you just leave the grouping elements out, your table will validate. However, some screen readers might be confused by that markup and apply the top-most row of headers to all cells beneath them. For a complex table such as this, you'll need to add additional markup to assure that screen readers understand how the table is organized. Here's your table with accessible markup:

<table summary="A brief description of how the table is organized, for screen reader users">
  <tr>
    <th colspan='2' id="header1">...</th>
  </tr>
  <tr>
    <td headers="header1">...</td>
    <td headers="header1">...</td>
  </tr>
  <tr>
    <th colspan='2' id="header2">...</th>
  </tr>
  <tr>
    <td headers="header2">...</td>
    <td headers="header2">...</td>
  </tr>
</table>

Alternatively, you might want to consider whether the data can be organized in multiple tables, or if an alternative version can be provided that would be easier to use for screen reader users. For example, an events calendar could additionally be presented as a list of events.

<tbody> is optional, so the answer is 'yes <tr> can be outside " - see http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 .

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top