17 SEP

HTML <caption> Tag

Example

A table with a caption:

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

Try it Yourself »

Definition and Usage

The <caption> tag defines a table caption.

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

Note: You can specify only one caption per table.

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

Browser Support

Element
<caption> Yes Yes Yes Yes Yes

Differences Between HTML 4.01 and HTML5

The align attribute is removed from HTML5.

Attributes

Attribute Value Description
align left
right
top
bottom		 Not supported in HTML5.
Defines the alignment of the caption

Global Attributes

The <caption> tag also supports the Global Attributes in HTML.

Event Attributes

The <caption> tag also supports the Event Attributes in HTML.

Related Pages

HTML DOM reference: Caption Object

Default CSS Settings

Most browsers will display the <caption> element with the following default values:

Example

caption {
display: table-caption;
text-align: center;
}

Try it Yourself »

HTML <caption> align Attribute

Example

A table with a bottom-aligned <caption> element:

<table>
<caption align=”bottom”>My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

Try it Yourself »

Definition and Usage

The align attribute defines the alignment of a caption element.

This attribute should align the caption as a block element to the left, right, above, or below a table.

Browser Support

Attribute
align Yes Yes Yes Yes Yes

Note:

  • Internet Explorer 8 supports the “left”, “right”, “top”, and “bottom” values
  • Internet Explorer 9+ supports the “top”, and “bottom” values
  • Firefox supports the “left”, “right”, “top”, and “bottom” values
  • Opera supports the “left”, “right”, “top”, and “bottom” values
  • Chrome supports the “top”, and “bottom” values
  • Safari supports the “top”, and “bottom” values

Compatibility Notes

The <caption> align attribute is not supported in HTML5. Use CSS instead.

CSS syntax: <caption style=”caption-side:bottom”> or <caption style=”text-align:left”>

CSS Example: Position a table caption

In our CSS tutorial you can find more details about the caption-side property and the text-align property.

Syntax

<caption align=”left|right|top|bottom”>

Attribute Values

Value Description
left The caption is at the left of the table
right The caption is at the right of the table
top The caption is at the top of the table (this is default)
bottom The caption is at the bottom of the table

Post Author: Zahid Farid

Related Posts '