HTML Table Headers

Tables can have headers for each column or row, or for several columns or rows at once. Header cells are made with <th> elements; each <th> is one table cell.

Example

A table with a header row.

A table whose first row is header cells (th): Firstname, Lastname, Age, followed by two data rows (Jill Smith 50, Eve Jackson 94).

> Output: complete HTML page

Prompt

A table whose first row is header cells (th): Firstname, Lastname, Age, followed by two data rows (Jill Smith 50, Eve Jackson 94).

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Row</title>
</head>
<body>

<table>
  <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>

Vertical Table Headers

To use the first column as headers, make the first cell of each row a <th> element.

Example

A table with headers running down the left side.

A table that uses the first cell in each row as a header (th) so the headers run down the left side: rows Firstname (Jill, Eve), Lastname (Smith, Jackson), Age (94, 50).

> Output: complete HTML page

Prompt

A table that uses the first cell in each row as a header (th) so the headers run down the left side: rows Firstname (Jill, Eve), Lastname (Smith, Jackson), Age (94, 50).

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Headers</title>
</head>
<body>

<table>
  <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>94</td>
    <td>50</td>
  </tr>
</table>

</body>
</html>

Align Table Headers

By default, header text is bold and centered. To left-align it, use the CSS text-align property on th.

Example

Headers left-aligned with CSS.

A table with header cells left-aligned using the CSS text-align property set to left on th, with Firstname/Lastname/Age headers and two data rows.

> Output: complete HTML page

Prompt

A table with header cells left-aligned using the CSS text-align property set to left on th, with Firstname/Lastname/Age headers and two data rows.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<table>
  <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>

Header for Multiple Columns

A header can span two or more columns. Use the colspan attribute on the <th> element. You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Example

A header spanning two columns.

A table with a header that spans two columns using colspan=2 on a Name th, plus an Age th, then two data rows (Jill Smith 50, Eve Jackson 94).

> Output: complete HTML page

Prompt

A table with a header that spans two columns using colspan=2 on a Name th, plus an Age th, then two data rows (Jill Smith 50, Eve Jackson 94).

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Colspan</title>
</head>
<body>

<table>
  <tr>
    <th colspan="2">Name</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>

Table Caption

You can add a caption that acts as a heading for the whole table with the <caption> tag.

Note: The <caption> tag should come right after the <table> tag.

Example

A table with a caption.

A 100%-width table with a caption "Monthly savings" added right after the table tag, header row Month/Savings, and two rows (January $100, February $50).

> Output: complete HTML page

Prompt

A 100%-width table with a caption "Monthly savings" added right after the table tag, header row Month/Savings, and two rows (January $100, February $50).

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Caption</title>
</head>
<body>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>