In this tutorial, we will explore the concept of caption elements in HTML and the proper way to implement 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
<caption>Table title...</caption>
Here are some details regarding the <caption> element:
| Display | Inline |
|---|---|
| Start tag/End tag | Both start and End tag |
| Usage | Textual |
Example of <caption> Tag
We will generate a table and apply the <caption> tag to label the table as "Employee Information".
Code:
<!DOCTYPE html>
<html>
<head>
<title>Caption Tag</title>
<style>
table, td, th {
border: 3px solid gray;
border-collapse: collapse;}
</style>
</head>
<body>
<h2>Example of Caption tag</h2>
<table width="800">
<caption>Employee Details</caption>
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Ankit Pandey</td>
<td>ankit2@gmail.com</td>
</tr>
<tr>
<td>2.</td>
<td>Ashvini Kumar</td>
<td>ashvini@gmail.com</td>
</tr>
<tr>
<td>3.</td>
<td>Swati Sharma</td>
<td>swati8@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
The presented table below showcases a caption that is automatically centered at the top.
"align" Attribute
We have the option to position the caption either at the top or bottom of the table by utilizing 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 will be creating a table showcasing information about electrical devices and positioning the table title at the top as demonstrated.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Caption of HTML table aligned to top</title>
</head>
<style>
table,
td,
th {
border: 2px solid rgb(192, 88, 241);
}
</style>
<body>
<table>
<caption align="top">
Electrical Appliances
</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Brand</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>501</td>
<td>Washing Machine</td>
<td>Whirlpool</td>
<td>2</td>
<td>45,000</td>
</tr>
<tr>
<td>502</td>
<td>Refrigerator</td>
<td>LG</td>
<td>1</td>
<td>36,000</td>
</tr>
<tr>
<td>503</td>
<td>Mixer Grinder</td>
<td>Philips</td>
<td>2</td>
<td>18,000</td>
</tr>
<tr>
<td>504</td>
<td>Water Heater</td>
<td>Havells</td>
<td>5</td>
<td>30,000</td>
</tr>
<tr>
<td>505</td>
<td>Coffee Machine</td>
<td>Nespresso Vertuo Next</td>
<td>1</td>
<td>25,000</td>
</tr>
<tr>
<td>506</td>
<td>Air Conditioner</td>
<td>Voltas</td>
<td>2</td>
<td>90,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here in the result, we can observe the title of the table displayed at the table's beginning.
Demonstration 2:
We are going to create a table displaying information about stationery products and position the table caption at the lower edge of this illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table aligned to bottom in HTML </title>
</head>
<style>
table,
td,
th {
border: 1px solid rgb(23, 205, 68);
}
</style>
<body>
<table>
<caption align="bottom">
Stationery Product Details
</caption>
<thead>
<tr>
<th>Product ID</th>
<th>Product name</th>
<th>Product Brand</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Pens</td>
<td>Cello</td>
<td>1000</td>
<td>10,000</td>
</tr>
<tr>
<td>02</td>
<td>Notebooks</td>
<td>Classmate</td>
<td>150</td>
<td>4,500</td>
</tr>
<tr>
<td>03</td>
<td>Fevicol Box</td>
<td>Pidilite</td>
<td>200</td>
<td>10,000</td>
</tr>
<tr>
<td>04</td>
<td>Eraser Box</td>
<td>Apsara</td>
<td>1000</td>
<td>20,000</td>
</tr>
<tr>
<td>05</td>
<td>Water Color Set</td>
<td>Camel</td>
<td>500</td>
<td>50,000</td>
</tr>
<tr>
<td>06</td>
<td>Paintbrush Set</td>
<td>Camlin</td>
<td>250</td>
<td>3,750</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here in the result, we can observe the table heading located at the bottom of the table.
"text-align" CSS Property
We have the option to position the caption either at the top or bottom of the table by utilizing the "align" attribute.
Syntax:
text-align: left| right| center| justify;
"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 will specify the alignment of the table caption using the CSS attribute "text-align" to position the table caption to the left, right, center, and justify in the following examples.
Illustration 1:
We are going to position the caption to the left side of the table in this diagram.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table caption aligned to the left of table-1 utilizing CSS property called "text-align"</title>
</head>
<style>
table,
td,
th {
border: 1px solid rgb(248, 129, 129);
}
caption {
background-color: rgb(248, 187, 187);
}
.table1 {
text-align: left;
}
</style>
<body>
<h3>Aligning caption on the table's left side</h3>
<table>
<caption class="table1">
Student Details
</caption>
<thead>
<tr>
<th>Student ID</th>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>Arpit</td>
<td>Singh</td>
<td>18</td>
<td>Hotel Management</td>
</tr>
<tr>
<td>1002</td>
<td>Ayush</td>
<td>Khurana</td>
<td>21</td>
<td>Bachelor of Science</td>
</tr>
<tr>
<td>1003</td>
<td>Himesh</td>
<td>Kumar</td>
<td>19</td>
<td>Telecommunication Engineering</td>
</tr>
<tr>
<td>1004</td>
<td>Rakhi</td>
<td>Kapoor</td>
<td>18</td>
<td>Aeronautical Engineering</td>
</tr>
<tr>
<td>1005</td>
<td>Pooja</td>
<td>Singh</td>
<td>19</td>
<td>Fashion Designing</td>
</tr>
<tr>
<td>1006</td>
<td>Aryan</td>
<td>Kumar</td>
<td>20</td>
<td>Bachelor of Technology</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here is the result; the title of the table is displayed to the left of the table.
Illustration 2:
We are going to position the caption to the right side of the table in this diagram.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table caption aligned to the right of table-2 utilizing CSS property called "text-align"</title>
</head>
<style>
table,
td,
th {
border: 1px solid rgb(248, 129, 129);
}
caption {
background-color: rgb(248, 187, 187);
}
.table2 {
text-align: right;
}
</style>
<body>
<h3>Caption aligned on the table's right side</h3>
<table>
<caption class="table2">
Student Details
</caption>
<thead>
<tr>
<th>Student ID</th>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1007</td>
<td>Arhan</td>
<td>Khan</td>
<td>19</td>
<td>Telecommunication Engineering</td>
</tr>
<tr>
<td>1008</td>
<td>Anshuman</td>
<td>Singh</td>
<td>19</td>
<td>Electrical Engineering</td>
</tr>
<tr>
<td>1009</td>
<td>Shiva</td>
<td>Singh</td>
<td>20</td>
<td>Fashion Designing</td>
</tr>
<tr>
<td>1010</td>
<td>Rohan</td>
<td>Kumar</td>
<td>20</td>
<td>Bachelor of Technology</td>
</tr>
<tr>
<td>1011</td>
<td>Mansi</td>
<td>Kapoor</td>
<td>21</td>
<td>Automobile Engineering</td>
</tr>
<tr>
<td>1012</td>
<td>Nikita</td>
<td>Kapoor</td>
<td>19</td>
<td>Bachelor of Science</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here is the result; the table title is visible on the right-hand side of the table.
Illustration 3:
We are going to center the caption within the table in this visual representation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table caption aligned to the center of table-3 utilizing CSS property called "text-align"</title>
</head>
<style>
table,
td,
th {
border: 1px solid rgb(248, 129, 129);
}
caption {
background-color: rgb(248, 187, 187);
}
.table3 {
text-align: center;
}
</style>
<body>
<h3>Caption aligned at the center of the table</h3>
<table>
<caption class="table3">
Employee Details
</caption>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee name</th>
<th>Age</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>Henry</td>
<td>25</td>
<td>Marketing</td>
<td>50,000</td>
</tr>
<tr>
<td>112</td>
<td>David</td>
<td>28</td>
<td>Marketing</td>
<td>55,000</td>
</tr>
<tr>
<td>113</td>
<td>Emma</td>
<td>26</td>
<td>Finance</td>
<td>45,000</td>
</tr>
<tr>
<td>114</td>
<td>James</td>
<td>24</td>
<td>IT</td>
<td>42,000</td>
</tr>
<tr>
<td>115</td>
<td>Andrew</td>
<td>27</td>
<td>IT</td>
<td>57,000</td>
</tr>
<tr>
<td>116</td>
<td>Anthony</td>
<td>28</td>
<td>IT</td>
<td>58,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here is the result; the caption of the table is positioned in the middle of the table.
Illustration 4:
We will adjust the caption alignment to "justify" in this diagram.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table caption aligned to justify utilizing CSS property called "text-align"</title>
</head>
<style>
table,
td,
th {
border: 1px solid rgb(248, 129, 129);
}
caption {
background-color: rgb(248, 187, 187);
}
.table4 {
text-align: justify;
}
</style>
<body>
<h3>Caption aligned to justify</h3>
<table>
<caption class="table4">
Employee Details
</caption>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee name</th>
<th>Age</th>
<th>Department</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>117</td>
<td>Samantha</td>
<td>21</td>
<td>Finance</td>
<td>36,000</td>
</tr>
<tr>
<td>118</td>
<td>Patrick</td>
<td>30</td>
<td>Marketing</td>
<td>65,000</td>
</tr>
<tr>
<td>119</td>
<td>Jonathan</td>
<td>28</td>
<td>Marketing</td>
<td>50,000</td>
</tr>
<tr>
<td>120</td>
<td>Blake</td>
<td>28</td>
<td>Finance</td>
<td>55,000</td>
</tr>
<tr>
<td>121</td>
<td>Albert</td>
<td>25</td>
<td>IT</td>
<td>65,000</td>
</tr>
<tr>
<td>122</td>
<td>Charlie</td>
<td>36</td>
<td>IT</td>
<td>70,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here in the result, we can observe the table heading for alignment.
Attributes
Tag-specific Attributes
| Attribute | Value | Description |
|---|---|---|
| align | topbottomleftright | It aligns the caption with respect to the table. |
- bottom
- left
- right
Global Attributes
The <caption> tag provides support for the Global attributes.
Event Attributes
The <caption> tag enables the utilization of 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:
- 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.
- 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.
- align="bottom": It aligns the caption at the bottom of the table.
- align="top": It aligns the caption at the top of the table.
- 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.