Home Basics Tables Music Make a Page
Images Colors Tables 2 Frames Frame Examples
Feedback Colors 2 Lists Tips Common Problems
Links Mailing List About
Terrashare
Tell A Freind About 
AllAdvantage
Articles Scripts Vote for my new Banner All HTML Tags
Make Connors Web Guide my home page
1
How to make Tables
Part 1 of 2
 
Tables can be your best friend or your worst enemy.  You can make them very easy to use or complicated, but either way they are very useful and powerful.  I personal love to use frames due to the fact that I can make the page look how I want it.  If you were to look at the source code of my web page, you will see that I use tables and nested tables (tables inside of tables).  
NOTE: Not ALL browsers interpret tables, and not ALL browsers interpret them in the same way! 

I found it easier to make the tables and show you the code then to try to explain how to do the tables, but I will explain the tags for you.

.
are your opening and closing tags.  There are several tags that will be inserted into your tags.  The are as follows:

Back Top

 
TAG

Description

Example

Align specifies alignment of the
tables in the browser's window
align="left/center
/right"
Width specifies the width of the
table in pixels or percentage
width="XXX" or
width="XX%"
Border Specifies the width (in pixels)
of the border around table
border="XXX"
Cellspacing is the spacing between cells cellspacing="XXX"
Cellpadding is the space between a
cell and its contents
cellpadding="XXX"
Bgcolor Is the color of the table's
background (click here for
more info)
bgcolor="color"
Bordercolor is the color of the tables
borders
bordercolor="blue"
All of the above tags will go into your tag.  An example
bgcolor="blue" bordercolor="green">

Back Top,

Cell Tags

, These are to define the text in each cell. text
align specifies the horizontal alignment of the cells content align="left/
center/right"
valign specifies the vertical alignment of the cell's content valign="top/middle/
bottom/baseline"
colspan is the number of rows spanned by this cell colspan="XXX"
rowspan is the number of rows spanned by this cell rowspan="XXX"
, is to define a header cell in a row of table
is to define a table row
An example of the above tags would be:

text


Back Top

Lets take a look at some examples.

 

A basic 3x2 Table
A B C
D E F

 
  
  
  
 
 
  
  
  
 
A B C
D E F

Back Top
Two Demonstrations of
rowspan
Item 1 Item 2 Item 3
Item 4 Item 5

 
  
  
  
 
 
  
  
 
Item 1Item 2Item 3
Item 4Item 5

Back Top
Demonstration of colspan
Item 1 Item 2
Item 3 Item 4 Item5

 
  
  
 
 
   
  
  
 
Item 1Item 2
Item 3Item 4Item 5

Back Top
Demonstration of
Headers
Head 1 Head 2 Head 3
A B C
D E F

 
  
  
  
 
 
  
  
  
 
 
  
  
  
 
Head1Head2 Head3
A BC
D EF
 

Back Top
Demonstration
of Colspan and Headers
Header 1 Header 2
A B C D
E F G H

 
  
  
 
 
  
  
  
    
 
        
  
  
  
    
 
Head1Head2
A B C D
EFG H

Back Top
Demonstration of
multiple headers, colspan
Head 1 Head 2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H

 
  
  
 
  
  
    
 
   
 
 
  
  
  
    
 
 
  
  
  
    
 
Head1Head2
Head 3 Head 4Head 5Head 6
ABC D
E F G H


Back Top
Demonstration of side
headers
Head 1 Item 1 Item 2 Item 3
Head 2 Item 4 Item 5 Item 6
Head 3 Item 7 Item 8 Item 9

 
  
  
  
 
 
  
  
  
 
 
  
  
  
 
Head1Item 1Item 2 Item 3
Head2Item 4Item 5Item 6
Head3Item 7Item 8 Item 9

Back Top
Demonstration of side
headers, rowspan
Header 1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Header 2 Item 9 Item 10 Item 11 Item 12

 
  
  
  
  
  
 
 
  
  
  
 
 
  
  
  
  
 
Head1Item 1Item 2 Item 3 Item 4
Item 5 Item 6Item 7 Item 8
Head2Item 9Item 10Item11Item 12

Back Top
Sample table using
all of thes
e
    Average 
  Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002

       
  
  
 
  
       
  
  
 
 
    
  
   
  
  
 
       
  
  
  
 

  
Average

  
HeightWeight
GenderMales1.90.003
Females1.70.002

Back Top
Clever uses of rowspan
colspan
A 1 2
3 4
C D

 
  
  
  
 
 
  
  
 
 
   
  
 
 
 
A12
34
CD


Back Top
 
Copyright 1997-2000 Connors Web Guide
All rights reserved.

 

Subscribe to
connnorswebguide
Web space provided by:
Geocities