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

Question

is it necessary to have <th> in any table? even if table has no heading?

table has 3 other tag <thead> <tbody> <tfoot> is it necessary to use all even if i have nothing for table footer. Firefox by default add all these in code.

and is it necessary , <th> always should be in a <thead>

and if i have a heading in content received from client , and heading is from outside the table but related to table then how should i place that heading for table

As a above table

<h3>Heading of table<h3>
<table>......</table>

as a heading of table

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

or as a caption of table

<table>
<caption> Heading of table</caption>

Which is good for screen reader and semantically correct?

Answer 1

No, it is not necessary to have th. But it doesn't look like you're using th right. Generally, you have one for each column. A simple example of th used correctly is:

<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

You could also do:

<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

Answer 2

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.

Answer 3

You want to use what describes your data best.

<caption> will describe the whole table. th will create a single cell which is usually used to describe one column (but can also be used for row headings).

thead, tfoot, and tbody. all can be used and are all optional provided that they are in that order, if used, and you have only one thead and one tfoot (but you can have multiple tbody. Many browsers (all?) will add them implicitly if you don't, but the spec says they're optional.

th can appear inside any tr regardless of where the tr is.

Answer 4

<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

This is minimum table that I can think of.

Answer 5

Use <th>s if you are displaying tabular data - use one for each column. It is nice for your regular users and essential for screen readers. Do not use <th>s if you are using the table for layout purposes (or other nefarious schemes...)

Answer 6

The benefits are semantics. The <th> means T able H eader. Use it to markup the headers of your columns. Generally within a <thead>.