HTML〈caption〉Tag - Giving Title to Tables

The <caption> tag is used to give a caption or title to HTML tables. This is the correct way of giving a title to a table as per the HTML specification. Using <caption> will make it easier for machines and bots (for example web crawlers) to get an idea of the subject of the tabular data.

<table>
	<caption>F1 Singapore GP'19 Podium Finishers</caption>
	<tr>
		<th>Name</th>
		<th>Rank</th>
	</tr>
	<tr>
		<td>Sebastian Vettel</td>
		<td>1</td>
	</tr>
	<tr>
		<td>Charles Leclerc</td>
		<td>2</td>
	</tr>
	<tr>
		<td>Max Verstappen</td>
		<td>3</td>
	</tr>
</table>

• There can be only one <caption> per table.
• If used, <caption> has to be the first child within the table.

Changing Position of the Caption

By default the caption will be displayed above the table, and center aligned. However this can be changed by applying two CSS properties for the <caption> element :

• caption-side : This specifies the position where the caption is displayed. Two values are allowed for this — top and bottom.

  /* display caption to top of table */
  table caption {
  	caption-side: top;	
  }
  
  /* display caption to bottom of table */
  #rank-table-caption {
  	caption-side: bottom;
  }
  

• text-align : The alignment of the caption can be changed with this — left, center or right.

  /* align caption to left side */
  table caption {
  	text-align: left;	
  }