HTML Table Caption

Introduction

In HTML, the <caption> tag is used to add a caption or title to a table. This step-by-step lab will guide you through the process of creating a table in HTML and adding a caption to it.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Create a Basic Table

In the first step, create a basic table with some data using the table tag. Here is an example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Add Caption to the Table

To add a caption to the table, simply insert the <caption> tag after the opening <table> tag and before the table rows. Here is an example:

<table>
  <caption>
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Style the Caption

To style the caption, use the style attribute within the <caption> tag. Here is an example:

<table>
  <caption style="color: blue; font-size: 20px;">
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Summary

In HTML, the <caption> tag is used to add a caption or title to a table. The <caption> tag is used within the <table> tag, just after the opening <table> tag. A caption is a short description that provides a brief explanation about the table. It helps you to understand its purpose. To add a caption to the table, simply insert the <caption> tag after the opening <table> tag and before the table rows. Using the style attribute within the <caption> tag, we can style the caption.