|
|
Tables
Please find an explanation of tables in relation to this
web site builder below.
The use of tables within the system is further explained
in detail here.
Learn your tables!
|
What is a table?
A table in its simplest form is a box on a web page with rows
and columns
The areas within rows and columns are called cells.
Click here to
see how tables are added and edited within create your website.
Why do we need tables?
Tables are useful in order to position text and images - this
is achieved by specifying how wide a table columns are and how
deep the rows are and the placement of items within these area,
in order to position elements such as images and text where you
want them.
Example:
| you cannot see it but the logo to the right and this text.... |
 |
| ...are held within a table. This gives fine
control over how the image appears in relation to the text
for example. |
Useful extra features of tables
Borders - the edge of the table and cells can be clear,
coloured, black and can also be thickened.
Revealing the table:
The same table, but with borders added:
| you cannot see it but the logo to the right and this text.... |
|
| ...are held within a table. This gives fine
control over how the image appears in relation to the text
for example. |
Now you can see how the table is built up.
Cell padding: - space added around the inside of cell borders
which therefore keeps any text or images away from them.
Example:
Using the same table: We will now switch cell padding off. Borders
are left to show you the cells.
| You cannot see it but the logo to the right and this text.... |
|
| ...are held within a table. This gives fine
control over how the image appears in relation to the text
for example. |
You can see how the text and image now touch the border, which looks
worse. Use cell padding to force them away from the border.
Cell spacing:
Cell spacing is the space between cells. We have left borders
on to show you.
Example:
| you cannot see it but the logo to the right and this text.... |
|
| ...are held within a table. This gives fine
control over how the image appears in relation to the text
for example. |
V align
The contents of a cell can be vertically aligned top mid or bottom.
Useful if you want to format a table
Example
In this example the text cell is formatted to be top and the image
middle. Borders are left to show you the cells.
|
You cannot see it but the logo to the right and this text.....
..are held within a table. This gives fine control over
how the image appears in relation to the text for example.
|
|
| |
Now both are set to top:
|
You cannot see it but the logo to the right and this text.....
..are held within a table. This gives fine control over
how the image appears in relation to the text for example.
|
|
| |
Cell background - the colour or background image of a
cell within a table.
Example The left cell has an image background, the right
cell has none set. Borders are left to show You the cells.
|
You cannot see it but the logo to the right and this text.....
..are held within a table. This gives fine control over
how the image appears in relation to the text for example.
|
|
| |
Table background - the colour or image used for the table
background as a whole (overridden within a cell, if a cell background
is used).
example The whole table has an image background but the
right cell has a white background. Borders are left to show You
the cells.
|
You cannot see it but the logo to the right and this text.....
..are held within a table. This gives fine control over
how the image appears in relation to the text for example.
|
|
| |
Nesting - You can further add to fine positioning by adding
tables within table cells - this is called nesting.
TIP: Nesting too many tables within tables causes a slower
web page and can produce browser incompatibilities. In most cases,
simply using multiple tables in rows can achieve a desired effect,
even with a complex graphical layout.
Example:
This table has another table nested in it. This gives very fine
control over positioning the text / images etc.. Borders are left
to show You the cells.
|
You cannot see it but the logo to the right and this text.....
..are held within a table. This gives fine control over
how the image appears in relation to the text for example.
|
|
|
|
