Caption Tag in HTML: The < caption > tag in HTML describes the heading of a table in the HTML text. Browsers typically make the text found above the table in the < caption > tag, but with the CSS caption-side property, we can adjust this behavior. It is also commonly known as the item < caption>.

Syntax

In HTML the < caption > tag syntax is as follows:

Output:

Attributes

AttributeDescriptionHtml Compatibility
        AlignThe Listed attribute showing how the caption aligns in the table. One of the following values may be:   Left-means the caption appears at the left- hand side of the table. Top-indicates the caption above the table shows. Right-means the caption appears at the right- hand side of the table. Upper-means the caption appears in the table below.        HTML 4.01 outdated, HTML5 obsolete (Instead, using CSS properties like text-align and caption-side)
  • The item HTML < caption > is located inside the tag < body>.
  • The tag < caption > is the first tag to come up after the tag < table>.
  • The tag <th> describes the header cells that are shown in the table as bold, center-aligned text.

  • The tag < td > specifies the table’s normal cells, which are shown as normal-weight, left-aligned text.
  • The class < table > is composed of the tags <tr>, < th >, and < td>.
  • The tag < tr > describes the rows of a line. The table must have a minimum of one row.
  • Many browsers make the < caption > tag above the line, but with the CSS caption-side property, you can adjust that conduct.

Example

Definitions on the use of < caption > tags Transitional in HTML5, HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict and XHTML 1.1 will be addressed in the tags below.

HTML5

If you have built a new HTML5 webpage, the < caption > tag may look like:

Output:

In this example of the HTML5 Document, we built a table using the tag < table>. The < caption > is the first descendent of the < table > tag. The table would have three columns and four rows.  Table Row 1 is identified using the first tag <tr>. It has three cells in the table heading identified with <th> tag. Table rows 2-4 use the tag < td > to describe normal table cells.

Example 2

Output:

Pin It on Pinterest

Share This