Working with HTML Tables, Free online HTML Tutorial, Learn HTML online for free...

You probably know already what a table is. To just remind you; a table is an arrangement of vertical columns and horizontal rows. The intersection of a row with a column is called a cell. We can add just about anything inside the cells like links, images, headings, paragraphs and lists etc.

The creation of a table in HTML is very simple and easy. A table in HTML begins with <table> and ends with </table>. Between these tags <tr> and </tr> is used to specify rows. <td> and </td> is used to specify a cell.

<table border="1">  
   <tr>
     <td>Name</td>
     <td>Age</td>
   </tr> 
   <tr>
     <td>Mr. A</td>
     <td>10 Years</td>
   </tr> 
   <tr>
     <td>Mr. B</td>
     <td>20 Years</td>
   </tr> 
   <tr>
     <td>Mr. Z</td>
     <td>60 Years</td>
   </tr> 
</table>

This HTML will be displayed as:

Name	Age
Mr. A	10 Years
Mr. B	20 Years
Mr. Z	60 Years

Note that the border attribute above specifies the thickness of the horizontal and verticles lines across the above table.

We can specify that the first row of the table is headings by using <th> and </th> tags.

<table border="1"> 
   <tr>
     <th>Name</th>
     <th>Age</th>
   </tr> 
   <tr>
     <td>Mr. A</td>
     <td>10 Years</td>
   </tr> 
   <tr>
     <td>Mr. B</td>
     <td>20 Years</td>
   </tr> 
   <tr>
     <td>Mr. Z</td>
     <td>60 Years</td>
   </tr> 
</table>

This HTML will be displayed as:

Name	Age
Mr. A	10 Years
Mr. B	20 Years
Mr. Z	60 Years

In the next lesson we will be exploring html tables in some detail.

Next >>> Lesson No. 17: Advanced HTML Tables