Caption Tag in HTML
Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table in the < caption > tag, but with the CSS caption-side property, we can adjust this behavior. It is also commonly known as the item < caption>.
Syntax
In HTML the < caption > tag syntax is as follows:
<body> <table> <caption>Price of Vegetable</caption> <tr> <th>Item</th> <th>Amount</th> </tr> <tr> <td>Tomato</td> <td>$2</td> </tr> <tr> <td>Potato</td> <td>$19</td> </tr> <tr> <td>Cauliflower</td> <td>$9</td> </tr> <tr> <td>Carrot</td> <td>$11</td> </tr> </table> </body>
Output:
Attributes
| Attribute | Description | Html Compatibility |
| Align | The Listed attribute showing how the caption aligns in the table. One of the following values may be: Left-means the caption appears at the left- hand side of the table. Top-indicates the caption above the table shows. Right-means the caption appears at the right- hand side of the table. Upper-means the caption appears in the table below. | HTML 4.01 outdated, HTML5 obsolete (Instead, using CSS properties like text-align and caption-side) |
- The item HTML < caption > is located inside the tag < body>.
- The tag < caption > is the first tag to come up after the tag < table>.
- The tag <th> describes the header cells that are shown in the table as bold, center-aligned text.
The tag < td > specifies the table's normal cells, which are shown as normal-weight, left-aligned text.
- The class < table > is composed of the tags <tr>, < th >, and < td>.
- The tag < tr > describes the rows of a line. The table must have a minimum of one row.
- Many browsers make the < caption > tag above the line, but with the CSS caption-side property, you can adjust that conduct.
Example
Definitions on the use of < caption > tags Transitional in HTML5, HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict and XHTML 1.1 will be addressed in the tags below.
HTML5
If you have built a new HTML5 webpage, the < caption > tag may look like:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example by www.tutorialandexample.com</title> </head> <body> <table> <caption>This is the caption for the table</caption> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data 1, Row 2</td> <td>Data 2, Row 2</td> <td>Data 3, Row 2</td> </tr> <tr> <td>Data 1, Row 3</td> <td>Data 2, Row 3</td> <td>Data 3, Row 3</td> </tr> <tr> <td>Data 1, Row 4</td> <td>Data 2, Row 4</td> <td>Data 3, Row 4</td> </tr> </table> </body> </html>
Output:
In this example of the HTML5 Document, we built a table using the tag < table>. The < caption > is the first descendent of the < table > tag. The table would have three columns and four rows. Table Row 1 is identified using the first tag <tr>. It has three cells in the table heading identified with <th> tag. Table rows 2-4 use the tag < td > to describe normal table cells.
Example 2
<!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>College Students Details</caption>
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Mob No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Himanshu Agrawal</td>
<td>9822546658</td>
</tr>
<tr>
<td>2.</td>
<td>Shivam Singh</td>
<td>7581135665</td>
</tr>
<tr>
<td>3.</td>
<td>Akriti Sharma</td>
<td>9154454581</td>
</tr>
</tbody>
</table>
</body>
</html>
Output: