How to decide when to use <th> or when not? in <table>.

Question

Like for this code

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

Answer 1

the table header tag should be used when you're talking about header data. If you had a row in your table that served as an explanation for the content in the rest of the rows, you should specify that row using th. It seems that your code probably doesn't require one because all of the information is already in the table. Something like this would be an appropriate use of th.

<table id="presentationsContainer">
  <tr>
    <th>Presentation</th>
    <th>PDF</th>
    <th>PPT</th>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
  <tr>
    <td class="main" width="60%">October 2009</td>
    <td class="dl" width="20%">Download</td>
    <td class="dl" width="20%">Download</td>
  </tr>
</table>

Sorry if I misunderstood the question. Not much explanation up there

Answer 2

The use of <th> vs <td> is entirely semantic. In general, I use <th> when I have one cell in a column which groups or "owns" a row/column of other cells.

In your simple example, I'd remove the use of classes completely, and simply style based on tag type.

  <tr>
    <th width="60%">Presentation October 2009</th>
    <td width="20%">Download pdf</td>
    <td width="20%">Download ppt</td>
  </tr>

Answer 3

th are for table headers, so what Omnomlets said but his example is wrong. If you want October 2009 to be the table header then the HTML would be:

<table id="presentationsContainer">
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <th class="main" width="60%">Presentation October 2009</th>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

You can also take out the class and width tags to keep the html simple, apply styles to the table and use CSS selectors to doing the styling eg:

#presentationsContainer table tr th {
    width: 60%;
}

#presentationsContainer table tr td {
    width: 20%;
}

Answer 4

Once again, this is a good example of content vs. style. Semantically, <th> should be used for the headers of table columns, while simple <td> tags should be used for table cells that aren't table headers.

This is also why you would usually just find one row <th> tags within a table compared to multiple <td> tags.

In your example, there simply is no use for <th> tags, since you don't have a row that serves as a header row, so your code would be good. Omnomlets' example shows perfectly how <th> tags could be correctly used for your table.