Cell Management within tables

It is normal to separate cells within tables.

• When you have table cells butted up to each other the cells may expand or get smaller as content is added. This is because they can interact with each other

• Therefore it is best to set up spaces between cells by using empty cells.

Division lines between cells

You can create controlled space between cells by using empty narrow coloured cells.

This can be done for both vertical and horizontal divisions between cells. these can be used for division lines between sections

The vertical dividing line between the cells on this page is a narrow 2px wide cell containing a transparent 1*1px spacer gif to keep the cell from collapsing if the adjacent columns expand.

You can make wider spacer gifs for both horizontal and vertical line dividers.

Padding and Cell Spacing

Padding is useful where you have coloured background as it keeps the text from the edge of tables

Cell spacing can be used to separate cells from each other.
This can be used as on the to show a small part of an underlying cell. It can also be used simply to separate cells for 'white space' on layout.

Table with Padding

Table with no padding , but cells spaced out

NB Remember that padding and cell spacing applies to the whole table.

In Dreamweaver you apply padding an cell spacing in the Property Inspector when the whole table is selected.

Text flow around tables

Tables can be aligned left, centre or right. This is mainly used to allow text to wrap around a table.

Left Aligned Table

Text will wrap around the right hand
side of a table that is left aligned and the other side if right aligned.

A centre aligned table

This will only allow you to put text above and below the table. The table will therefore have unfillable empty

spaces to the right and left of it as in this example.

Tables with wide borders are good for data lists

If you use CSS you can have a variety of border designs