Tables

• Description : Learn everything there is to know about tables!
• Language : HTML
• Date Added : 2nd October, 2009

Although tables should no longer be used for the layout of a page they're extremely useful for displaying information in an organised way. First we'll look at the basic table structure:

Code :

<table border="1"> <tr> <td>First Row, First Cell</td> <td>First Row, Second Cell</td> <td>First Row, Third Cell</td> </tr> <tr> <td>Second Row, First Cell</td> <td>Second Row, Second Cell</td> <td>Second Row, Third Cell</td> </tr> </table>

Output:

First Row, First Cell	First Row, Second Cell	First Row, Third Cell
Second Row, First Cell	Second Row, Second Cell	Second Row, Third Cell

The <table> tag is used to show the start and end of a table. You can set parameters such as width, border, cellspacing etc. To start a new row of a table we use the <tr> tag, then in between these two tags goes the <td> tags, for each <td> tag there is one cell going across the row. The <tr> tag means "Table Row" and the <td> tag means "Table Data". To create a blank cell simply do not enter anything between the two <td> tags.

To define a heading in a table you can use the following code:

Code :

<table border="1"> <tr> <th>Heading One</th> <th>Heading Two</th> </tr> <tr> <td>Second Row, First Cell</td> <td>Second Row, Second Cell</td> </tr> <tr> <td>Third Row, First Cell</td> <td>Third Row, Second Cell</td> </tr> </table>

Output:

Heading One	Heading Two
Second Row, First Cell	Second Row, Second Cell
Third Row, First Cell	Third Row, Second Cell

The code is very similar, just use <th> tags instead of <td> tags. You can also make one cell span the length of two cells. The best way to think about his is to imagine merging two cells together, the code is below:

Code :

<table border="1"> <tr> <td colspan="2">First row, Cell one and Two</td> </tr> <tr> <td>Second Row, Cell One</td> <td>Second Row, Cell Two</td> </tr> </table>

Output:

First row, Cell one and Two
Second Row, Cell One	Second Row, Cell Two

This concludes the tutorial on tables. You can see working examples of all the above code here. In the next tutorial we will cover Lists and Forms

Previous		Next

Login Required