Tables are defined with the <table> tag. And HTML <table> tag is supported in all major browsers and it is very easy to implement in your HTML page.
A <table> tag is divided into rows <tr> and each row is divided into data cells <td>.
<table> : It defines a table
<th> : Defines a header cell in a table
<tr>: Defines a row in a table
<td>: Defines a cell in a table
Following example will show you how to use <table> tag, <th> tag, <tr> tag & <td> tag in your html document.
<html> <head> <title>Example of Table</title> </head> <body> <center> <table BORDER="1" BORDERCOLOR="#000033" CELLPADDING="1" CELLSPACING="1" WIDTH="80%" VALIGN="MIDDLE" ALIGN="CENTER"> <th WIDTH="100%" COLSPAN="4" BGCOLOR="#3399FF">Main Header</th> <tr> <td COLSPAN="4" HEIGHT="20" ALIGN="CENTER">Details of Students</td></tr> <tr> <td ALIGN="CENTER" BGCOLOR="#339933"><b>Branch</b></td> <td ALIGN="CENTER" BGCOLOR="#339933"><B>Section</b></td> <td ALIGN="CENTER" BGCOLOR="#339933"><b>Name</b></td> <td ALIGN="CENTER" BGCOLOR="#339933"><b>Address</b></td></tr> <tr> <td ROWSPAN="4" WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Computer Science</td> <td ROWSPAN="3" WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Section-1</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Amit</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Bikaner</td> </tr> <tr> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Sumit</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Gurgaon</td> </tr> <tr> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Ankit</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Allahabad</td> </tr> <tr> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Section-2</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Anjali</td> <td WIDTH="25%" ALIGN="CENTER" BGCOLOR="#FFFFCC">Varanasi</td> </tr> </table> </body> </html>
The output of this HTML example is as follows:
With the help of above script, you can create any type of tables in HTML document.
