Markup for Table Headers

In this lesson, we'll get into more detail of markup for table headers.

widget

Most tables have headers, either columns or rows, sometimes both. HTML table definitions allow you to specify cells as headers with the <th> tag.

A <th> tag can be used exactly as the <td> tag, so it can use the colspan and rowspan attributes as well.

The Listing below demonstrates tables with header cells:


Listing: Tables with header cells

<!DOCTYPE html>
<html>
<head>
  <title>Header Cells</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>Category</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Gold</td>
      <td>15000</td>
    </tr>
    <tr>
      <td>Silver</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>Bronze</td>
      <td>3000</td>
    </tr>
  </table>
</body>
</html>

Table headers are displayed in most browsers with a boldfaced font (image below), and normally, this is the only visual clue that tells you they are header cells.

Table with header cells
Table with header cells
...
Access this course and 1400+ top-rated courses and projects.