Caption Html

The HTML tag is use to add a caption or title to an HTML table.WHO should use it inside the element and just after the start tag. The HTML tag is use to create table captions. It is use with the label and represents the table title. Who must insert the brand after the tag the table should not contain multiple captions. The table may contain one element.

Caption Html Explain 01

<caption align = "value" ></caption> 
caption {
    display: table-caption;
    text-align: center;
}

I created a table using the caption Html tag. The first descendant of the table tag is Caption Html. The table has three columns and four rows. Row 1 of the table is defined using the first tag. It has 3 table title cells defined using tags. Row 2 – 4 Use tags to define standard table cells.

A quick explanation of HTML captions?

The <caption> tag is used to define the table title. The title must be inside the <table> element immediately after the opening (<table>) tag and must be the first child in the parent’s <table> part. Only one caption can be use on each table.

The <table> contains only the descendants of the <caption> <figure> element, you must use the <figcaption> element instead of the <caption> element. The caption of a table is aligned in the centre above a table. What can use Text-lined and caption-side features to align and place captions.

Caption Html Attributes

AttributeValueDescription
alignAligns the header horizontally. Not used in HTML5.
RightThe header is placed on top and aligned to the right.x
leftThe header is placed on top and aligned to the left.x
TopThe header is placed on top and aligned to the centre.x
BottomThe header is placed below and aligned to the centre.x
The tag supports the Global Attributes and the Event Attributes.

Warning: Do not use features that have been underestimated. The element should be styled using the CSS attribute caption-side.

Caption Html Explain 02

<table>
    <caption> Title of Table </caption>
    <tr>
        <td> Column 1 </td>
        <td> Column 2 </td>
    </tr>
    <!-- more table rows -->
</table>

Usage notes

If used, the <caption> element must be the first child of its parent <table> element.The <table> element that contains the <caption> is the only descendant of a <figure> element, you should use the <figcaption> element instead of <caption>.

The background color on the table will not include the caption. Add a background color to the <caption> element if you want the same color behind both.

The following table gives an overview of the tag usage context and version history.

Placement:Inline
Content:Inline and text
Start/End Tag:Start tag: required, End tag: required
Version:HTML 3.2, 4, 4.01, 5

An infographic of different types of captions?

The HTML tag is use to specify a title for an HTML table. Can only be use once on a table. The tag must appear immediately after the tag. Works equally well with table layouts as well as CSS-based layouts. When text is placed between open and closed tags, table captions are displayed as text.

Caption Html Explain 03

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #cccccc;
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <table>
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Caption Html Explain 04

<table>
    <caption>User Details</caption>
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

Working of Caption Tag in HTML

As before, we discussed that the caption tag is in conjunction with the table tag. It is with various features, such as general attributes, global attributes, and event attributes.

Now how these features help make the caption tag work:

  1. Align: This feature is use with some values ​​to align your captions with table references. It includes values ​​such as: left, right, top and bottom.
  2. Global Attributes: Global attributes in HTML are supported by the tag.
  • Accesskey: This element acts as a shortcut to activate or focus certain elements.
  • Dir: It is use to give the right direction to the text in the material’s content.
  • Class: Class names define CSS in a specific HTML element. One can use one or two class names for a specific element and give them CSS properties.
  • contenteditable: This feature is use to determine whether a given content can be edited or not.
  • Draggable: This is use to determine if the user can drag the given material.
  • Dropzone: This feature is related to the drag feature. It is use to copy or remove elements when dropped to a specific location.
  • Id: id to element is use to define a unique identification name for a particular element.
  • Lang: This tagging feature is use to determine which language is written. Spelt grammatically or Spell.
  • Checking: This feature says that the element is checked for its spelling and grammar.
  • Style: This is an essential feature in the caption tag to provide inline CSS property to the element.
  • Translation: The essential feature for giving details of an element, such as whether it can be translated.

Caption Html Explain 05

<table border="1">
<caption>Table caption</caption>
<tr>
<td>Left cell</td>
<td>Right cell</td>
</tr>
</table>

Caption Html Explain 06

<!DOCTYPE html>
<html>
<body>
	<h1>GeeksforGeeks</h1>
	<h2>HTML <Caption> Tag</h2>

	<table>
	<!-- Adding a caption to the table
			and aligning it to the left-->
	<caption style="text-align: left">
		Students
	</caption>
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
		<th>Age</th>
	</tr>
	<tr>
		<td>Priya</td>
		<td>Sharma</td>
		<td>24</td>
	</tr>
	<tr>
		<td>Arun</td>
		<td>Singh</td>
		<td>32</td>
	</tr>
	<tr>
		<td>Sam</td>
		<td>Watson</td>
		<td>41</td>
	</tr>
	</table>
</body>
</html>

Why do we use Caption Tag in HTML?

  • Whenever we are going to define some data in tabular format using a table. So, the primary purpose of the user is to show this data in a table with some unique headings. Such titles are display in HTML with the tag.
  • It is bound between the beginning and end tags, placed after the tag. A table should have a caption tag on the table body.

Caption Html Explain 07

<table>
    <caption>He-Man and Skeletor facts</caption>
    <tr>
        <td> </td>
        <th scope="col" class="heman">He-Man</th>
        <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
        <th scope="row">Role</th>
        <td>Hero</td>
        <td>Villain</td>
    </tr>
    <tr>
        <th scope="row">Weapon</th>
        <td>Power Sword</td>
        <td>Havoc Staff</td>
    </tr>
    <tr>
        <th scope="row">Dark secret</th>
        <td>Expert florist</td>
        <td>Cries at romcoms</td>
    </tr>
</table>
caption {
    padding: 10px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 7px 5px;
}

th {
    background-color: rgb(235, 235, 235);
}

td {
    text-align: center;
}

tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
}

tr:nth-child(odd) td {
    background-color: rgb(240, 240, 240);
}

.heman {
    font: 1.4rem molot;
   
}

.skeletor {
    font: 1.7rem rapscallion;
    letter-spacing: 3px;
}

Caption Html Explain 08

<table  width="175" border="1">
    <caption align="center">Day Type</caption>
    <tr>
      <th>Day</th>
      <th>Type</th>
    </tr> 
  </table>

HTML <caption> Tag – Syntax and Usage

The <caption> tag requires the start(opening) tag and end(closing) tag. Given below is the required syntax for the same as you can see in the code example above, we have used the <caption> tag to add a caption/title for the table. We can also add styling to the caption tag used.

Caption Html Explain 09

<caption>Some table caption text</caption>
<caption id=”header”>Some table caption text</caption>
<caption class=”header”> Some table caption text </caption>
<caption id =”header” class=”header”> Some table caption text </caption>

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

Leave a Reply

Your email address will not be published.

Education Template