Basic Tables

When beginners hear the term 'table' being used, they usually dream up the image of something like this :

In reality, tables are far more abundantly used than simply to show data in boring layouts like that. Tables are one of the most flexible layout systems available to web-designers. In fact, you'd be hard pressed to find a professional site which doesn't make use of tables. This page is laid out in tables, and soon yours will be too, as soon as you see what's possible through them.

Basic Table Code

Tables are made up of many parts, all inside one another, which is where much of the complications come from. Thankfully, there is a very rigid and logical system for writing tables.

<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>

would create

Even though that's about as basic as a table can be, that might still look far more complicated than you're used to. Allow me to explain :

• <table> holds everything else inside. border is an attribute.
• <tr> starts a new Table Row. Rows are ended with a closing </tr>.
• <td> means Table Data, or Table Cell in other words. Each box is a cell. tds are closed similarly with a </td>.
• </table> ends the table.

Cells resize themselves if the data you put into the tds is big, and each row in a table must contain the same amount of cells, unless you use special attributes (dealt with later). You cannot put anything in a table that is not within a td and a /td - i.e. you can't start writing after a tr tag, you must put in the td first. Be careful that you close all your tags. Since the tds are contained in the trs, and they are contained in the <table>, if you forget any end tags, your whole table might be messed up (especially in the more recent browsers who are clamping down on this).

Table Attributes

You've already seen me make use of the border attribute of tables. I'll go through that and the rest now.

• border can be set to any value, for bigger borders around your tables and between your cells. Note that most tables (like the one that this page is laid out in), have their border set to 0 — i.e. invisible, with colour used to split up the cells.
• align just like most tags, tables can be aligned center, left or right
• width is used to specify how wide the table is, either in pixels or in a percentage of the screen width.

The complicated ones

Now we get to two attributes that even I had trouble with : cellpadding and cellspacing. Explained badly, these seem to be the same thing, so hopefully you get this.
    cellpadding is the space around anything in the td. For instance, in the first of these tables, cellpadding is set to 0, and in the second it is 5.

You can see in the first one that the content is right up against the border, while in the other one it has been padded out.
    cellspacing is the space between cells. The border between them is split. You'll understand this much better with an example. Again, it's 0 and 5.

The default (value it is set to if you make no change) for both of these attributes is 2.

Cell Alignment

Not only can you align the entire table to either side or to the middle, you can also align the text, or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance :

You simply put the align attribute in the td tag (or in the tr if you want to affect the whole row). Like <td align="right">.

valign means Vertical Align. In the first cell below the valign is set to bottom and in the second valign="top".

left is the default for align and middle is for valign.

Table and Cell Width

You can add the width="x" attribute into either your table tag or into individual cells. If you put it into the table tag, you'll be specifying how wide the table is on the screen, in pixels or as a percentage of the screen. Try to keep the widths under 750 pixels at most. If you're setting it as a percentage, don't forget the % mark.
    Usually cells resize themselves depending on what you've put into them, but you can directly specify how wide you want them by putting the width attribute in. This way you're specifying their width in pixels as before, or their percentage of the table that they're in. Once you've set one, the others will sort the remaining space out themselves.

Remember, anything can go inside a table cell. Images, text: the lot. You could put all your content in a table and use it to align things up or lay out charts and graphs. See what you can come up with.