What's the difference between th and td HTML table tags?

Roman columns
Columns of content can be created in websites using CSS columns.

Tables have long gotten a bad rap in web design. Many years ago, HTML tables were used for layout, which was obviously not what they were intended for. As CSS rose to popular usage for website layouts, the idea that "tables are bad" took hold. Unfortunately, many people misunderstood this to mean that HTML tables are all bad, all the time. That is not the case at all. The reality is that HTML tables are bad when they used for something other than their true purpose, which is to display tabular data (spreadsheets, calendars, etc.).

 If you are building a website and have a page with this kind of tabular data, you should not hesitate to use and HTML table on your page.

If you started building sites in the years since HTML tables for layout fell out of favor, you may actually not be that familiar with the elements that make up HTML tables. Once question that many have when they begin looking at table markup is:

"What's the difference between <th> and <td> HTML table tags?"

What is the Tag?

The <td> tag, or "table data" tag, creates table cells within a table row in an HTML table. This is the HTML tag that contains any text and images. Basically, this is the workhouse tags of your table. The tags will contain the content of the HTML table.

What is the Tag

The <th> tag, or "table header", is similar to the <td> in many ways. It can contain the same kind of information (although you wouldn't put an image in a <th>), but it defines that specific cell as a table header.

Most Web browsers change the font weight to bold and center the content in a cell. Of course, you can use CSS styles to make those table headers, as well as the contents of your tags, look anyway that you would like them to look on the rendered webpage.

When Should You Use Rather Than <td>?

The <th> tag should be used when you want to designate the content in the cell as a header for that column or row.

The table header cells are typically found at the top of the table or along the side - basically, the headings at the top of a columns or the headings to the very left or start of a row. These headers are used to define what the content below or beside them is, making the table and its contents much easier to review and process quickly.

Do not use <th> to style your cells. Because browsers tend to display table header cells differently, some lazy web designers may try to take advantage of this and use the tag when they want the contents to be bold and centered. This is bad for several reasons:

  1. You can't rely that web browsers will always display the content that way. Future browsers might change the color by default, or make no visual changes at all to <th> content. You should never rely solely on default browser styles and should never use an HTML element because of how it "looks" by default
  2. It's semantically incorrect. User agents that read the text may add audible formatting such as "row header: your text" to indicate that it's in a <th> cell. Additionally, some Web applications print the table headers across the top of each page, which would result in problems if the cell is not actually a header but is instead being use for stylistic reasons only. Bottom line, using tags in this way can cause accessibility issues for many users, especially those using assisted devices to access your site content.
  1. You should use CSS to define how the cells look.The separation of style (CSS) and structure (HTML) has been a best practice in web design for many years. Once again, use a because the content of that cell is a header, not because you like the way the browser is likely to render that content by dfault.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 3/2/17