HTML Tables: Thead Vs Th

html tables: thead vs th

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.

Do we need the <thead> tag in HTML tables?

Is is optional but explicitly grouping header rows with THEAD, will give the browsers the ability to include the header rows if there is a need to print tables with multi pages. This will also give you the possibility for a large table to have a scrolling body and static header rows. Many browsers support THEAD, so you can use it without problems.
That sad, it's up to you if you want to use it or not.

Why use both <thead> and <th scope=col>

An important aspect here is accessibility: By using th elements both on top and to the left with according scope attributes (col/row), screenreaders "understand" (and read/output in some way) that there are two headers for each td- one on top and one to the left. The important thing for that is not the thead element (which some browsers even add automatically if it isn't included in the original code, but which couldn't possibly be added for a column), but the th elements, which indicate header cells.

Is it necessary to have <th> in any table?

According to the HTML DTD this is the content model for HTML tables:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

So this is illegal syntax:

<thead><th>Heading of table</th></thead>

It should be:

<thead><tr><th>Heading of table</th></tr></thead>

<th> elements aren't required anywhere. They're simply one of the two cell types (the other being <td>) that you can use in a table row. A <thead> is an optional table section that can contain one or more rows.

Edit: As to why to use <thead> there are several reasons:

1. Semantic: You're differentiating between the content of your table and "metadata". This is most often used to delineate between column headers and data rows;
2. Accessibility: it helps people who use screen readers to understand the contents of the table;
3. Non-Screen Media: Printing a multi-page table may allow you to put the <thead> contents at the top of each page so people can understand what the columns meaning without flicking back several pages;
4. Styling: CSS can be applied to <tbody> elements, <thead> elements, both or some other combination. It gives you something else to write a selector against;
5. Javascript: this often comes up when using jQuery and similar libraries. The extra information is helpful in writing code.

As an example of (5) you might do this:

$("table > tbody > tr:nth-child(odd)").addClass("odd");

The <thead> element means those rows won't be styled that way. Or you might do:

$("table > tbody > tr").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

with:

tr.hover { background: yellow; }

which again excludes the <thead> rows.

Lastly, many of these same arguments apply to using <th> elements over <td> elements: you're indicating that this cell isn't data but a header of some kind. Often such cells will be grouped together in one or more rows in the <thead> section or be the first cell in each row depending on the structure and nature of your table.

Why can you have a th element without thead element?

<th> doesn't necessarly mean it's in the head of the table. For example, you might have this layout:

<table>
  <tr>
    <th>Name:</th>
    <td>Tarquin Smith</td>
  </tr>
  <tr>
    <th>Occupation:</th>
    <td>Jovian Agent</td>
  </tr>
</table>

html tables, whats the purpose of th

It is possible to have table heading cells that are not part of a table header. Examples include a column of headings and headings that apply to only a section of a (complex) table (the sort where the td elements would need to make use of the headers attribute).

Headings are not data so a table data cell would not be appropriate. Footers are for data such as totals, which are still data so <td> would be suitable for them.

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

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

When to use tbody, colgroup, thead, etc, in an HTML table?

You use them if you want to supply additional information about your table and organize the content in it. They can also affect the visual rendering of your table in some ways (although this may vary across browsers — for example, support for <colgroup>/<col> is extremely patchy).

For example if you have header rows on the top and bottom you would group them in a <thead> and a <tfoot> respectively, and the data rows in a <tbody>. Browsers will ensure that the <tfoot> is always rendered at the bottom no matter whether you place it before or after any <tbody> or <tr> elements¹ or how much data you have in your table, which is useful if your table potentially has lots of rows:

<table>
  <caption>High Scores</caption>
  <thead>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </thead>
  <tfoot>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </tfoot>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>10000</td></tr>
    <tr><td>2</td><td>Bob</td><td>9000</td></tr>
    <tr><td>3</td><td>Carol</td><td>8500</td></tr>
    <tr><td>4</td><td>Dave</td><td>8000</td></tr>
    <!-- Up to 100 data rows -->
  </tbody>
</table>

Otherwise by default all rows are grouped into a single <tbody> (even if you don't make explicit use of <tbody></tbody> tags within your table). Consequently, if you have header rows at the bottom of the table, you will have to place them at the very bottom of the table in order for them to appear last:

<table>
  <caption>High Scores</caption>
  <tr><th>#</th><th>Name</th><th>Score</th></tr>

  <tr><td>1</td><td>Alice</td><td>10000</td></tr>
  <tr><td>2</td><td>Bob</td><td>9000</td></tr>
  <tr><td>3</td><td>Carol</td><td>8500</td></tr>
  <tr><td>4</td><td>Dave</td><td>8000</td></tr>
  <!-- Up to 100 data rows -->

  <tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>

And of course, this also makes it arguably less semantic if you care about that sort of thing.

---

¹ _{Note that it is required that a <tfoot>, if you use one, be placed before any <tbody> or <tr> elements in previous specifications up to and including HTML 4 and XHTML 1 for it to validate against those doctypes. This is no longer true as of HTML5.}

---

Related Topics