th Table Header Cell

HTML table cells are marked by the td tag in the body and the footer, and they are marked by th in the header.

Syntax

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell1</td>
      <td>cell2</td>
    </tr>
  </tbody>
</table>

Default th Tag Styles

By default, the most popular web browsers show the header cells with bold text, aligned to the center of the cell. Normal td data cells show with normal font, aligned to the left. We can override these with CSS styles.

Google Chrome displaying a table with the default CSS styles.

Default Browser Styles

th Tag Attributes

Besides the global tag attributes, the <th> tag supports the following attributes.

1. abbr – <td abbr="description">
   We can attribute a short description of the cell's content. Some user-agents, might show a tooltip on mouse hover while others, such as speech readers, may present this description in a different way.
2. colspan – <th colspan="2">
   Widens a cell to the right. We have a separate page with a more detailed explanation.
3. rowspan – <th rowspan="2">
   Makes a higher cell, extending it towards the bottom. Learrn more about rowspan on its dedicated page.
4. headers – <th headers="related-header-id">
   Specifies one or more header cells a header cell is related to, using the id attribute. It has no visual effect but screen readers can use it.
5. scope – <th scope="col">
   specifies whether a header cell is a header for a col (column) / row / colgroup / rowgroup. It has no visual effect but screen readers can use it.

<table>
  <thead>
    <tr>
      <th rowspan="2">Model</th>
      <th rowspan="2" abbr="Retail price">MSRP</th>
      <th colspan="2" id="range">Range</th>
    </tr>
    <tr>
      <th headers="range">Miles</th>
      <th headers="range">Kms</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Model 3</td><td>$42,900</td>
      <td>272</td><td>437</td>
    </tr>
    <tr>
      <td>Model Y</td><td>$54,990</td>
      <td>330</td><td>531</td>
    </tr>
  </tbody>
</table>

Deprecated Attributes

Some attributes are no longer supported in HTML5. Make sure to replace these while migrating content from old websites.

Table Header Cells In Div Tables

We can use structured div elements to create Div tables. We can assign a class name to the first row of the table and style it in a distinctive way with CSS. Scroll to the bottom of the page for the div table generator.

<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">Head 1</div>
      <div class="divTableHead">Head 2</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">Cell 1</div>
      <div class="divTableCell">Cell 2</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">Cell 3</div>
      <div class="divTableCell">Cell 4</div>
    </div>
  </div>
</div>

Nested Table in Header Cells

Table header cells can contain multiple inline and block elements, even another table. A nested table is a table that is embedded within another table.

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>
        <table class="red">
          <tbody>
            <tr>
              <td>A</td>
              <td>B</td>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Generate Table Header Cells

The online HTML table generator creates the code with just a couple of clicks. By default it creates normal body with rows containing td cells. In order to add a header section, we need to activate the toggle button above the dashboard. Enabling this option adds one header row that matches in length the widht of the generated table. To add multiple lines to the header and set colspan&rowspan, we need to adjust the source code.