Why don't browsers look for the first "content row" to add "tbody" if you don't use thead and tbody explicitly?

Question

When I look at W3schoool the initial tutorial or examples don't use thead or tbody but I have jQuery code that looks like this:

$("#mytable tbody tr:nth-child(odd)").addClass("oddColor");

or

$("#mytable tr:nth-child(odd)").addClass("oddColor");

and my table looks like this (notice no thead or tbody tags)

<table>
  <tr><th>Col1</th><th>Col2</th></tr>

  <tr><td>Row 1</td><td>Row 1</td></tr>
  <tr><td>Row 2</td><td>Row 2</td></tr>
  <tr><td>Row 3</td><td>Row 3</td></tr>
  <tr><td>Row 4</td><td>Row 4</td></tr>
</table>

does jQuery count the "th" row as tbody? and if the browsers automatically add in the tbody why do they not put it on the "td" row (instead of the "th" row) It looks like it does but i would have thought that it would look for the first "td" row.

Obviously by adding thead and tbody on all tables makes it 100% explicit but I was just confused by what jQuery does when those tags are not there and why it behaves like that.

Maybe a better question is if browsers add in tbody, why would they not add the tbody on the td row instead of the th row?

I added that as part of the question. i was more curious about the browser behavior — leora
What if a row contained some th elements and some td elements. What would the browser do then? — Alohci

Paul Roub Paul Roub · Accepted Answer · 2014-01-04T23:03:49

tbody is created automatically, and will wrap all of the table rows, if no tbody or thead is explicitly used. th is allowed within body rows, there's no "inspection" of the rows' contents to see which rows should be head or body rows.

If you want a thead, with rows excluded from tbody, you must add it explicitly - at which point you'll also need to add tbody, too.

See Why do browsers insert tbody element into table elements?

Why don't browsers look for the first "content row" to add "tbody" if you don't use thead and tbody explicitly?

2 Answers