|
|
The The Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption. |
How to create HTML <caption> Tag
A table with a caption:
index.html
Example:
HTML
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Output should be:
What Type of Browsers will Support for HTML <caption> Tag
Output should be:
How to take Position table captions (with CSS)
Follow the Example.
index.html
Example:
HTML
<table>
<caption style="text-align:right">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<br>
<table>
<caption style="caption-side:bottom">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Output should be:
How to set Default CSS Settings for HTML <caption> Tag
Follow the Example.
index.html
Example:
HTML
<style>
table,th,td {
border:1px solid black;
}
caption {
display: table-caption;
text-align: center;
}
</style>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Output should be:
| How to create HTML <caption> Tag | HTML Tag |
| What Type of Browsers will Support for HTML <caption> Tag | HTML Tag |
| How to take Position table captions (with CSS) | HTML Tag |
| How to set Default CSS Settings for HTML <caption> Tag | HTML Tag |
Read Full:: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 7 months ago |
Uploaded by: | Admin |
Views: | 1 |
Ref on: | View |