{ A destination to learn coding }

Tables

In html we can also introduce long and more complex datas. When the table increases its lenght, it is adviceable to break it down into sections.
A table can be divided into 3 parts. The head, the body and the footer.

<thead>

This tag contains all the headings of the table.


<tbody>

The body or the main content comes under this tag


<tfoot>

The footer elements sits in the tfoot tag


rowspan and colspan attributes

These attributes are used to merge 2 or more rows or columns.


Example of a long table

<table>
<thead> <!-- The head section -->

	<tr>
<!-- The first column has a rowspan of 2, ie it merges two vertical cells-->
		<th rowspan="2">Name</th>

<!-- Here the second and the third columns are merged-->		
		<th colspan="2">Average</th>
		
		<th rowspan="2">Health</th>
	</tr>
	
	<tr>
		<th>Height</th>
		<th>Weight</th>
	</tr>
	
</thead>

<tbody>	<!-- The body section -->
	
	<tr>
		<td>Andy</td>
		<td> 6.2" </td>
		<td> 50kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Roy</td>
		<td> 5.2" </td>
		<td> 48kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Meera</td>
		<td> 4.9" </td>
		<td> 45kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Rajesh</td>
		<td> 6.5" </td>
		<td> 70kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Laxmi</td>
		<td> 5.4" </td>
		<td> 55kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Rafiq</td>
		<td> 6.2" </td>
		<td> 65kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Lucky</td>
		<td> 4.8" </td>
		<td> 50kg </td>
		<td> Good </td>
	</tr>
	
	<tr>
		<td>Rohit</td>
		<td> 5.8" </td>
		<td> 60kg </td>
		<td> Good </td>
	</tr>
	
<tbody>

<tfoot>  <!-- The foot section -->
	<tr> 
		<td>Average</td>
		<td></td>
		<td></td>
		<td>  </td>
	</tr> 
</tfoot> 

</table>
			
See output
learn css