HTML Table Headers

Reading rows of raw data can quickly overwhelm users. To ensure information is immediately digestible, web tables employ Headers. Instead of placing standard text inside a table data element (td), we use a dedicated element that signals "this is a category title".

Defining the <th> Tag

The <th> element represents a "Table Header". When a web browser encounters a <th> element, it applies distinct default formatting to differentiate it from standard data:

• The text inside becomes bolded.
• The text aligns itself to the horizontal center of the cell.

Typically, headers form the very first row of a table (commonly referred to as column headings).

<table style="width: 100%;">
  <!-- Row 1 defines our 3 columns -->
  <tr>
    <th>Operating System</th>
    <th>Version</th>
    <th>Release Year</th>
  </tr>
  <!-- Valid data goes below -->
  <tr>
    <td>Windows</td>
    <td>11</td>
    <td>2021</td>
  </tr>
</table>

Vertical vs Horizontal Labels

Headers aren't restricted to the top of a table. Sometimes, your data is organized horizontally rather than vertically (think of a user profile where labels are on the left and values are on the right).

To create a vertical header layout, you simply make the first element of every row a <th> tag.

<!-- Comparing Products Vertically -->
<table style="width: 100%; border: 1px solid #ddd;">
  <tr>
    <th style="text-align: left;">Processor Model</th>
    <td>Ryzen 7</td>
    <td>Core i7</td>
  </tr>
  <tr>
    <th style="text-align: left;">Core Count</th>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <th style="text-align: left;">Base Clock</th>
    <td>3.8 GHz</td>
    <td>3.6 GHz</td>
  </tr>
</table>

Using colspan for Grand Titles

Occasionally, you need a header that acts as a super-category over multiple columns. HTML allows table cells to stretch and merge horizontally—this is accomplished with the colspan attribute.

<!-- One header spanning the width of two normal columns -->
  <tr>
    <th colspan="2">Financial Information (Q1)</th>
    <!-- The row skips creating a second cell because the first one merged into it -->
  </tr>

We will cover stretching (spanning) in much deeper detail later in this section.