❮ Previous Next ❯

HTML <caption> tag

The <caption> tag is used to add caption in an HTML Table. By default, the content within this element is center alignment. It must be defined just below the <table> start tag. Only one <caption> element is valid in an HTML table.

Type: Block Element

Related elements of <caption> tag:

  • <col>: It defines a column in an HTML table.
  • <colgroup>: It defines a group of columns within an HTML table.
  • <table>: It defines an HTML table.
  • <th>: It defines an HTML table heading.
  • <tr> It defines an HTML table row.
  • <td>: It defines an HTML table cell.
  • <tbody>: It defines the group of body content of an HTML table.
  • <tfoot>: It defines the group of footer content of an HTML table.
  • <thead>: It defines the group of header content of an HTML table.

Syntax of <caption> tag

<table>
 <caption> Table Name </caption>
--Table Layout--
</table>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<caption> Yes Yes Yes Yes Yes 
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption> Table Name </caption>
 <tr>
  <th> First Name </th>
  <th> Second Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> Tom </td>
  <td> Cruise </td>
  <td> 21 </td>
 </tr>
 <tr>
  <td> Raj </td>
  <td> Mohan </td>
  <td> 23 </td>
 </tr>
 <tr>
  <td> Bruce </td>
  <td> Lee </td>
  <td> 22 </td>
 </tr>
</table>
</body>
</html>
Run The code »

Output on the browser

Table Name
First Name Second Name Age
Tom Cruise 21
Raj Mohan 23
Bruce Lee 22

Default CSS properties of <caption> element

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

Attribute values of <caption> tag

Attribute Value Notes
align top
right
bottom
left		 It defines the alignment of the caption.

The align attribute is obsolete in HTML5.

Syntax

<caption align="top | right | bottom | left">
  Table Name
<caption>

You can change the alignment of the caption by using CSS properties either by caption-side or text-align.

1. caption-side

Syntax:

table {
  caption-side:top | bottom | initial | inherit;
}
Value Notes
top It puts the caption above the table.
(Default value)
bottom It puts the caption below the table.
initial It sets the alignment into default value.
(for caption, it is center)
inherit It inherits from the parent value.

Supported Browsers

Property name Chrome Internet Explorer Firefox Safari Opera Mini
caption-side 1.0 or higher 8.0 or higher 1.0 or higher 1.0 or higher 4.0 or higher

2. text-align

Syntax:

caption {
  text-align:left | right | center | justify | initial | inherit;
}
Value Notes
left It makes the texts left alignment.
right It makes the texts right alignment.
center It makes the texts center alignment.
(It is default alignment).
justify It preserves both right and left alignment
i.e. all the lines are stretched at the max value and equal in length.
initial It sets the alignment into default value.
(for caption, it is center)
inherit It inherits from the parent value.

Supported Browsers

Property name Chrome Internet Explorer Firefox Safari Opera Mini
text-align 1.0 or higher 3.0 or higher 1.0 or higher 1.0 or higher 3.5 or higher
❮ Previous Next ❯