HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.

HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.

Vertical Table Headers

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

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

Align Table Headers

By default, table headers are bold and centered:

To left-align the table headers, use the CSS text-align property:

th {
  text-align: left;
}

Header for Multiple Columns

You can have a header that spans over two or more columns.

To do this, use the colspan attribute on the element:

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

Table Caption

You can add a caption that serves as a heading for the entire table.

To add a caption to a table, use the<caption> tag:

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