HTML Table Headers

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Headers

Table headers are denoted with <th> elements, each< th >element that represents a table cell.

Example

				
					<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table Headers</h2>
<p>Use the TH element to define table headers.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
</body>
</html>

				
			

Output:

Table Headers

Use the TH element to define table headers.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

Vertical Table Headers

To use the first column as table headers, make the first cell in each row as a th element:

Example:

				
					<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Vertical Table Headers</h2>
<p>The first column becomes table headers if you set the first table cell in each table row to a TH element:</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>  
    <td>50</td>
    <td>94</td>
  </tr>
</table>
</body>
</html>

				
			

Output:

Vertical Table Headers

The first column becomes table headers if you set the first table cell in each table row to a TH element:

Firstname Jill Eve
Lastname Smith Jackson
Age 50 94