DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <caption> Caption Tag

The caption Caption tag defines the title of a table in the HTML document. The caption tag is the first tag to appear after the

tag. Only one caption can be specified for one table.

Most of the browsers will render the caption tag above to the table, but you can change this behavior with the CSS caption-side or text-align property.

Info : The caption tag defines a caption for the table. Similarly, you can use the

tag to define the caption for the element.

Syntax:

This tag contains both an opening caption tag and closing tag. The content is written between these two tags.

Sample of the HTML caption Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
<h2>Example table with Caption</h2>
    <table class="table" width="400" border="1">
      <caption>Students Mark List</caption>
      <thead>
        <tr>
          <th>Student</th>
          <th>Test 1</th>
          <th>Test 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Steve</td>
          <td>75</td>
          <td>90</td>
        </tr>
        <tr>
          <td>Lily</td>
          <td>88</td>
          <td>80</td>
        </tr>
        <tr>
          <td>Jack</td>
          <td>79</td>
          <td>85</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Result:

Result

Download Sample file:

HTML-Caption-TagDownload

HTML caption tag with CSS Property:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #C40655;
        color: #fff;
        caption-side: bottom;
      }
 table,
      th,
      td {
        border: 1px solid #C40655;
        padding: 3px;
      }
      td {
        background-color: #fff;
        color: #666666;
      }

    </style>
  </head>
  <body>
    <h2>Example for Caption tag with CSS caption-side Property</h2>
    <p>Here the caption-side is set to "bottom":</p>
    <table>
      <caption>This is the caption of table</caption>
      <tr>
        <td>Name of the Student</td>
        <td>Age of the Student</td>
      </tr>
<tr>
        <td>Lily</td>
        <td>21</td>
      </tr>
    </table>
  </body>
</html>

Result:

Result

Attributes:

The caption tag supports the global attributes and the event attributes

th, td{ padding: 20px; }

| Attribute | Value | Description |
| --- | --- | --- |
| align | | The Align attribute will helps to set the caption horizontally.

Not used in HTML5. |
| right | The table caption is placed on top and aligned to the right. |
| left | The header is placed on top and aligned to the left. |
| top | It will set the header on top and aligned to the center. |
| bottom | The table header is placed below and aligned to the center. |

Styling Methods for caption Tag:

You can use the following properties to style an HTML caption tag.

Properties to style the visual weight/emphasis/size of the text in caption tag:

  • CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
  • CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
  • CSS font-size – This CSS property will help to set the size of the font.
  • CSS font-weight – This CSS property used to define whether the font should be bold or thick.
  • CSS text-transform – This CSS property will control the text case and capitalization.
  • CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in caption Tag:

  • CSS color – This CSS property will specify the color of the text content and decorations.
  • CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for caption Tag:

  • CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
  • *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
  • CSS white-space – This CSS property describes how white-space inside an element is handled.
  • CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for caption Tag:

  • CSS text-shadow – This CSS property helps to add the shadow to text.
  • CSS text-align-last – This CSS property will set the alignment of the last line of the text.
  • CSS line-height – This CSS property defines the height of a line.
  • CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
  • CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

Related Articles:

The post HTML caption Caption Tag appeared first on Share Point Anchor.

Top comments (0)