The caption-side property is used to specify the position of a table. Let's create a Web page, named caption.html to specify the position of the caption of a table.
<!doctype html>
<head>
<title>Table caption </title>
<style type="text/css">
table,td,th{
border:1px solid black;
}
caption
{
caption-side:top;
border:2px solid black;
}
</style>
</head>
<body>
<h1 style="color:greeen;">Working with table Caption.</h1>
<table>
<caption>Table no. 1:Showing values of the caption-side property </caption>
<tr><th>value</th>
<th>description</th>
</tr>
<tr>
<td>top</td>
<td>defines a caption on the top of a table</td>
</tr>
<tr><td>inherit</td>
<td>specifies that the value of caption-site property is inherited from its containing element </td>
</tr>
<tr>
<td>bottom</td>
<td>define a caption on the bottom of a table</td>
</tr>
</table>
</body>
</html>
The output of the above Webpages:
<!doctype html>
<head>
<title>Table caption </title>
<style type="text/css">
table,td,th{
border:1px solid black;
}
caption
{
caption-side:top;
border:2px solid black;
}
</style>
</head>
<body>
<h1 style="color:greeen;">Working with table Caption.</h1>
<table>
<caption>Table no. 1:Showing values of the caption-side property </caption>
<tr><th>value</th>
<th>description</th>
</tr>
<tr>
<td>top</td>
<td>defines a caption on the top of a table</td>
</tr>
<tr><td>inherit</td>
<td>specifies that the value of caption-site property is inherited from its containing element </td>
</tr>
<tr>
<td>bottom</td>
<td>define a caption on the bottom of a table</td>
</tr>
</table>
</body>
</html>
The output of the above Webpages:
No comments:
Post a Comment