The caption Caption tag defines the title of a table in the HTML document. The caption tag is the first tag to appear after the Most of the browsers will render the caption tag above to the table, but you can change this behavior with the CSS caption-side or text-align property. Info : The caption tag defines a caption for the table. Similarly, you can use the This tag contains both an opening caption tag and closing tag. The content is written between these two tags. The caption tag supports the global attributes and the event attributes th, td{ padding: 20px; } | Attribute | Value | Description | You can use the following properties to style an HTML caption tag. The post HTML caption Caption Tag appeared first on Share Point Anchor. tag. Only one caption can be specified for one table.
Syntax:
Sample of the HTML caption Tag:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h2>Example table with Caption</h2>
<table class="table" width="400" border="1">
<caption>Students Mark List</caption>
<thead>
<tr>
<th>Student</th>
<th>Test 1</th>
<th>Test 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Steve</td>
<td>75</td>
<td>90</td>
</tr>
<tr>
<td>Lily</td>
<td>88</td>
<td>80</td>
</tr>
<tr>
<td>Jack</td>
<td>79</td>
<td>85</td>
</tr>
</tbody>
</table>
</body>
</html>
Result:
Download Sample file:
HTML caption tag with CSS Property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #C40655;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #C40655;
padding: 3px;
}
td {
background-color: #fff;
color: #666666;
}
</style>
</head>
<body>
<h2>Example for Caption tag with CSS caption-side Property</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>This is the caption of table</caption>
<tr>
<td>Name of the Student</td>
<td>Age of the Student</td>
</tr>
<tr>
<td>Lily</td>
<td>21</td>
</tr>
</table>
</body>
</html>
Result:
Attributes:
| --- | --- | --- |
| align | | The Align attribute will helps to set the caption horizontally.
Not used in HTML5. |
| right | The table caption is placed on top and aligned to the right. |
| left | The header is placed on top and aligned to the left. |
| top | It will set the header on top and aligned to the center. |
| bottom | The table header is placed below and aligned to the center. |
Styling Methods for caption Tag:
Properties to style the visual weight/emphasis/size of the text in caption tag:
Styles to coloring the text in caption Tag:
Text layout styles for caption Tag:
Other Properties for caption Tag:
Browser Support:
Related Articles:
Share Point Anchor
Posted on • Originally published at sharepointanchor.com on
HTML <caption> Caption Tag
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)