Table Tags

Table Tags are used to create a table in an HTML Document. The data from the table is presented in tabular format.

1. <table>


<table> tag its define table.

Example :



<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>


<table>




<th> Name </th>


<th> Roll No. </th>







<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>








<tr>


<td> Ram </td>


<td> 102 </td>


</tr>









<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>





</body>


</html>



Output :

2. <caption>


<caption> tag defines a table caption.

Example :



<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>

<h1> The caption Element </h1>





<table>



<caption> Student Table </caption>








<th> Name </th>


<th> Roll No. </th>





<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>




</body>


</html>



Output :

3. <th>


<th> tag defines a header cell in a table.

Example :



<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The table element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>


<table>




<th> Name </th>


<th> Roll No. </th>







<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>




</body>


</html>



Output :

4. <tr>


<tr> tag defines a row in a table.

Example :


<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The table element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>


<table>




<th> Name </th>


<th> Roll No. </th> 




<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>










<tr>


<td> Ram </td>


<td> 102 </td>


</tr>











<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>








</body>


</html>


Output :

5. <td>


<td> tag defines a cell in a table.

Example :


<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The table element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>


<table>




<th> Name </th>


<th> Roll No. </th>







<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>




</body>


</html>


Output :

6. <thead>


<thead> tag A Group of Header Content is created by the Table Header Element.

Example :



<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The thead element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>



<table style="width:50%" border="1">

<thead>


<tr>


<td colspan="4"> This is the head of th table </td>


</tr>

</thead>




<th> Name </th>


<th> Roll No. </th>





<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>




</body>


</html>



Output :

7. <tbody>


<tbody> tag group the body content in a table.

Example :


<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The tbody element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>



<table style="width:50%" border="100">





<th> Name </th>



<th> Roll No. </th>

<tbody>







<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>



</tr>

<tbody>






</body>


</html>






Output :

8. <tfoot>


<tfoot> tag groups the footer content in a table.

Example :


<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The thead element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>



<table style="width:50%" border="1">

<thead>


<tr>


<td colspan="4"> This is the head of the table </td>


</tr>

</thead>

<tfoot>

<tr>

<td colspan="4"> This is the foot of the table </td>

<tr>

</tfoot>




<th> Name </th>


<th> Roll No. </th>





<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>


</tr>




</body>


</html>






Output :

9. <col>


<col> tag it is used to specifies column properties for each column within a <colgroup> element.

Example :


<!DOCTYPE html>


<html>


<head>


<title> Table Tag Example </title>

<h1> The col element </h1>




<style>


table, th, td {


border: 1px solid black;


}


</style>




<body>




<table style="width:50%" border="100">




<colgroup>


<col span="2" style="background-color:blue">

</colgroup>







<th> Name </th>



<th> Roll No. </th>







<tr>


<td> Krsna </td>


<td> 101 </td>


</tr>






<tr>


<td> Ram </td>


<td> 102 </td>


</tr>







<tr>


<td> Mohan </td>


<td> 103 </td>



</tr>






</body>


</html>





Output :