Is it necessary to have <tbody> in every table? According to Standards.
Is it necessary to have in every table?
Asked
Active
Viewed 2.4k times
49
Jitendra Vyas
- 148,487
- 229
- 573
- 852
-
Does this answer your question? [Is it required to use thead, tbody and tfoot tags?](https://stackoverflow.com/questions/29111522/is-it-required-to-use-thead-tbody-and-tfoot-tags)
– August Janse
Nov 15 '20 at 10:16
6 Answers
60
Only if you define thead and tfoot. It is mostly used when the table has multiple bodies of content. If the data in the table is easily understood to be the tbody then you can safely omit it.
Aaron Butacov
- 32,415
- 8
- 47
- 61
-
1
-
2
Semantically, if you have a header to your table with `
`, then you should use `` though it is not *required* that you do so. If you are using them as the header for a column, then you should not put them in the `tbody`, but if they are headers for a row, they can be.
– Aaron Butacov
Jun 20 '10 at 03:24
-
2
@Aaron Harun - I just noticed firefox always add `tbody` to table even if we are not using ``, ``, and multiple `
`
– Jitendra Vyas
Jun 20 '10 at 05:03
-
3
@metal-gear-solid - Not just Firefox, in the text/html serialization all browsers will infer the missing tbody tags. Not in the application/xhtml+xml serialization though, of course.
– Alohci
Jun 20 '10 at 10:48
-
@metal-gear-solid - Whether it's good or not is a matter of opinion and depends on your personal development philosophy. All I can provide are facts. It's unnecessary, but if you want to serve your web page with both mime types, then explicitly using tbody means that your DOM can have the same structure regardless of the serialization. This can make your scripting simpler.
– Alohci
Jun 20 '10 at 16:41
-
Don't really know since when, but most browsers add `tbody` automatically. https://stackoverflow.com/questions/67335357/css-properties-padding-via-a-rule-doesnt-work-whereas-same-css-inline-applie led me here by the way (I asked ask it first)... With child selector I can have side-effects not to put it then : e.g. `table > tr` would not match. This is also mentioned here : https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements.
– St3an
Apr 30 '21 at 14:37
22
Quoting the HTML 4 spec: "The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted."
So, you must have a <tbody> tag if you have a <thead> or <tfoot>
See also: MDN
Lea Rosema
- 1,100
- 16
- 31
Dumb Guy
- 3,336
- 21
- 23
19
For the small fraction of your users still using IE7, you MUST add encapsulate your tr's in a tbody tag if you're building a table with the DOM methods!
This will work in all major browsers:
var table = document.createElement('table');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tbody.appendChild(tr);
table.appendChild(tbody);
This will NOT work in IE7:
var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
A quick blog post of mine on building tables:
http://blog.svidgen.com/2012/05/building-tables-in-ie7-with-javascript.html
It may be notable that I no longer make the effort to support IE7 on my own projects. The IE<=7 share is likely negligible for most sites at this point.
svidgen
- 13,744
- 4
- 33
- 58
1
Dumb Guy gave an answer for HTML4 (yes). Arwym gives an answer for HTML5 to a related question (no):
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.
August Janse
- 290
- 1
- 6
- 18
0
According to HTML 3.2 spec (table wasn't in HTML 2 spec) table element doesn't have tbody, thead, tfoot (they are HTML 4 things), only optional caption and list of tr / th.
While you might think what's the hell you are talking about HTML 3.2 dated 1997 in 2021 consider email clients with primitive or outdated HTML engines, tbody makes no sense in here.
gavenkoa
- 45,285
- 19
- 251
- 303
-5
Most browsers are forgiving but even so I add the pair in all tables that I use now. Even trivial tables. Especially now that I'm using CSS more and more to decorate those tables.
All that being said I have old tables that still work fine on the newest browsers. I'm learning the hard way but taking the few extra Micro seconds to add the optional tags here and there ends up saving you money/time in the long run.
Dave
David Frantz
- 51
- 1
Asked
Active
Viewed 2.4k times
49
Jitendra Vyas
- 148,487
- 229
- 573
- 852
-
Does this answer your question? [Is it required to use thead, tbody and tfoot tags?](https://stackoverflow.com/questions/29111522/is-it-required-to-use-thead-tbody-and-tfoot-tags) – August Janse Nov 15 '20 at 10:16
6 Answers
60
Only if you define thead and tfoot. It is mostly used when the table has multiple bodies of content. If the data in the table is easily understood to be the tbody then you can safely omit it.
Aaron Butacov
- 32,415
- 8
- 47
- 61
-
1
-
2Semantically, if you have a header to your table with `
`, then you should use `` though it is not *required* that you do so. If you are using them as the header for a column, then you should not put them in the `tbody`, but if they are headers for a row, they can be. – Aaron Butacov Jun 20 '10 at 03:24 -
2@Aaron Harun - I just noticed firefox always add `tbody` to table even if we are not using ``, ``, and multiple `
` – Jitendra Vyas Jun 20 '10 at 05:03 -
3@metal-gear-solid - Not just Firefox, in the text/html serialization all browsers will infer the missing tbody tags. Not in the application/xhtml+xml serialization though, of course. – Alohci Jun 20 '10 at 10:48
-
@metal-gear-solid - Whether it's good or not is a matter of opinion and depends on your personal development philosophy. All I can provide are facts. It's unnecessary, but if you want to serve your web page with both mime types, then explicitly using tbody means that your DOM can have the same structure regardless of the serialization. This can make your scripting simpler. – Alohci Jun 20 '10 at 16:41
-
Don't really know since when, but most browsers add `tbody` automatically. https://stackoverflow.com/questions/67335357/css-properties-padding-via-a-rule-doesnt-work-whereas-same-css-inline-applie led me here by the way (I asked ask it first)... With child selector I can have side-effects not to put it then : e.g. `table > tr` would not match. This is also mentioned here : https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements. – St3an Apr 30 '21 at 14:37
22
Quoting the HTML 4 spec: "The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted."
So, you must have a <tbody> tag if you have a <thead> or <tfoot>
See also: MDN
Lea Rosema
- 1,100
- 16
- 31
Dumb Guy
- 3,336
- 21
- 23
19
For the small fraction of your users still using IE7, you MUST add encapsulate your tr's in a tbody tag if you're building a table with the DOM methods!
This will work in all major browsers:
var table = document.createElement('table');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tbody.appendChild(tr);
table.appendChild(tbody);
This will NOT work in IE7:
var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
A quick blog post of mine on building tables:
http://blog.svidgen.com/2012/05/building-tables-in-ie7-with-javascript.html
It may be notable that I no longer make the effort to support IE7 on my own projects. The IE<=7 share is likely negligible for most sites at this point.
svidgen
- 13,744
- 4
- 33
- 58
1
Dumb Guy gave an answer for HTML4 (yes). Arwym gives an answer for HTML5 to a related question (no):
The tabular data spec for HTML5 does not require them:
Contexts in which this element (
tr) can be used:
- As a child of a
theadelement.- As a child of a
tbodyelement.- As a child of a
tfootelement.- As a child of a
tableelement, after anycaption,colgroup, andtheadelements, but only if there are notbodyelements that are children of the table element.Even though I believe it is a good practice to section your rows within
thead,tbodyandtfoottags as it makes the table's rows easier to identify.In the end, the browser will always add at least the
tbodyfor you.
August Janse
- 290
- 1
- 6
- 18
0
According to HTML 3.2 spec (table wasn't in HTML 2 spec) table element doesn't have tbody, thead, tfoot (they are HTML 4 things), only optional caption and list of tr / th.
While you might think what's the hell you are talking about HTML 3.2 dated 1997 in 2021 consider email clients with primitive or outdated HTML engines, tbody makes no sense in here.
gavenkoa
- 45,285
- 19
- 251
- 303
-5
Most browsers are forgiving but even so I add the pair in all tables that I use now. Even trivial tables. Especially now that I'm using CSS more and more to decorate those tables.
All that being said I have old tables that still work fine on the newest browsers. I'm learning the hard way but taking the few extra Micro seconds to add the optional tags here and there ends up saving you money/time in the long run.
Dave
David Frantz
- 51
- 1