What is the difference between thead and th?

[fradancis]

Question

If th and thead are both headings in a table, what is the difference between them?

Answer

thead is essentially a box to hold your headings for the table. It is used along with tbody and tfoot to make up the entirety of a table - header, body, footer.
On the otherhand, th is a single heading element.

In this example given in the instructions for the table head exercise, the whole top row is the thead for the table. The bolded bits of text are each th elements.

[mtf]

The example above is a little bit misleading. The top row is technically part of the table body, not the header.

HTML

<table>
  <caption>The caption describes the table.</caption>
  <thead>
    <tr><th colspan="3">Weekend Schedule</th></tr>
  </thead>
  <tfoot>
    <tr><td colspan="3"><p>The fine print or summary of the table</p></td></tr>
  </tfoot>
  <tbody>
    <tr>
      <td> </td>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
    <tr>
      <th scope="row">Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
      <th scope="row">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

Note: The caption is a required element under accessibility guidelines.

The above comes together with a simple style sheet…

CSS

body {
  font-size: 100%;
}
table {
  border-collapse: separate;
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  font-size: 1.5em;
}
th, td {
  border: 1px solid green;
  width: 33%;
}
td {
  text-align: center;
}
tfoot p,
caption {
  font-size: 0.7em;
}

table example

[fradancis]

Thanks for the input and the extra example! I was working off of the example in the instructions here, where the thead does contain the blank, “Saturday”, and “Sunday” elements.

[mtf]

Ah, I see. A misleading lesson example that can snowball. Tables are very flexible, thanks to the nature of HTML, though as we can see above there is a best practice approach that takes into account strict semantics.

In the example of the lesson column headings are being treated as header of the table. That results in an overlap of semantics. THEAD is not a column header, but at TABLE header.

TH is geared to both column headings and row headings, which roles are declared in the scope attribute. Technically speaking, the THEAD does not require a TH, just a TD. There is no need to define scope since its scope is the entire table.

<tr><td colspan="3">Weekend Schedule</td></tr>

Only thing with this may be the added code weight of CSS to style the element. TH has default styles that fit in perfectly here. That’s what is known as a style cheat. Mind, the only inherited property that is does not already have is font-weight. The default style actually looks better, imho.

Meant to mention this earlier, notice that in the top body row the first element is a TD, not a TH. Being empty it has no role but space holder.Headings are not data, per se, but assuming they are, then a heading for that column would be appropriate.