coding180 icon


HTML Element: Table with header (<th>)

HTML Element: Table with header (<th>)

Tutorials > HTML > HTML Table Elements

The first feature we are going to add to a table is header cells.

Normally, the first row of a table can represent the headings for each column.

To indicate that it is a header cell, we use the <th> element instead of <td>

The browser renders data cells and header cells differently.

Table head example

Let's make the same problem of the previous concept, but adding a title to each column of the table through header cells:

<!DOCTYPE html>

    <title>Table with Head -</title>
    <meta charset="UTF-8">

    <table border="1">
            <th>Number of Population</th>
            <td>1300 millones</td>
            <td>1080 millones</td>
            <td>United States</td>
            <td>295 million</td>


The result in the browser is:

html table with head

To indicate that it is a header type cell, we use the th element:

    <th>Number of Population</th>

The th element must be contained between the <tr> and </tr> tags, that is, they belong to a row.

To remember the name of this table head element:

<th> comes from table header cell.


Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel