HTML: <caption> tag
In this series of learning HTML, we will teach you how to use an HTML caption tag with proper syntax and lots of examples. Let’s start on the HTML caption tag.
Description of HTML caption tag
The HTML caption
tag is used to add a caption to an HTML table. The caption
tag should be inserted immediately after the opening table
tag, and the text within the tag will be displayed above the table.
Here’s an example of how to use the caption
tag in HTML:
<table>
<caption>This is a table of data</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
In this example, the caption
tag defines a caption for the table of data. When rendered in a web browser, it might look something like this:
This is a table of data
Column 1 | Column 2 |
---|---|
Data 1 | Data 2 |
Data 3 | Data 4 |
Note that the caption
tag is optional, and not all tables require a caption. If a caption is not provided, the table will still render correctly. However, if a caption is provided, it should be concise and descriptive, and should accurately reflect the content of the table.
Syntax of HTML caption tag
The HTML <caption>
tag is used to define a table caption. The syntax of the <caption>
tag is as follows:
<table>
<caption>Table caption goes here</caption>
<thead>
<!-- Table header content -->
</thead>
<tbody>
<!-- Table body content -->
</tbody>
</table>
Here, the <caption>
tag is used to define the caption for the table, which typically appears above or below the table. The caption should provide a brief summary of the contents of the table.
The <caption>
tag is typically used in conjunction with the <table>
tag, which is used to define an HTML table. The <table>
tag may also include other elements, such as <thead>
and <tbody>
, to define the structure of the table.
Example:
<table>
<caption>Top selling products</caption>
<thead>
<tr>
<th>Product</th>
<th>Units sold</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td>1000</td>
</tr>
<tr>
<td>Product B</td>
<td>750</td>
</tr>
<tr>
<td>Product C</td>
<td>500</td>
</tr>
</tbody>
</table>
In this example, the <caption>
tag is used to define the caption for the table as “Top selling products”. The table includes a header row (<thead>
) and a body section (<tbody>
) that contains information about the top selling products.
Global Attributes
The caption
tag in HTML is used to provide a title or caption for a table. Here are some examples of global attributes that can be used with the caption
tag:
class
: Specifies one or more class names for an element. Multiple class names should be separated by spaces.id
: Specifies a unique ID for an element. This can be used to identify the element in JavaScript or CSS.style
: Specifies inline CSS styles for an element.title
: Specifies extra information about an element. This is typically displayed as a tooltip when the user hovers over the element.
Here’s an example of how these attributes can be used with the caption
tag:
<table>
<caption class="table-caption" id="table-title" style="font-size: 18px;" title="This is a table caption">Sales Data</caption>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</table>
In this example, the class
, id
, style
, and title
attributes are all used with the caption
tag to provide additional information about the table caption. The class
attribute specifies a class name that can be used to style the caption with CSS. The id
attribute provides a unique identifier for the caption that can be referenced by other elements on the page. The style
attribute sets a font size of 18 pixels for the caption. Finally, the title
attribute provides extra information about the caption that is displayed as a tooltip when the user hovers over it.
Event Attributes
The caption
tag in HTML doesn’t have any specific event attributes that are unique to it. However, since it is a child element of the table
tag, it can inherit some of the event attributes from its parent.
Here are some examples of event attributes that can be used with the table
tag and can apply to the caption
element:
onclick
: Specifies a JavaScript function to execute when the user clicks on the table.onmouseover
: Specifies a JavaScript function to execute when the user moves the mouse over the table.onmouseout
: Specifies a JavaScript function to execute when the user moves the mouse out of the table.onload
: Specifies a JavaScript function to execute when the table is finished loading.
Here’s an example of how these event attributes can be used with the table
tag and inherited by the caption
element:
<table onclick="alert('You clicked on the table!')" onmouseover="changeBackground('red')" onmouseout="changeBackground('white')" onload="console.log('Table loaded.')">
<caption>Sales Data</caption>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</table>
In this example, the onclick
, onmouseover
, onmouseout
, and onload
event attributes are used with the table
tag. These attributes will apply to the entire table, including the caption
element. The onclick
attribute will execute an alert message when the user clicks on the table. The onmouseover
attribute will change the background color of the table to red when the user moves the mouse over it. The onmouseout
attribute will change the background color back to white when the user moves the mouse out of the table. Finally, the onload
attribute will log a message to the console when the table is finished loading.
Other Attributes
The caption
tag in HTML has the following non-global and non-event attributes:
align
: Specifies the horizontal alignment of the caption within the table. This attribute can have one of three values: “left”, “center”, or “right”.valign
: Specifies the vertical alignment of the caption within the table. This attribute can have one of three values: “top”, “middle”, or “bottom”.style
: Specifies one or more CSS styles to apply to the caption element. This can be used to change the font size, color, background color, or other properties of the caption.
Here’s an example of how these attributes can be used with the caption
tag:
<table>
<caption align="center" valign="bottom" style="font-size: 24px; color: blue; background-color: yellow;">Sales Data</caption>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</table>
In this example, the align
, valign
, and style
attributes are used with the caption
tag. The align
attribute centers the caption horizontally within the table. The valign
attribute aligns the caption to the bottom of the table. The style
attribute applies three CSS styles to the caption: a font size of 24 pixels, a blue text color, and a yellow background color. This results in a caption that is centered horizontally, aligned to the bottom, and has a larger font size, blue text color, and yellow background color.
Notes on HTML caption tag
Here are some important notes to keep in mind when using the caption
tag in HTML:
- The
caption
tag should be used immediately after the opening<table>
tag and before any<thead>
,<tbody>
, or<tfoot>
tags. - The
caption
tag should be used only once per table. If you use multiplecaption
tags, only the first one will be displayed. - The
caption
tag should be used to provide a brief, descriptive title for the table. It should not be used for long descriptions or explanations. - The
caption
tag is not required for a table to be valid, but it is recommended for accessibility purposes. - The
align
andvalign
attributes of thecaption
tag have been deprecated in HTML5 and should be avoided. Instead, you can use CSS to align the caption within the table. - The content of the
caption
tag is displayed above or below the table, depending on thevalign
attribute value, and centered horizontally within the table, unless you use CSS to override the default alignment. - The
caption
tag can contain text, images, or other HTML elements, but should not contain interactive elements like links or form controls. - When using the
caption
tag, it’s important to consider how it will affect the layout and readability of the table, especially on small screens or when the table contains many rows or columns.
Browser Compatibility
The HTML caption tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML caption tag
HTML 4.01 Transitional Document
Here’s an example of how the caption
tag can be used in an HTML 4.01 Transitional document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Table with Caption</title>
<style type="text/css">
caption {
font-size: 1.2em;
color: #333;
background-color: #f5f5f5;
padding: 0.5em;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$45,000</td>
<td>$9,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example, the caption
tag is used to provide a brief, descriptive title for the table. The style
element is used to apply some basic CSS styles to the caption, including a larger font size, a dark gray text color, a light gray background color, some padding, and center alignment.
The table
element is used to define the table, with separate thead
, tbody
, and tfoot
elements to define the table header, body, and footer respectively. The th
and td
elements are used to define table cells with headers and data, respectively. Finally, the CSS styles are used to define the border, padding, and alignment of the table and its cells.
When rendered in a web browser, this example produces a table with a caption at the top, and separate sections for the header, body, and footer, each with its own styles and content. The caption is centered and styled to stand out from the rest of the table, making it easier to read and understand.
XHTML 1.0 Transitional Document
Here’s an example of how the caption
tag can be used in an XHTML 1.0 Transitional document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table with Caption</title>
<style type="text/css">
caption {
font-size: 1.2em;
color: #333;
background-color: #f5f5f5;
padding: 0.5em;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$45,000</td>
<td>$9,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example, the caption
tag is used to provide a brief, descriptive title for the table. The style
element is used to apply some basic CSS styles to the caption, including a larger font size, a dark gray text color, a light gray background color, some padding, and center alignment.
The table
element is used to define the table, with separate thead
, tbody
, and tfoot
elements to define the table header, body, and footer respectively. The th
and td
elements are used to define table cells with headers and data, respectively. Finally, the CSS styles are used to define the border, padding, and alignment of the table and its cells.
When rendered in a web browser, this example produces a table with a caption at the top, and separate sections for the header, body, and footer, each with its own styles and content. The caption is centered and styled to stand out from the rest of the table, making it easier to read and understand.
XHTML 1.0 Strict Document
Here’s an example of how the caption
tag can be used in an XHTML 1.0 Strict document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table with Caption</title>
<style type="text/css">
caption {
font-size: 1.2em;
color: #333;
background-color: #f5f5f5;
padding: 0.5em;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$45,000</td>
<td>$9,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example, the caption
tag is used to provide a brief, descriptive title for the table. The style
element is used to apply some basic CSS styles to the caption, including a larger font size, a dark gray text color, a light gray background color, some padding, and center alignment.
The table
element is used to define the table, with separate thead
, tbody
, and tfoot
elements to define the table header, body, and footer respectively. The th
and td
elements are used to define table cells with headers and data, respectively. Finally, the CSS styles are used to define the border, padding, and alignment of the table and its cells.
When rendered in a web browser, this example produces a table with a caption at the top, and separate sections for the header, body, and footer, each with its own styles and content. The caption is centered and styled to stand out from the rest of the table, making it easier to read and understand.
XHTML 1.1 Document
Here’s an example of how the caption
tag can be used in an XHTML 1.1 document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table with Caption</title>
<style type="text/css">
caption {
font-size: 1.2em;
color: #333;
background-color: #f5f5f5;
padding: 0.5em;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>Sales Data</caption>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$3,000</td>
</tr>
<tr>
<td>March</td>
<td>$20,000</td>
<td>$4,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$45,000</td>
<td>$9,000</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example, the caption
tag is used to provide a brief, descriptive title for the table. The style
element is used to apply some basic CSS styles to the caption, including a larger font size, a dark gray text color, a light gray background color, some padding, and center alignment.
The table
element is used to define the table, with separate thead
, tbody
, and tfoot
elements to define the table header, body, and footer respectively. The th
and td
elements are used to define table cells with headers and data, respectively. Finally, the CSS styles are used to define the border, padding, and alignment of the table and its cells.
When rendered in a web browser, this example produces a table with a caption at the top, and separate sections for the header, body, and footer, each with its own styles and content. The caption is centered and styled to stand out from the rest of the table, making it easier to read and understand. Note that in an XHTML 1.1 document, the syntax is slightly different, with a required XML declaration at the beginning, and a different DOCTYPE declaration that points to the correct DTD.