html – Why use the th element instead of td element?

html – Why use the th element instead of td element?

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

Semantics, it wont 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, its 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.

Its 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 wont 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 arent obsolete/deprecated [1]

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

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).

html – Why use the th element instead of td element?

The TH attribute, according the W3C, can specify the cell which the influence of headding cell reaches by the scope attribute.

This attribute is important for SEO too. It helps to prioritize the elements of an HTML page.

If you do not want to optimize SEO on your web page : dont use it.

If you want to encode properly respecting the conventions : use it.

But I do not really understand your reasoning. Its like says :

Why the STRONG tag? Theres already a SPAN tag and we can style it in CCS with font-weight:bold !

But that doesnt make sense because the conventions (such as W3C) established councils describe all the possible page elements so more accurately.
Hence the direction of new HTML5 markup with advantages such as ADRESS, SECTION, ARTICLE, ASIDE, NAV, …

Leave a Reply

Your email address will not be published.