Adding TABLES with Composer

THIS AREA

MAIN

BASICS
Basic Tutorial

Advance Tutorial
tables
More Links
HTML
Maintaining

Beyond Tips
Composer Hints
Reviews

 

BWRS
SEARCH

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

e.g.

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

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 Table

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 4.x gives you more initial options. You can get these with 6.x if you hit Advanced edit (x)

(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)

Border

Sets the thickness in pixels of any border around all the cells

e.g.

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)

Alignment

Just as with normal text

 

Cell Padding

Defines the space between the edge of a cell and its contents
e.g.

padding 3 1 2 3 4 5 6 7 8 9

padding 12 1 2 3 4 5 6 7 8 9

Cell Spacing

Space between each cell

e.g.

spacing 3 1 2 3 4 5 6 7 8 9

spacing 12 1 2 3 4 5 6 7 8 9

 

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 columns

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

Alignment

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

e.g

This Cell the biggest in terms of content so determines the hight of the table

in this vertical alignment is set at middle as is its horizontal

..Here it is bottom

....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

e.g.

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

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

Page modified © 2002. A.Duncan BWRS