Caption Tag Usage Html Tutorials
The HTML <CAPTION> tag is used only once in the TABLE tag to provide a short caption description for the created table. For a broader explanation, the summary property should be used.
The <caption> tag defines a table caption. The <caption> tag must be defined right after the <table> tag. Only one title can be defined in each table. By default, the table header will be centered on the table. It can be formatted with CSS text-align and caption-side properties.
<table border="1">
<caption>Course Content</caption>
<tr>
<th>Lessons</th>
<th>Duration</th>
</tr>
<tr>
<td>HTML Tutorials</td>
<td>120 Hours</td>
</tr>
</table>
CAPTION Elements
- id= Specifies the unique ID.
- class= Specifies the class name.
- style= CSS defines rules.
- title= Specifies short information.
- lang= Specifies the language of the text it contains.
- dir= Specifies the direction of the text it contains.
- align= Specifies the header placement by taking the following values.
- top : Shown centered above the table.
- bottom : It is displayed centered at the bottom of the table.
- left : Shows left aligned at the top of the table.
- right : Displays right-justified above the table.
HTML & JavaScript Events CAPTION
- onclick= Triggered when the element is clicked with the keyboard or mouse.
- ondblclick= Triggered when the element is double-clicked with the mouse.
- onmousedown= Triggered when mouse button is pressed on element.
- onmouseup= Triggered when the pressed mouse button is released.
- onmouseover= Triggered when entering the area occupied by the element.
- onmousemove= Triggered when the mouse pointer is moved over the element.
- onmouseout= Triggered when the element's footprint is exited.
- onkeypress= Triggered when a key is pressed on the keyboard while on the element.
- onkeydown= Triggered the first time a key is pressed on the keyboard while on the element.
- onkeyup= Triggered when the pressed keyboard key is released.
The following example demonstrates the use of four different values of the align attribute of the HTML CAPTION tag.
<table border="1" width="200">
<caption align="top">Title</caption>
<tr><td>Content</td>
</table>
<br/>
<table border="1" width="200">
<caption align="left">Title</caption>
<tr><td>Content</td>
</table>
<br/>
<table border="1" width="200">
<caption align="right">Title</caption>
<tr><td>Content</td>
</table>
<br/>
<table border="1" width="200">
<caption align="bottom">Title</caption>
<tr><td>Content</td>
</table>
The html caption tag is used to specify the title of a table. For example, you may want to show the students of class 8/A in a table. You may need to name the title of this table as 8/A class. At these points, the caption tag comes to our aid. Or you can use it to name the category of a specific product statement or to specify the name of a financial statement.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>8/A Students</caption>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td>Abraham</td>
<td>Maria</td>
</tr>
<tr>
<td>Kitty</td>
<td>John</td>
</tr>
</table>
</body>
</html>
The <caption> tag defines a table caption.
<caption> should be used right after the <table> tag.
Tip: By default, a table header is center aligned above a table. However, the text alignment and CSS properties can be used to align and place the caption text.
<table>
<caption style="text-align:right">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<br>
<table>
<caption style="caption-side:bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Default CSS Settings
Most browsers display the <caption> element with the following default values:
<style>
table,th,td {
border:1px solid black;
}
caption {
display: table-caption;
text-align: center;
}
</style>