Tables

Wendy and I did this as an example to help use and understand the possibilities of tables

Terminology- Each box is a cell. Rows run left to right Columns run up and down
A number of people asked about of have had problems with tables. The idea of this page is to show how tables can be used to layout a web page.
I have used a table on this page to show what can be achieved, to help show what is happening 'underneath' I've set the cell borders as black. Usually the borders are set to zero so that they are not visible. Below I've used the same structure but with the borders hidden.  

In the section above I have merged three cells so that the text spans three columns.

  
By merging cells it is possible to change the layout of text and graphics. it can also help layout elements such as a Table of Contents.    
         

It is also possible to split cells into rows and columns. This is useful for separating smaller items or for adding colour.

 
 
     
 
 

Tables part 2

 

 This is the same table as above with the border size set to zero. Although the text has changed I have retained the structure exactly so that you can see the effect. This is the cell that described what columns do!
As you may see the structure of these early rows is very simple yet the layout is dramatically changed.
Unless set otherwise cells will 'grow' to accept all the text inserted.

Use the 'View source' option on your browser to see the code.

   I have used the cell properties -> background color to add some interest in the cells either side of this one.  
It is possible to insert a table in a cell. While this can be usefull it should be used with care. The nested table cannot 'grow' bigger than the cell it is inside. This can lead to lopsided tables and pages.    
         

This text is formatted to appear at the bottom of the cell.

 
 
     
 
 

Tables part 3

 

 This is the same table as above with the border size set to one and the borders coloured..The outside border of the whole table is set to white (the same as background) the cell borders are different colours. Although the text has changed I have retained the structure exactly so that you can see the effect. This is the cell that described what columns do!
As you may see the structure of these early rows is very simple yet the layout is dramatically changed.
Unless set otherwise cells will 'grow' to accept all the text inserted.

Use the 'View source' option on your browser to see the code.

   I have used the cell properties -> background color to add some interest in the cells either side of this one.  
It is possible to insert a table in a cell. While this can be useful it should be used with care. The nested table cannot 'grow' bigger than the cell it is inside. This can lead to lopsided tables and pages.    
         

This text is formatted to appear at the bottom of the cell.

 
 
     
 
 

It is also possible to insert a table inside a table. The red border is the outer table, the blue one the inner table. However rainbow effects like this aren't the best way.

  Dogs can't do it  
   
Dogs can't do it
Dogs can't do it
Dogs can't do it
  
 
But we can
Dogs can't do it

and for fun a Table! can you add a couple of chairs?

 
               
           
           

Home