The HTML tag is use to add a caption or title to an HTML table.WHO should use it inside the element and just after the start tag. The HTML tag is use to create table captions. It is use with the label and represents the table title. Who must insert the brand after the tag the table should not contain multiple captions. The table may contain one element.
Caption Html Explain 01
<caption align = "value" ></caption> caption {
display: table-caption;
text-align: center;
}I created a table using the caption Html tag. The first descendant of the table tag is Caption Html. The table has three columns and four rows. Row 1 of the table is defined using the first tag. It has 3 table title cells defined using tags. Row 2 – 4 Use tags to define standard table cells.
A quick explanation of HTML captions?
The <caption> tag is used to define the table title. The title must be inside the <table> element immediately after the opening (<table>) tag and must be the first child in the parent’s <table> part. Only one caption can be use on each table.
The <table> contains only the descendants of the <caption> <figure> element, you must use the <figcaption> element instead of the <caption> element. The caption of a table is aligned in the centre above a table. What can use Text-lined and caption-side features to align and place captions.
Caption Html Attributes
| Attribute | Value | Description |
|---|---|---|
| align | x | Aligns the header horizontally. Not used in HTML5. |
| Right | The header is placed on top and aligned to the right. | x |
| left | The header is placed on top and aligned to the left. | x |
| Top | The header is placed on top and aligned to the centre. | x |
| Bottom | The header is placed below and aligned to the centre. | x |
Warning: Do not use features that have been underestimated. The element should be styled using the CSS attribute caption-side.
Caption Html Explain 02
<table>
<caption> Title of Table </caption>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
</tr>
<!-- more table rows -->
</table>Usage notes
If used, the <caption> element must be the first child of its parent <table> element.The <table> element that contains the <caption> is the only descendant of a <figure> element, you should use the <figcaption> element instead of <caption>.
The background color on the table will not include the caption. Add a background color to the <caption> element if you want the same color behind both.
The following table gives an overview of the tag usage context and version history.
| Placement: | Inline |
| Content: | Inline and text |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | HTML 3.2, 4, 4.01, 5 |
An infographic of different types of captions?
The HTML tag is use to specify a title for an HTML table. Can only be use once on a table. The tag must appear immediately after the tag. Works equally well with table layouts as well as CSS-based layouts. When text is placed between open and closed tags, table captions are displayed as text.
Caption Html Explain 03
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<table>
<caption>Some title here</caption>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</body>
</html>Caption Html Explain 04
<table>
<caption>User Details</caption>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>Working of Caption Tag in HTML
As before, we discussed that the caption tag is in conjunction with the table tag. It is with various features, such as general attributes, global attributes, and event attributes.
Now how these features help make the caption tag work:
- Align: This feature is use with some values to align your captions with table references. It includes values such as: left, right, top and bottom.
- Global Attributes: Global attributes in HTML are supported by the tag.
- Accesskey: This element acts as a shortcut to activate or focus certain elements.
- Dir: It is use to give the right direction to the text in the material’s content.
- Class: Class names define CSS in a specific HTML element. One can use one or two class names for a specific element and give them CSS properties.
- contenteditable: This feature is use to determine whether a given content can be edited or not.
- Draggable: This is use to determine if the user can drag the given material.
- Dropzone: This feature is related to the drag feature. It is use to copy or remove elements when dropped to a specific location.
- Id: id to element is use to define a unique identification name for a particular element.
- Lang: This tagging feature is use to determine which language is written. Spelt grammatically or Spell.
- Checking: This feature says that the element is checked for its spelling and grammar.
- Style: This is an essential feature in the caption tag to provide inline CSS property to the element.
- Translation: The essential feature for giving details of an element, such as whether it can be translated.
Caption Html Explain 05
<table border="1">
<caption>Table caption</caption>
<tr>
<td>Left cell</td>
<td>Right cell</td>
</tr>
</table>Caption Html Explain 06
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML <Caption> Tag</h2>
<table>
<!-- Adding a caption to the table
and aligning it to the left-->
<caption style="text-align: left">
Students
</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Why do we use Caption Tag in HTML?
- Whenever we are going to define some data in tabular format using a table. So, the primary purpose of the user is to show this data in a table with some unique headings. Such titles are display in HTML with the tag.
- It is bound between the beginning and end tags, placed after the tag. A table should have a caption tag on the table body.
Caption Html Explain 07
<table>
<caption>He-Man and Skeletor facts</caption>
<tr>
<td> </td>
<th scope="col" class="heman">He-Man</th>
<th scope="col" class="skeletor">Skeletor</th>
</tr>
<tr>
<th scope="row">Role</th>
<td>Hero</td>
<td>Villain</td>
</tr>
<tr>
<th scope="row">Weapon</th>
<td>Power Sword</td>
<td>Havoc Staff</td>
</tr>
<tr>
<th scope="row">Dark secret</th>
<td>Expert florist</td>
<td>Cries at romcoms</td>
</tr>
</table>
caption {
padding: 10px;
caption-side: bottom;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 7px 5px;
}
th {
background-color: rgb(235, 235, 235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250, 250, 250);
}
tr:nth-child(odd) td {
background-color: rgb(240, 240, 240);
}
.heman {
font: 1.4rem molot;
}
.skeletor {
font: 1.7rem rapscallion;
letter-spacing: 3px;
}Caption Html Explain 08
<table width="175" border="1">
<caption align="center">Day Type</caption>
<tr>
<th>Day</th>
<th>Type</th>
</tr>
</table>HTML <caption> Tag – Syntax and Usage
The <caption> tag requires the start(opening) tag and end(closing) tag. Given below is the required syntax for the same as you can see in the code example above, we have used the <caption> tag to add a caption/title for the table. We can also add styling to the caption tag used.
Caption Html Explain 09
<caption>Some table caption text</caption>
<caption id=”header”>Some table caption text</caption>
<caption class=”header”> Some table caption text </caption>
<caption id =”header” class=”header”> Some table caption text </caption>
