HTML - Tables

HTML Tables 

HTML Tables define with <table> tag and ends with </table> tag. Normally a table have rows & columns. intersection of both column and row is called a cell. In HTML we can define Rows with the its cells. Table row defines with <tr> & </tr> tag pairs and each cell defines <td> tag.

Ex: 
<table>
   <tr>
      <td>1 - 1</td>
      <td>1 - 2</td>
      <td>1 - 3</td>
   </tr>

   <tr>
      <td>2 - 1</td>
      <td>2 - 2</td>
      <td>2 - 3</td>
   </tr>
</table>

Out put

1 - 1	1 - 2	1 - 3
2 - 1	2 - 2	2 - 3

HTML Table Headers
Each column header can be define with <th> tag. When using <th> tag most of the browsers display the text as strong and centered text.
Ex:
<table>
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
   </tr>
   <tr>
      <td>Taylor</td>
      <td>25</td>
      <td>America</td>
   </tr>
   <tr>
      <td>Mark</td>
      <td>30</td>
      <td>England</td>
   </tr>
</table>

Out put

Name	Age	Address
Taylor	25	America
Mark	30	England

Important Attributes of Table Element

1. Border
   This attribute uses to define the border of the table. By default table border gets as zero thickness.
   Ex: <table border = "1"> </table>
   
   Out put
   

   Table Border is 1



2. Colspan
   This attribute uses to merge cells in the row. This can be uses with both <th> & <td> elements.
   Ex:
   
   <table>
      <tr>
         <th>Name</th>
         <th>Age</th>
         <th colspan = "3">Address</th>
      </tr>
      <tr>
         <td>Taylor</td>
         <td>25</td>
         <td colspan = "2">Newyork</td>      
         <td>America</td>
      </tr>
      <tr>
         <td>Mark</td>
         <td>30</td>
         <td>150</td>
         <td>Wrexham</td>
         <td>England</td>
      </tr>
   </table>
   Output
   

   Name	Age	Address
   Taylor	25	Newyork		America
   Mark	30	150	Wrexham	England



3. Width
   This Attribute uses to Define the width of the table or data cell.
   Ex:
   <table width = "50"> - This creates a table of 50 pixels width
   <table width = "50%"> - This creates a table, half of the web page
   <td width = "50"> - This creates a cell of 50 pixels width