- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.