1. Technology

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


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

What is the <td> Tag?

The <td> tag creates table cells within a table row in an HTML table. This is the HTML tag that contains text and images - the content of the HTML table.

What is the <th> Tag

The <th> tag does nearly the same thing - but it defines the current cell as a table header.

Most Web browsers change the font weight to bold and center the content in a <th> cell.

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. They are used to define what the content below or beside them is.

Do not use <th> to style your cells. Because browsers tend to display table header cells differently, many lazy Web designers take advantage of this and use the <th> 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.
  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. And 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.
  3. You should use CSS to define how the cells look.

©2014 About.com. All rights reserved.