- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <caption> Tag
HTML <caption> tag is used to specify a caption for the <table> element. It serves as the table's title. It should be used inside the <table> tag.
There can only be one <caption> element per table. When the data in the table is unclear, the <caption> element might be useful. After defining the caption to the table element, one can describe the type of data in the table. A table caption will always be centred above a table by default. To align and position the caption, you can use the CSS properties text-align and caption-side.
Syntax
<caption> ..... </caption>
Attribute
HTML caption tag supports Global and Event attributes of HTML. A Specific attribute as well which is listed bellow.
Attribute | Value | Description |
---|---|---|
align | left right center justify |
Specifies the alignment of text content(Deprecated). |
Examples of HTML caption Tag
Bellow examples will illustrate the usage of caption tag. Where, when and how to use caption tag to give a title to a table.
Caption on Table
Let's consider the following example, where we are going to use the <caption> to give a title to a table.
<!DOCTYPE html> <html> <body> <style> table, td, th { border: 4px solid #D2B4DE; border-collapse: collapse; } </style> <table> <caption>Employee Details</caption> <tr> <th>Name</th> <th>Department</th> <th>Age</th> </tr> <tr> <td>Suma</td> <td>IT</td> <td>23</td> </tr> <tr> <td>Priya</td> <td>Development</td> <td>26</td> </tr> <tr> <td>Viswa</td> <td>BPO</td> <td>23</td> </tr> </table> </body> </html>
Caption Placement on Table
Considering another scenario where we are going to use the CSS caption-side property, this decides the position of caption element.
<!DOCTYPE html> <html> <style> caption { background: #27AE60; color: #F7F9F9; caption-side: bottom; } table, th, td { border: 2px solid #5DADE2; padding: 2px; } </style> <body> <table> <caption>TUTORIALSPOINT</caption> <tr> <th>Courses</th> <th>Price</th> </tr> <tr> <td>HTML</td> <td>100</td> </tr> <tr> <td>JAVA</td> <td>90</td> </tr> </table> </body> </html>
Caption alignment on Table
In the following example, we are going to use the CSS property to make the caption align to the left. We can use the HTML align property for this but better not to use the deprecated attributes.
<!DOCTYPE html> <html> <body> <style> table, td, th { border: 2px solid #82E0AA; } </style> <table> <caption style="text-align: left"> TFI </caption> <tr> <th>Actor</th> <th>Movie</th> <th>Age</th> </tr> <tr> <td>Pavankalyan</td> <td>Jalsa</td> <td>25</td> </tr> <tr> <td>Ram</td> <td>Hyper</td> <td>28</td> </tr> <tr> <td>Arjun</td> <td>Bunny</td> <td>26</td> </tr> </table> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
caption | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google