What's the Difference Between TH and TD HTML Table Tags?

Roman columns

Getty Images 

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 an HTML table on your page.

What Do <td> and <th> Do?

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 workhorse tag of your table. The tags will contain the content of the HTML table.

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 any way that you would like them to look on the rendered webpage.

When Should You Use <th> 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 columns or the headings to the very left or the 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 on web browsers always displaying 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 used 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.
  3. 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 default.
Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "What's the Difference Between TH and TD HTML Table Tags?" ThoughtCo, Jul. 31, 2021, thoughtco.com/difference-between-th-and-td-html-table-tags-3469866. Kyrnin, Jennifer. (2021, July 31). What's the Difference Between TH and TD HTML Table Tags? Retrieved from https://www.thoughtco.com/difference-between-th-and-td-html-table-tags-3469866 Kyrnin, Jennifer. "What's the Difference Between TH and TD HTML Table Tags?" ThoughtCo. https://www.thoughtco.com/difference-between-th-and-td-html-table-tags-3469866 (accessed March 29, 2024).