html tables: thead vs th

Question

It looks like (according to the examples on this page, anyways) that if you're using THEAD, you don't need to use TH.

Is that true? If so, what are the advantages/disadvantages of THEAD vs TH?

I don't see any examples on that page that suggest using `thead` without `th`. There are some examples that only show the `tr` element within the `thead`, but it's to be understood (from the rest of the spec) that a row (`tr`) doesn't exist by itself—it contains a bunch of cells (`th` or `td`). The `...` is there to show you that some code is missing! Still, it's a fair question: is `thead > tr > td` valid? I'd argue that it's just as semantic to give `td` header status when it's a descendant of `thead`, but then I didn't write the spec. — Kal, Jul 13 '21 at 02:39

score 143 · Accepted Answer · answered Mar 22 '11 at 17:22

143

The <thead> tag is used to group the header content in an HTML table. The thead element should be used in conjunction with the tbody and tfoot elements.

More : thead

You use <thead> to encapsulate an entire row (or rows) to designate them as the Table Header. According to the spec,

"This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data."

<th>, on the other hand, is used to style a specific cell as a header cell rather than an ordinary data cell.

answered Mar 22 '11 at 17:22

Saurabh Gokhale

53,625
36
139
164

14

That's one ancient website you linked to in the "More : thead". – masterxilo May 28 '14 at 11:48
see also: Mozilla's doc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead – Adriano Nov 17 '14 at 14:12
4

@masterxilo What did you expect? HTML itself is pretty darn ancient. – Dan Bechard Dec 31 '15 at 14:33
2

@Kano Would you object to someone linking to a 30 year old RFC that's still in use? What does it matter how old the page is so long as the information is still relevant? – jmbpiano Oct 16 '17 at 15:08
@jmbpiano How would you know the information is still relevant based on that page alone? MDN's documentation page on `thead` was last updated but a month ago, making it (at the very least) a more trustworthy resource. – kano Oct 17 '17 at 09:25
It's not still relevant. To give just one example, it recommends using the `align` attribute. – Jul 24 '20 at 21:27

score 86 · Answer 2 · edited Sep 24 '21 at 09:36

86

<th> actually is a replacement for <td> when you want to mark a cell as a header cell.

If you want to use <thead> and <th> don't forget to nest <th> inside <tr>. Otherwise the code may not be valid.
Example:

<table>
  <thead>
    <tr>
      <!-- scope="col" is optional if the th is inside a thead -->
      <th scope="col">Season</th>
      <th scope="col">Goals</th>
      <th scope="col">Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- scope="row" indicates that the th is a header for that row -->
      <th scope="row">2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th scope="row">2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

edited Sep 24 '21 at 09:36

tinkerr

975
2
14
32

answered Jan 04 '16 at 11:03

rflw

1,747
17
26

3

This doesn't answer the original question, it's more an addendum and should be a comment instead of an answer. – Gerald Schneider Jan 04 '16 at 11:07
30

Actually, this answer is the only one showing a use of TH and THEAD. +1 for that! – barrypicker Mar 17 '16 at 21:35
5

If you write "The advantage is `th` can be used inside a `thead` and also inside a `tbody`, both elements are useful in their own context." that answers the question... Gerald is just being picky about the way you wrote the answer, but it is in fact the only answer here that provided a meaningful example. – CPHPython Aug 10 '16 at 16:32
1

I didn't even know that `th` gets **bold**ed by default, without extra CSS, thanks for that! – CPHPython Aug 10 '16 at 16:39
1

@CPHPython Only on some browsers – Ben Taliadoros Oct 04 '16 at 14:40

Nick Manning · Answer 3 · 2015-05-14T21:51:17.427

th is more specific than what may reside inside of thead. A th cell is to specify the header of the corresponding td cells. In fact you can add a headers attribute to a td cell which points to the id of a th cell (for screen readers). So th is directly related to the tds of that column.

However, thead can include any information...commonly yes it does include the th cells but it can also include anything that you might deem to be appropriate as information at the top of the table (other than a caption, because this has its own tag as well).

score 7 · Answer 4 · answered Jan 04 '16 at 12:42

<thead>

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.

<th>

Table cells may contain two types of information: header information and data. This distinction enables user agents to render header and data cells distinctly, even in the absence of style sheets. For example, visual user agents may present header cell text with a bold font. Speech synthesizers may render header information with a distinct voice inflection.

The TH element defines a cell that contains header information. User agents have two pieces of header information available: the contents of the TH element and the value of the abbr attribute. User agents must render either the contents of the cell or the value of the abbr attribute. For visual media, the latter may be appropriate when there is insufficient space to render the full contents of the cell. For non-visual media abbr may be used as an abbreviation for table headers when these are rendered along with the contents of the cells to which they apply.

Source: http://www.w3.org/TR/html4/struct/tables.html

score 7 · Answer 5 · answered Mar 22 '11 at 17:25

7

<thead> is special in that it can be used to repeat the header row at the top of the page in printed versions.

answered Mar 22 '11 at 17:25

Diodeus - James MacFarlane

112,730
33
157
176

amphetamachine · Answer 6 · 2019-08-23T18:22:05.430

5

As far as I can tell from experience, there is no difference in rendering unless you're using CSS to specify a difference in rendering. A <td> inside of a <thead> will render the same as a <th> inside of a <table> or a <tbody>.

edited Aug 23 '19 at 18:22

answered Mar 22 '11 at 17:23

amphetamachine

27,620
12
60
72

A thead element contains rows, too. – DanMan Mar 22 '11 at 17:28
1

I think you mean a `` inside of a `` renders the same as a ``, not that a `` does. – frabjous Aug 23 '19 at 14:39
1

React says " cannot appear as a child of " – AlxVallejo Nov 15 '20 at 20:08

score 0 · Answer 7 · edited Apr 01 '13 at 04:18

0

There are no hard rules here. The <thead> element is just another way to group your columns and rows, just like <tbody> and <tfoot> is. So you have more possibilities for scripting and formatting.

edited Apr 01 '13 at 04:18

Iswanto San

18,263
13
58
79

answered Mar 22 '11 at 17:27

DanMan

11,323
4
40
61

html tables: thead vs th

7 Answers7

Linked

Related