What is the difference between thead and th?

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

table example

79 Likes