HTML - <caption> Tag

Quiz

Introduction to <caption> Tag

The HTML <caption> tag is used to provide a title or descriptive headings for a <table> element. It provides context to the tables content and helps users to understand its purpose. It is placed directly after the <table> tag and before any other table elements, such as <thead> or <tr>.

The <caption> tag improves the accessibility of a webpage, making the tables easier to understand for screen readers. By default, it is displayed above the table, but its position can be altered using CSS.

Syntax

Following is the syntax of HTML <caption> tag −.

<caption>
  .....
</caption>

Attributes

HTML caption tag supports Global and Event attributes of HTML. A Specific attribute as well which is listed bellow.

Attribute	Value	Description
align	left right center justify	Specifies the alignment of text content(Deprecated).

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <caption> tag.

<!DOCTYPE html>
<html>
<body>
   <style>
      table,
      td,
      th {
         border: 4px solid #D2B4DE;
         border-collapse: collapse;
      }
   </style>
   <table>
      <caption>Monthly Sales</caption>
      <tr>
       <th>Month</th>
    <th>Sales</th>
      </tr>
      <tr>
        <td>October</td>
    <td>$10,000</td>
      </tr>
      <tr>
         <td>November</td>
    <td>$20,000</td>
      </tr>
      <tr>
    <td>December</td>
    <td>$30,000</td>
      </tr>
   </table>
</body>
</html>

Example : Applying with CSS

Consider the following example, where we are going to apply the CSS on the <caption> tag.

<!DOCTYPE html>
<html>
<body>
    <style>
        table,
        td,
        th {
            border: 4px solid #D2B4DE;
            border-collapse: collapse;
        }

        caption {
            font-weight: bold;
            color: blue;
            text-align: center;
        }
    </style>
    <table>
        <caption>Students Grades</caption>
        <tr>
            <th>Name</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>Ramu</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>Sunitha</td>
            <td>A</td>
        </tr>
    </table>
</body>
</html>

Example : Using id Attribute

In the following example, we are going to use the id attribute along with the <caption> tag.

<!DOCTYPE html>
<html>
<body>
    <style>
        table,
        td,
        th {
            border: 4px solid #D2B4DE;
            border-collapse: collapse;
        }
    </style>
    <table>
        <caption id="tp">Bills</caption>
        <tr>
            <th>Product</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>pencils</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Pens</td>
            <td>25</td>
        </tr>
    </table>
    <script>
        document.getElementById('tp').style.color = 'green';
    </script>
</body>
</html>

Supported Browsers

Tag
caption	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page