Laying out your web site will be made far easier if you employ the use of tables.

A table HTML tag looks like this:

<table> <tr> <td colspan="2"> table cell contents here </td> </tr> <tr> <td width="50%">more cell contents</td> <td width="50%">more cell contents</td> </tr> </table>

Just like the image on the right tries to explain, first of all you must tell the browser that this is a table with the <table> tag next the table must have one row, this is represented with the <tr> tag (Table Row). After that each little box in the table is called a table cell represented with the <td> tag. In our example I want one long row with one cell to go over the top of the two cells beneath, we must tell the top cell that we want it to 'span' the cells with the extra information in the <td> tag: <td colspan="2"> we are just telling the table cell to span two columns (vertical cells) the horizontal version is "rowspan=x".
anything we want to go in the table cell goes next, then we close the table cell with </td>.

In our example we then have a second row, so we tell the browser that we have finished the first row with the </tr> tag and we start another one with the <tr> tag, guess what..now we have to have a table cell <td> but this time we only want it half the width of the whole table so we add the modifier width="50%", more cell contents goes here and again we close the cell with </td>. This time we dont close the row straight away, we have another table cell to go, the code is the same as the preceding cell i.e. <td width="50%"> cell contents </td>, then we can close the row with </tr>.

Seeing as this is the last row in our table we tell the browser to close the table with the </table> tag.

This is an incredibly simple table and there are a lot more things that can go in the <table> <tr> <td> tags and we'll have a closer look at those next...

Parts of Article: part |part |

top

by Pete