to home page

Free music!

Adding TABLES with Composer





Basic Tutorial

Advance Tutorial

More Links

Beyond Tips

Composer Hints







In-terms of web page design, tables are probably the most important skill you need to master. Tables allow you to control the overall layout of a web page as seen on any size screen as well as position and control the display of blocks of text or images.

As we've mentioned before basic text and images on webpages will simply warp to fit the size of browser window

This means that if you try to create a good layout on your machine like this

Then the layout effect could be ruined on another size window


Click here to see an example of this in practice

Tables allow you to stop this warping and also give extra control to the layout

Here is an example from the links page (we've kept a border so you can see the compartments or cells - but you can make this invisible

NCSA (at UIUC) Beginner's Guide to HTML

The National Center for Supercomputing Applications at the University of Illinois Beginner's Guide to HTML. Superb online tutorial with downloadable sections. Well worth the visit
HTML an Interactive Tutorial for Beginners.
Another superb tutorial site on how to get started at Explains with ease how to make your own site from beginning to end.

See how this 2 by 2 table neatly boxes text and graphics into individual cells. The size of each cell is fixed. You can also alter the colour or background of each cell or the table as a whole relative the page. For example


We also use tables to control the layout of our page. We divide the page up into a cell for the menu and one for the bulk of the page with a small gutter cell between. The whole table is limited to 680 pixels across (see our webpage advice tutorial as to why that was chosen)

Click here to see our page layout explained further

Table basics

Cells that run across in a table (i.e. the yellow and blue ones in the table above are called rows. The vertical sequence of cells (e.g. the red and yellow) are called columns.

Creating a TableBack to top

This can be done in 2 ways.

Either click table icon or click on insert -> table.

With composer 6.x you get a simplistic menu

composer 6.x table menu

Composer 4.x gives you more initial options. You can get these with 6.x if you hit Advanced edit (x)

composer 4.x table menu

(1) In both cases just specify the size of your table in rows and columns you want on your table and hit OK. We'll explain the other options later

You should see your basic table.

Inserting text and graphics

This is easy.

Just left click over the target cell and begin typing, adding image etc. - just as before

Altering tables

The whole table

Remeber those other options.

Well you can either select them when creating the table or by right click over table and selecting table properties (you can just click over a cell too and select cell properties and then select the table Tag)

In both initial menues you can set the following

Table Width
specifies minimum width for table either in pixels or percentages (e.g.. If select 100% will fill whole width of screen)
Sets the thickness in pixels of any border around all the cells

border of 3
border of 10

With composer 4.x you have direct choice of these other options (2-4) at set up (6.x users can get the same if they click Advanced edit (x) and select the attribute either predefine (below (i)) or define additional ones (ii)


Just as with normal text
Cell Padding
Defines the space between the edge of a cell and its contents
padding 3
padding 12

Cell Spacing
Space between each cell
spacing 3
spacing 12


Table Height
specifies the minimum height

You can set the table background as well.

With 4.x just use the table background area on the menu (4) where you can define either a colour or background image. 6.x users need to set the bgcolor attribute via the pull down attribute menu (ii)

Editing cells, rows and columnsBack to top

You can define specific functions for rows columns or even individual cells

Right clicking over target cell and select either cell, row or column properties (alternatively click table properties, then click cell tab

Most functions are similar to the ones used to define the tables above (background, width etc.)

Here are the major other ones

vertical alignment is useful if the contents of the cell on one side of the target cell is high vertically then you can set position of the information in the target cell.

Horizontal alignment is just like for normal text

This Cell
the biggest
in terms of
content so
hight of the
in this vertical alignment
is set at middle as is its horizontal
..Here it is
....Here it
is top
Cell Span
Most tables are simple squares (e.g. 3 x 4 or 2 x 2). However you might want a table with unequal no of cells



This table has 3 cells. The one on the left spans 2 rows

Width & Height
specifies minimum width and height for cell either in pixels or percentages (e.g.. If select 50% will fill 50% of width of table)
Background Options
sets cell background

Inserting and deleting Rows and columns and cells

Simply right click on a cell and select table insert/insert. You are then given options to insert row, column or cell.

You can delete things in the same fashion

You can do the same from the table menues at the top

Back to top


terms & conditions copyright © 1999-2003 legal notices
contact us link to us

Page modified © 2002. A.Duncan BWRS