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

AttributeDescriptionHtml Compatibility
        AlignThe 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:



ADVERTISEMENT
ADVERTISEMENT