Tables!

 

 

   
   

 

the table above:
2 columns
2 rows
green border
cell spacing of 5


Originally designed to hold Tabular data-not the best for layouts but you'll make due

 

Great for liquid design--shrink/grow proportionately to browser window size (remember pull vs push?)

 

Before designing layout--sketch on paper to determine what you need

 

Tables are composed of rows, columns and cells

 

 

<table> </table>

Opening and closing table tags

 

This is the code for the table above:

<table width="199" border="2" height="236" align="center" bordercolor="#99CC00" cellspacing="5">

 

<tr> </tr>

Table row

Row=horizontal (like rowing a boat)

 

<td> </td>

Table cells--cells are the intersection of rows (horizontal) and columns (vertical--as in architectural columns)

 

............ ROWS ..........
 

C

 

O

 

L

 

U

 

M

 

N

 

S

  
   
   
   

 

 

 

 

<table border="8" bordercolor="#99CC00">

Tables can have borders of varying color and size

Let's look at some examples of table borders

 

 

how to create a table

 

 

 

 

 

colors and tables

 

You can color the following elements:

 

 

 

 

 

  

 

 

  


Each cell is a different color, also there is one cell with a border color of white

Different browsers display table borders differently

 

cell padding and cell spacing

 

Two ways to create, control, and organize spacing in your tables.

 

Cell padding

Controls the space between the border of the cell and the contents of the cell. Envision a room with padded walls--how think is the pad?

 

Examples of cell padding

 

Cell spacing

Controls the space between each cell

 

Examples of cellspacing

 


Aligining content within a table

 

H=Default V=Default

H=Left, V=Top

 H=Center,V=Middle
H=Right, V=Bottom H=Right, V=Top H=Right, V=Middle
H=Default, V=Baseline H=Center, V=Baseline H=Right, V=Baseline

 

 

horizontal options


Default, left, center and right

 

Vertical options


Default, top, middle, bottom, baseline (baseline based on font baseline, generally follows the baseline of bordering cells)

 

Default is usually:

Horizontal-Left

Vertical-Middle

 

cell alignment overrides column specifications, columns override row specifications.

 

 

tricky spacing tricks

You can surround a table with extra space called VSpace and HSpace


This a hack. VSpace and HSpace is generally used to control spacing around images.

 

Add the required space to the opening table tag.

 

<table vspace="20" hspace="10">

 

images and tables

Images can be used as backgrounds, or as contents in cells or both.

Bottom

aligns image bottom with the bottom of the largest nearby object and Top aligns the top of the image with the top of the object

baseline

alignment is based on the imaginary lines that the characters rest on, it generally follows the baseline of bordering cells.

absolute bottom

Aligns image to lowest descender

 

 


Align = top
Align = baseline

Align = middle

Align = bottom j q g

Align = Text Top

Align = Absolute middle

Align = Absolute bottom j q g

.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.Align = Left. The text will wrap around the image.
Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around.Alignment =Right the image will stay at the margin and the text will just wrap around And keep wrapping around and around.

 


   
   

 

 

 

This is the image: See how it repeats to fill the background of the table?

 

 

 
   

 

 

 

Same table with this image as content in the second cell . You see the background because the paper image has a transparent background.

 

 

 

 
   

 

Image aligned =CENTER

 

 

 

 

 

merging and splitting cells

Sometimes you need to combine cells or split them once you've made them.

You can easily do this in the PROPERTIES INSPECTOR.

 

 

Remember the PROPERTIES INSPECTOR is context sensitive, you must click inside a cell to access this.

 

 

 

 

 

    

 

 

  

 

The middle column has been merged

 

Basic info about XHTML

(