How do we include a table caption in HTML?

HTML Web Development Front End Technology

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.