Is it required to use thead, tbody and tfoot tags?

Question

Should I really use thead, tbody and tfoot tags every time that I use a table tag? Is it required by the standard or not?

Answer 1

Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for. If a table is used for laying out content they are typically omitted.

W3C

Answer 2

The tabular data spec for HTML5 does not require them:

Contexts in which this element (tr) can be used:

• As a child of a thead element.
• As a child of a tbody element.
• As a child of a tfoot element.
• As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.

Even though I believe it is a good practice to section your rows within thead, tbody and tfoot tags as it makes the table's rows easier to identify.

In the end, the browser will always add at least the tbody for you.

Answer 3

No. Modern browsers will add these by default.

Answer 4

There are differences between HTML and XHTML here.

In HTML, the tbody element is required. However, its start and end tags are optional. That means if you write

<table>
    <tr><td>data</td></tr>
</table>

the tr will always be inside a tbody, no matter if you write the tags explicitly or not. Same story for this table:

<table>
    <thead>
    <tr><th>header</th></tr>
    </thead>
    <tr><td>data</td></tr>
</table>

Here, the second tr will be wrapped in a tbody.

---

In XHTML, the tbody element is only required if you have a thead and/or a tfoot.

So the first example above is valid XHTML. There is a difference with HTML though: the tr will be directly inside the table in the DOM tree. (You won't be able to see the difference, but it's something to keep in mind if you need to manipulate the table in JavaScript.)

The second example is invalid XHTML, and you shouldn't be surprised if it has different results in different browsers.

Answer 5

It's not required, but you can run into problems if you don't add them, and you use JavaScript to reference or manipulate the DOM. As iamwhitebox points out, most modern browsers will add these elements.

So for example, if you write:

<table>
<tr id="row"><td>Col 1</td><td>Col 2</td></tr>
</table>

Chrome will turn this into

<table>
<tbody>
<tr id="row"><td>Col 1</td><td>Col 2</td></tr>
</tbody>
</table>

If you now reference

document.getElementById('row').parentElement

This will return the <thead> element, not the <table> one as your code suggests. Depending on what you're trying to do, this can cause problems. As a very best-case scenario you will have a DOM that is out of sync with your code, making it potentially confusing and harder to debug. As a worst-case scenario you get broken javascript and/or inconsistent behavior across different browsers, although nowadays with contemporary browsers this is mostly a non-issue.

It's less common, but you can also run into CSS problems too, such as if you have styled a <tbody> element and you aren't expecting it to appear but it does.

It's fine to omit tbody and thead when you aren't planning on manipulating the DOM with javascript, and if your CSS is designed to take this into account (in an overwhelming majority of cases the presence of that extra element in there doesn't change anything).

Answer 6

https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions

According to this page, as of posting this, using tbody is suggested by the HTML standard, "even though these [tr] elements are technically allowed inside table elements according to the content models described in this specification" :D

From an accessibility point of view, tbody, tfoot and thead provide no accessibility functionality.

Answer 7

In short, if I remember the article I read correctly, the answer is "No". They are not required by the standard.

Answer 8

To your question, the answer is "no, they are not necessary".

By label a table row with <thead>, <tfoot>, <tbody>, you are grouping them without using ID or class. Allowing more style adjustments, such as fixed header and scroll-able body.

Simple table

<table>
  <tr>
    <td></td>
  </tr>
</table>

with thead, tbody

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 9

Two porpuses of HTML5 was the good implementation and proper use of markup ( to make a programmatic association between elements ), and the second was the making of more accessible web pages.

As the website https://webaim.org says:

Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

That's why <thead> and <tbody> were also created. A screen reader software will work with this two tags.

Hope this helps! If you want to learn more, you can read the article I used as a reference.

Creating Accessible Tables