Why use the th element instead of td element?

Question

I'm reading up on the differences between the HTML th and th elements used in <table>

According to http://webdesign.about.com/od/tables/f/blfaqthvstd.htm , the th element defines the current cell as a table header.

It then goes on to say that some browsers will render the th element differently (defined by the browser) but the article then advises not to style the TH ourselves (via CSS I assume).

I'm completely confused by this; It is suggesting that to use th element gives us no design control and has no value/importance...

I know some elements are older and some become obsolete, but I find no mention that the th element is depreciated nor can I see any value in it.

Would some one let me know if I've miss-understood please. Does Google read TH differently (again, my research shows nothing), does the th element help the browser to render the table, or is it just an option to use if we want to?

Answer 1

1) Why use the th element instead of td element?

Semantics, it won't make any difference to you whether you use td instead of th, well, it will get your work done happily, but, to differentiate them, we use th, thead, tfoot etc, it's like we can use div for wrapping text, but using p will make more sense yea?

Also, search engines understand, that what does your document contain, say, you use em so whatever you style your em text as, search engines will get a clue that hey, the word in the em is emphasized, so it is important one in the document, could be a keyword perhaps.

It's like you are saying a doctor, that my body is paining, but if you describe which part of your body pains, will make easy for the doctor to judge and fix the issue easily.

Thus, with the same logic, if you define the headers of the table using th would rather make more sense instead of using td, will help search engines to know your content in a better way, screen readers to read out the data differently, browsers to display it more appropriately.

---

2) It then goes on to say that some browsers will render the th element differently

Yes, browsers render text of the th element in bold

---

3) the article then advises not to style the TH ourselves

Well, I won't agree with this at all, you can style the th elements

---

4) I find no mention that the th element is depreciated nor can I see any value in it.

No, they aren't obsolete/deprecated ^[1]

^{[1]. Though, some of the attributes are deprecated for the element, click here for more information.}

Answer 2

You have partly misunderstood the document cited. In particular, it does not say that you should not style th; rather, that you should not use th for just “styling”, i.e. use it for something that is not a table header, just to make it appear bold and centered. (This warning isn’t particularly relevant; I haven’t ever seen people do such things.)

By definition, th contains header information for cells. This is rather vague, but in many simple case, it is rather obvious and simple – typically so that the first row of a table contains headers for the columns, like names of quantities.

The practical impact is that special browsers and assistive software may be able to present a table to the user in a much better way, if they know the association between data cells and header cells. For example, when a particular cell is being investigated by the user, they can, instead of just its content like “32 °C”, also indicate the names of the relevant headers, like “Max. temperature” from a column header cell and “Kairo” from a row header cell.

Browsers render th element contents in bold face and as horizontally centered by default; this practice is being standardized in HTML5. But this is just to be taken into account; you can override it in CSS if desired. Especially bolding is mostly useful for header cells, making it easier to notice them and recognize them as headers.

There are different minor differences as well, like different sets of allowed attributes (in HTML5).