TABLES

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 web page design 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 and holding down on button move the cursor over to create the size and dimension of your table.

Or click on table and select insert. Specify the rows and columns (the other boxes will be detailed below)

Inserting text and graphics

This is easy. Just left click over the target cell and begin typing inserting image - just as before

Editing the whole tables

you can alter the following items (either if using the insert table menu option or subsequently by right clicking over table and selecting table properties.

Alignment(1)

Just as with normal text

Border Size (1)

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

Cell Padding (1)

Defines the space between the edge of a cell and its contents

Cell Spacing(1)

Space between each cell

Width (2)

specifies minimum width for table either in pixels or percentages (e.g.. If select 100% will fill whole width of screen)

and on table properties you can set the table background (3) (as you do for the wholepage)

Editing cells

Right clicking over target cell and selecting cell properties. You get a similar menu to the tables properties one shown above. Some functions include

Background Options

sets cell background

Width

specifies minimum width for cell either in pixels or percentages (e.g.. If select 50% will fill 50% of width of table)

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

e.g..

Inserting and deleting Rows and columns and cells

Simply click on a cell and click on table and select insert row, column or cell.

You can also split cells in two using split cells via this menu. And you can set a caption to your table too !!

To select a cell, row or column click on your target and pick select.... from the table menu (you can also select rows and columns from the the left and top border- the pointer turns into black arrow. Click when on target).

Then simply select the delete icon (or select it from the edit menu)

You can do fun things with cells to enhance your pages such as this

BACK TO INTERMEDIATE MENU