HTML caption Tag –

In this article, we will learn about caption tags in HTML and how to use them.

HTML <caption> tag is used to add a caption or title to an HTML table. It should be used inside the <table> element and just after the <table> start tag. A table may contain only one <caption> element.

Syntax

Following are some specifications about the <caption> tag

Example of <caption> Tag

We are going to create a table and use <caption> tag to the caption as “Employee Details” to the table.

Code:

Output:

The table with the caption in the output provided downwards can be seen. The caption is, by default, aligned at the top in the center.

“align” Attribute

We can align the caption at the bottom or top of the table using the “align” attribute.

Note: The “align” attribute is deprecated and not recommended for use in HTML5. Instead, we can use the “text-align” CSS property.

Syntax:

align=”value”

Demonstrations of <caption> Tag using “align” Attribute

Demonstration 1:

We are going to construct an electrical appliances details table and align the table caption to the top side in this illustration.

Code:

Output:

Here in the output we can witness the table caption at the top of the table.

Demonstration 2:

We will construct a stationery product details table and align the table caption to the bottom side of this demonstration.

Code:

Output:

Here in the output we can witness the table caption at the bottom of the table.

“text-align” CSS Property

We can align the caption at the bottom or top of the table using the “align” attribute.

Syntax:

“text-align” is the CSS property in the above syntax, which takes four values described below:

• Left: It aligns the text to the left side.
• Right: It aligns the text to the right side.
• Center: It aligns the text to the center.
• Justify: It aligns the text to justify.

Illustration of <caption> Tag using “text-align” CSS Property

We are going to set the caption of the table utilizing the CSS property “text-align” so we will set the table caption to the left, right, center, and justify in these illustrations.

Illustration 1:

We will align the caption to the left of the table in this illustration.

Code:

Output:

Here is the output; we can see the table caption on the left side of the table.

Illustration 2:

We will align the caption to the right of the table in this illustration.

Code:

Output:

Here is the output; we can see the table caption on the right side of the table.

Illustration 3:

We will align the caption at the center of the table in this illustration.

Code:

Output:

Here is the output; we can see the table caption at the center of the table.

Illustration 4:

We will align the caption to “justify” in this illustration.

Code:

Output:

Here in the output we can witness the table caption to justify.

Attributes

Tag-specific Attributes

Global Attributes

The <caption> tag supports the Global attributes

Event Attributes

The <caption> tag supports the event attributes.

Supporting Browsers

Following are the browsers that support <caption> tag:

• Google Chrome
• Internet Explorer (IE)
• Firefox
• Opera
• Safari

Conclusion

We have understood the caption tag in HTML in this article. Some of the important points are as follows:

1. We can place the caption of the table in two different ways using the “align” attribute:
   • align=”bottom”: It aligns the caption at the bottom of the table.
   • align=”top”: It aligns the caption at the top of the table.
2. We can place the caption of the table in four different ways using the “text-align” CSS property:
   • Text-align: left; – It places text on the left side.
   • Text-align: right; – It places text on the right side.
   • Text-align: center; – It places text at the center.
   • Text-align: justify; – It places text to justify.