HTML <caption> Caption Tag
Tags: learnhtml, htmlc
Published: 2021-02-16 04:34:26

---
title: HTML <caption> Caption Tag
published: true
date: 2021-02-15 10:41:47 UTC
tags: LearnHTML,HTMLC
canonical_url: https://sharepointanchor.com/learn-html/html-caption-tag/
---

The **caption Caption tag**  **defines the title of a table** in the [HTML](https://sharepointanchor.com/learn-html/ "HTML") document. The caption tag is the **first tag** to **appear after the <table> 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](https://sharepointanchor.com/learn-css/ "CSS") caption-side** or **text-align property**.

**Info** : The **caption** tag defines a **caption for the table**. Similarly, you can use the **<figcaption>** tag to define the **caption for the <figure> element**.

## Syntax:

This tag contains both an **opening caption tag** and **closing </caption> 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/caption1.png)<figcaption>Result</figcaption>

### Download Sample file:

[HTML-Caption-Tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Caption-Tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Caption-Tag.html)

<script async src="//jsfiddle.net/Share_Point_Anchor/38mfad0p/embed/html,result/"></script>

## 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/caption-with-css.png)<figcaption>Result</figcaption>

## Attributes:

The  **caption**  tag supports the  **global attributes**  and the  **event attributes**

<style> th, td{ padding: 20px; } </style>

  | 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](https://sharepointanchor.com/learn-html/ "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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <address> Address Tag](https://sharepointanchor.com/learn-html/html-address-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <bdi> Bi-Directional Isolation Tag](https://sharepointanchor.com/learn-html/html-bdi-tag/)**
- **[HTML <abbr> Abbreviation Tag](https://sharepointanchor.com/learn-html/html-abbreviation-tag/)**

The post [HTML caption Caption Tag](https://sharepointanchor.com/learn-html/html-caption-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).