How to Caption an HTML table using the caption tag

In this tutorial, we will learn “how to Caption an HTML table” using the Caption tag. We will also provide you with an example so that you can have its practical knowledge.

What is Caption tag?

html

It is an HTML tag using which a Caption is added to an HTML table. By default, unlike the td tag text alignment, the caption tag adds a center-aligned caption above the table. However, if you want to align it to the left or right, text-align property of CSS can be used.

Rules to use the Caption tag

The Caption tag should conform to the below rules:

  • It is always used along with the <table> tag in HTML
  • It must always be used as the first tag after the <table> tag
  • Only one caption per table can be specified

Attributes of the Caption tag

Every HTML tag has some attributes that give it more power for functioning as per the user’s requirements. The caption tag supports following attributes:

  • Element-specific attribute: It does not have its own attributes.
  • Global attributes: It supports all Global attributes in HTML. Some of the examples of Global attributes are class, hidden, id, title, lang, and style.
  • Event Handler Content attributes: It supports all Event Handler Content attributes in HTML. With the help of an even handler content attribute you can call a script within HTML. Some of the examples of Even Handler Content attributes are onclick, oncancel, onselect, onshow, onerror, and onfocus.

Browser Support for the Caption Tagbrowsers that support caption

The Caption tag is supported by all major browsers, such as Google Chrome, Mozilla Firefox, Internet Explorer, Opera, and Safari.

Example

Here is an example showing “how to Caption an HTML table using the caption tag.” It has four rows with two columns.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly Fuel Expenses</caption>
<tr>
<th>Month</th>
<th>Expenses</th>
</tr>
<tr>
<td>January</td>
<td>1000 rupees</td>
</tr>
<tr>
<td>February</td>
<td>1050 rupees</td>
</tr>
<tr>
<td>March</td>
<td>900 rupees</td>
</tr>
<tr>
<td>April</td>
<td>1500 rupees</td>
</tr>
</table>
</body>
</html>

Read More:

Caption Element

<caption> HTML Tag

Leave a Reply

Your email address will not be published. Required fields are marked *