# How do we include a table caption in HTML?

The <caption> element is used to add caption to an HTML table. A "caption" must be the first descendant of a parent "table" in an HTML document, however it can be visually positioned at the bottom of the table using CSS.

## Syntax

<caption>Table title...</caption>


The <caption> element contains global attributes and deprecated align attributes (left, right, top, bottom). This element must be used immediately after the table tag is opened as it is a table caption. If a figure needs to be captioned instead of a table use <figcaption>.

Following are the examples…

## Example

In the following example we are adding the caption to the table by default aligned to the center.

<!DOCTYPE html>
<html>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<caption>STUDENTS</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>siddarth</td>
<td>Roy</td>
<td>21</td>
</tr>
<tr>
<td>Arjun</td>
<td>Reddy</td>
<td>22</td>
</tr>
<tr>
<td>Sing</td>
<td>Roy</td>
<td>23</td>
</tr>
</table>
</body>
</html>


## Output

On executing the above script, it will create the table and the text "student" on top of the table, as we mentioned in between the <caption> tag.

## Example: Using JavaScript

Now, let us see an example of this using JavaScript −

<!DOCTYPE html>
<html>
<body>
<table id="myTable" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Siddarth</td>
<td>Roy</td>
</tr>
<tr>
<td>Arjun</td>
<td>Reddy</td>
</tr>
</table>
<form>
<input type="button" onclick="caption()" value="Click">
</form>
</body>
<script type="text/javascript">
function caption(){
var x=document.getElementById('myTable').createCaption()
x.innerHTML="<b>STUDENTS</b>"
}
</script>
</html>


## Output

When the script is executed, it will create a table along with the click button. When the click button is pressed, the caption gets triggered and displays the text "students" on top of the table.