HTML <caption> Tag - HTML Tag

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.

How to create HTML <caption> Tag

A table with a caption:

index.html

Example: HTML

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Output should be:

What Type of Browsers will Support for HTML <caption> Tag

Output should be:

How to take Position table captions (with CSS)

Follow the Example.

index.html

Example: HTML

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Output should be:

How to set Default CSS Settings for HTML <caption> Tag

Follow the Example.

index.html

Example: HTML

<style>
table,th,td {
  border:1px solid black;
}

caption { 
  display: table-caption;
  text-align: center;
}
</style>
<table>
  <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>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference