The <caption> element in HTML provides a title or description for a table. It is always placed directly inside the <table> element, before any <thead>, <tbody>, or <tr> elements. The <caption> is typically used to describe the content or purpose of the table, making it more accessible, especially for screen readers.
Caption is usually displayed at the top of the table by default, but it can be styled with CSS to appear elsewhere. It improves accessibility by helping users understand the context of the table. Even though it is optional , adding a <caption> is recommended when the table contains data that could benefit from a title.
add-caption-to-table.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table with Caption</title> <style> table { width: 50vw; border-collapse: collapse; } table, th, td { border: 1px solid black; } caption { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; } </style> </head> <body> <h1>HTML Table Example with a Caption</h1> <table> <caption>Monthly Sales Report</caption> <thead> <tr> <th>Product</th> <th>Sales (Units)</th> <th>Revenue ($)</th> </tr> </thead> <tbody> <tr> <td>Product A</td> <td>600</td> <td>2600</td> </tr> <tr> <td>Product B</td> <td>400</td> <td>1700</td> </tr> <tr> <td>Product C</td> <td>300</td> <td>800</td> </tr> </tbody> </table> </body> </html>
<caption>Monthly
Sales Report</caption>:
The caption "Monthly Sales Report" is displayed above the table,
giving context to the data inside the table and it is styled to stand out with
a bold font and a slight margin from the table.
Previous Next Home
No comments:
Post a Comment