<th>

Definition and Usage

The <th> element establishes a header cell in an HTML table.

An HTML table has two kinds of cells:

• Header cells - contains header information (created with the <th> element)
• Data cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Attributes

Deprecated Attributes

The following attributes are deprecated in HTML5 and should not be used. Use CSS instead:

Examples

Basic Table with Header Cells

Create a simple table with header cells:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Canada</td>
  </tr>
</table>

Using the Scope Attribute

Use the scope attribute for better accessibility:

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$29</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Header Cell with Colspan

Span header cells across multiple columns:

<table>
  <tr>
    <th colspan="2">Personal Information</th>
  </tr>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
  </tr>
</table>

Using the Abbr Attribute

Provide abbreviated versions for screen readers:

<table>
  <tr>
    <th scope="col" abbr="Prod">Product Name</th>
    <th scope="col" abbr="Desc">Description</th>
    <th scope="col" abbr="Qty">Quantity Available</th>
  </tr>
  <tr>
    <td>Wireless Keyboard</td>
    <td>Ergonomic wireless keyboard with backlight</td>
    <td>25</td>
  </tr>
</table>

Row Headers with Scope

Use header cells for rows:

<table>
  <tr>
    <th scope="row">Monday</th>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">Tuesday</th>
    <td>9:00 AM - 5:00 PM</td>
  </tr>
  <tr>
    <th scope="row">Wednesday</th>
    <td>9:00 AM - 5:00 PM</td>
  </tr>
</table>

Complex Table with Headers

Create a complex table with both column and row headers:

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Sales</th>
      <td>$50,000</td>
      <td>$65,000</td>
      <td>$72,000</td>
      <td>$85,000</td>
    </tr>
    <tr>
      <th scope="row">Expenses</th>
      <td>$35,000</td>
      <td>$40,000</td>
      <td>$38,000</td>
      <td>$42,000</td>
    </tr>
  </tbody>
</table>

Try it Yourself

th vs td - Understanding the Difference

Accessibility with Scope and Headers Attributes

The scope and headers attributes are crucial for accessibility:

• scope="col" - Indicates the header applies to a column
• scope="row" - Indicates the header applies to a row
• scope="colgroup" - Indicates the header applies to a group of columns
• scope="rowgroup" - Indicates the header applies to a group of rows
• headers - Associates data cells with specific header cells by ID

Best Practices

• Always use <th> for header cells and <td> for data cells
• Include the scope attribute on all <th> elements for better accessibility
• Use scope="col" for column headers and scope="row" for row headers
• Place column headers inside <thead> for better semantic structure
• Use the abbr attribute to provide abbreviated versions for long headers
• Avoid using deprecated attributes like align, bgcolor, or valign - use CSS instead
• For complex tables, consider using the headers attribute to explicitly associate data cells with header cells
• Keep header text concise and descriptive

Default CSS Settings

Most browsers will display the <th> element with the following default values:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Related Tags

• <table>

  Defines a table

• <tr>

  Defines a table row

• <td>

  Defines a table data cell

• <thead>

  Groups table header content

• <tbody>

  Groups table body content

• <caption>

  Defines a table caption