How to Use Table Captions in HTML: A Complete Guide

The HTML <caption> element represents the title of a table. 

Your table may shows results for a scientific experiment, values of stocks in a particular market, or what is on television tonight or it may be the informstion of students, each table should have a caption (about table) so that visitors to your site know what the table is for.

it is good practice to give the table a formal caption using the <caption> element.

The <caption> element appears directly after the opening <table> tag; it should come before the first row:

Syntax

<table>
<caption> Opening hours for the Example Cafe </caption>
   <tr> 
 ............................ 
  ............................ 
   </tr>
</table> 
	

html code

<table style="height: 261px;" width="249" border="1">
<caption>Language and their Type </caption>
<tbody>
<tr>
	<td style="width: 116px;">Language</td>
	<td style="width: 117px;">Type</td>
</tr>
<tr>
	<td style="width: 116px;">C Programming</td>
	<td style="width: 117px;">Structured&nbsp;</td>
</tr>
<tr>
	<td style="width: 116px;">Java</td>
	<td style="width: 117px;">Object Oriented</td>
</tr>
<tr>
	<td style="width: 116px;">Php</td>
	<td style="width: 117px;">Object Oriented</td>
</tr>
<tr>
	<td style="width: 116px;">Python</td>
	<td style="width: 117px;">Object Oriented</td>
</tr>
</tbody>
</table>

Live Preview

Example of rowspan and colspan

Html code: rowspan

Spanning Rows Using the rowspan Attribute

<table border="1">
<caption> Spanning rows using the colspan attribute </caption>
<tr>
	<td bgcolor="#efefef" width="100" height="100"> &nbsp; </td>
	<td bgcolor="#999999" width="100" height="100"> &nbsp; </td>
	<td rowspan="3" bgcolor="#000000" width="100" height="100"> &nbsp; </td>
</tr>
<tr>
	<td bgcolor="#efefef" height="100"> &nbsp; </td>
	<td rowspan="2" bgcolor="#999999"> &nbsp; </td>
</tr>
<tr>
	<td bgcolor="#efefef" height="100"> &nbsp; </td>
</tr>
<tr>
	<td bgcolor="#999999" height="100"> &nbsp; </td>
</tr>
</table> 

Live Preview

Html code: colspan

Spanning Columns Using the colspan Attribute

<table border="1">
<caption> Spanning columns using the colspan attribute </caption>
<tr>
	<td bgcolor="#efefef" width="100" height="100"> &nbsp; </td>
	<td bgcolor="#999999" width="100" height="100"> &nbsp; </td>
	<td bgcolor="#000000" width="100" height="100"> &nbsp; </td>
</tr>
<tr>
	<td colspan="3" bgcolor="#efefef" height="100"> &nbsp; </td>
</tr>
<tr>
	<td bgcolor="#efefef" width="100" height="100"> &nbsp; </td>
	<td colspan="2" bgcolor="#999999"> &nbsp; </td>
</tr>
<tr>
	<td colspan="3" bgcolor="#efefef" height="100"> &nbsp; </td>
</tr>
</table> 
 

Live Preview