HTML Component: caption

The HTML <caption> component represents the title of a desk and should be the primary baby of a <desk> component. A caption can introduce context for a desk, making it simpler to grasp at a look in addition to support in accessibility.

Syntax

The syntax for the <caption> component is as follows (discover the positioning earlier than the <thead> component, and instantly after the opening <desk> tag):

1

<desk>

2

  <caption>Desk Caption</caption>

3

  <thead>

4

    <tr>

5

      <th>Header 1</th>

6

      <th>Header 2</th>

7

      <th>Header 3</th>

8

    </tr>

9

  </thead>

10

  <tbody>

11

    <tr>

12

      <td>Row 1, Column 1</td>

13

      <td>Row 1, Column 2</td>

14

      <td>Row 1, Column 3</td>

15

    </tr>

16

    <tr>

17

      <td>Row 2, Column 1</td>

18

      <td>Row 2, Column 2</td>

19

      <td>Row 2, Column 3</td>

20

    </tr>

21

  </tbody>

22

</desk>

Instance

Suppose you’re constructing a web site for a small restaurant and wish to show a menu in your web site.

You select a <desk> to prepare the completely different menu objects into classes referred to as Appetizers, Entrees, and Desserts. You additionally wish to embrace a short description of the menu objects in every class.

You could possibly use the <caption> component to offer an general title to the desk, then present a short abstract of what every class comprises and provide you with one thing like the next instance:

Attributes

The <caption> component helps World Attributes in HTML and has no particular attributes. A <caption> component’s finish tag may be omitted if the caption component is just not instantly adopted by ASCII whitespace or a remark.

Content material

The content material of the <caption> component can be a brief, descriptive textual content that identifies the content material of the desk. It’s helpful for getting fast context of what information resides within the desk.

Did You Know?

• The <caption> component ought to solely be used as soon as per <desk> component.
• The position of the <caption> component is necessary. It ought to structurally be positioned earlier than the <thead> component to make sure that it’s introduced earlier than the desk content material.
• The <caption> component is usually used for accessibility functions, because it gives a approach to describe the content material of a desk for customers who could not have the ability to see the desk visually.

Be taught Extra