Table of Contents

    How to Use Table Captions in HTML: A Complete Guide

    Rumman Ansari July 05, 2024 6,464 views
    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

    Opening hours for the Example Cafe 
    
 ............................ 
  ............................ 
  

    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 </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">   </td>
	<td bgcolor="#999999" width="100" height="100">   </td>
	<td rowspan="3" bgcolor="#000000" width="100" height="100">   </td>
</tr>
<tr>
	<td bgcolor="#efefef" height="100">   </td>
	<td rowspan="2" bgcolor="#999999">   </td>
</tr>
<tr>
	<td bgcolor="#efefef" height="100">   </td>
</tr>
<tr>
	<td bgcolor="#999999" height="100">   </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">   </td>
	<td bgcolor="#999999" width="100" height="100">   </td>
	<td bgcolor="#000000" width="100" height="100">   </td>
</tr>
<tr>
	<td colspan="3" bgcolor="#efefef" height="100">   </td>
</tr>
<tr>
	<td bgcolor="#efefef" width="100" height="100">   </td>
	<td colspan="2" bgcolor="#999999">   </td>
</tr>
<tr>
	<td colspan="3" bgcolor="#efefef" height="100">   </td>
</tr>
</table>

    Live Preview