When beginners hear the term 'table' being used, they usually
dream up the image of something like this :
|The best things ever — fact.
||Toy Story 2
||The Lion King
||Calvin and Hobbes
||The Far Side
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
<td>cell 1</td><td>cell 2</td>
<td>cell 3</td><td>cell 4</td>
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
border is an attribute.
<tr> starts a new Table
Row. Rows are ended with a closing
<td> means Table
Data, or Table Cell in other words. Each
box is a cell.
tds are closed
similarly with a
</table> ends the table.
Cells resize themselves if the data you put into the
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 - i.e. you can't start writing after
tr tag, you must put in the
Be careful that you close all your tags. Since
tds are contained in the
and they are contained in the
you forget any end tags, your whole table might be messed up
(especially in the more recent browsers who are clamping down
You've already seen me make use of the
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
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 :
cellspacing. Explained badly, these seem to
be the same thing, so hopefully you get this.
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.
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.
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
td tag (or in the
tr if you
want to affect the whole row). Like
valign means Vertical
Align. In the first cell below the
valign is set
bottom and in the second
left is the default for
middle is for
Table and Cell Width
You can add the
width="x" attribute into either
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 %
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
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.
when you add text into a table cell, the text's font always
goes back to the default size, face and colour. Therefore,
you need to add new font tags into every cell; which is
ridiculously time-consuming and irritating. Instead, just
write a simple stylesheet and all your text can be set in