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

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.