coding180 icon

Coding180

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

<head>
    <title>Table with Head - coding180.com</title>
    <meta charset="UTF-8">
</head>

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

</html>

The result in the browser is:

html table with head

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

<tr>
    <th>Countries</th>
    <th>Number of Population</th>
</tr>

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.


user

Robort Gabriel

Lagos, Nigeria

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

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