caption tag in html with examples

Home » HTML » HTML Tags » caption tag in html with examples

caption tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <caption> tag is used to display as a heading of a table.
It is not mandatory tag.
<caption> tag is mentioned after the <table> tag.
You can specify only one <caption> per table.
The <caption> is displayed as a heading for the table.
Visual browsers display the <caption> centred and immediately above the <table>.
You should write the <caption> as a short description of the <table>.
The <caption> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>Caption</title>
     </head>
     <body>
     <table align="center" border="1">
     <caption>Employee Info</caption>
     <tr>
     <th>Emp ID</th>
     <th>Emp Name</th>
     </tr>
     <tr>
     <td>1001</td>
     <td>Jack Wilshere</td>
     </tr>
     <tr>
     <td>1002</td>
     <td>Thierry Henry</td>
     </tr>
     </table>
     </body>
     </html>

Demo :

In the above example, we have rendered a table with caption. We can specify one caption per table.

Caption and Style :

<html>
<head>
<title>CaptionStyle</title>
<style type="text/css">
caption
{
font-family:comic sans ms;
color:green;
font-weight:bold;
}
</style>
</head>
<body>
<table align="center" border="1" width="30%">
     <caption>Employee Info</caption>
     <tr>
     <th>Emp ID</th>
     <th>Emp Name</th>
     </tr>
     <tr>
     <td>1001</td>
     <td>Hitesh</td>
     </tr>
     <tr>
     <td>1002</td>
     <td>Harshad</td>
     </tr>
     <tr>
     <td>1003</td>
     <td>Sahil</td>
     </tr>
     </table>
</body>
</html>

Demo :

In the above example, we have rendered caption for the table. We have also applied CSS to it. We have changed color, font-family and font-weight of the caption.

Caption and Javascript :

<html>
<head><title>CaptionJavascript</title>
<style type="text/css">
caption
{
font-family:comic sans ms;
color:green;
}
<style>
<script type="text/javascript">
function createCaption()
{
var c=document.getElementById("t1").createCaption();
c.innerHTML="EmployeeInfo";
}
</script>
</head>
<body>
<table id="t1" align="center" border="1" width="30%">
     <tr>
     <th>Emp ID</th>
     <th>Emp Name</th>
     </tr>
     <tr>
     <td>1001</td>
     <td>Santi Cazorla</td>
     </tr>
     <tr>
     <td>1002</td>
     <td>Thomas Vermaelen</td>
     </tr>
     <tr>
     <td>1003</td>
     <td>Nacho Monreal</td>
     </tr>
     <tr>
<td align="center" colspan="2"><input type="button" id="b1" value="Press" 
onclick="createCaption()">
</td>
</tr>
     </table>
</body>
</html>

Demo :

In the above example, we have rendered a table and button in the last row. On click of this button the caption is created and rendered.