What is the difference between the <thead> and <th> elements?


#1

I’m having a difficult time understanding the difference between the two. Don’t they mean the same thing?


#2

<thead> is a sectioning element for a <table>. There can only be one, and it is a direct child of <table>. The counterparts of <thead> are, <tbody> and <tfoot>.

<th> refers to either row or column headings (or both) and has a special attribute, scope that describes the domain context of the heading. Their counterpart is <td> and there can be any number in the table. The difference between <th> and <td> is that one contains a heading, the other contains data.


#3

Excellent! Thank you so much!


#4

You’re welcome, @smileypants707. Here is an example of a (slightly more than) basic table…

Table example

The elements of note are,

caption
thead
tfoot
tbody
th

The attributes of note are,

scope
colspan
rowspan

Again, this olden days rule may be flouted today in HTML5, but we used to have to write the TFOOT before the TBODY or the page could break in some browsers. I won’t point any fingers but their initials are IE, in particular IE5 for the MAC. However, this is an old memory and could well be refuted if one looks far enough back in the history of browser wars and cross platform compatibility for which there were countless hacks at our disposal.

Re-ordering those two elements could be seen as a hack. Nonetheless, it still works to this day, and the TFOOT does get drawn where the table footer should be.