coding180 icon

Coding180

HTML Element: Table with title (<caption>)

HTML Element: Table with title (<caption>)

Tutorials > HTML > HTML Table Elements


To set a caption to a <table> we must add the caption element immediately after we open the table tag. 
The caption element requires the opening and closing tags.

Let's give our table a title with the population of different countries:

<!DOCTYPE html>
<html>

<head>
    <title>Table with caption - robort</title>
    <meta charset="UTF-8">
</head>

<body>
    <table border="1">
        <caption>Population of the countries with 
the largest number of inhabitants.</caption>
        <tr>
            <th>Countries</th>
            <th>Number of inhabitants</th>
        </tr>
        <tr>
            <td>China</td>
            <td>1.3 billion</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1.08 billion</td>
        </tr>
        <tr>
            <td>United States</td>
            <td>295 million</td>
        </tr>
    </table>
</body>

</html>

The result in the browser is:

Table with caption

As we can see, the caption tag is immediately after the start tag of the table is opened:

<table border="1">
  <caption>Population of the countries
 with the largest number of inhabitants.</caption>
  <tr>

To remember the name of this new HTML element:

<caption> means title.


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