Table

The

....

tag is the main tag used to create a table. The tag is used to define a horizontal row. Each row may be further divided into "cells". The tag is used to define cells (or columns) in a row. Pretty simple, right? Thetags always appear withintags, which in turn are always sandwiched between the tags.

So let us create a simple table with two rows and three columns:

 

 

My First Table

 

 

    

          

             Row 1, Column 1

        R1,C2

      R1,C3

          

          

             Row 2,Column

      R2,C2

      R3,C3

    

    

 

 

You should see something like this:

Row 1,   Column 1      R1,C2      R1,C3

Row 2,   Column 1      R2,C2      R2,C3

Now let us talk attributes, the BORDER attribute which I have used above in the

tag controls the thickness, in pixels, of the border surrounding the cells in the table. If you would like to put borders, simply set BORDER="1" or any desired thickness.

Next, the WIDTH and HEIGHT attributes. These may be specified in terms of pixels or as a percentage of the browser window size. Example:

 

                                               

                                                                                   I am all alone here

   

 

If these two attributes are omitted, the height and width of the table will be automatically calculated on the basis of the size of the cells within it. And let us not forget our old friend, the ALIGN attribute, used to align the table to the left, right or centre of the page. The line of code:

 

.........

 

Would centralise the table between the right and left margins. The default value is LEFT. Internet Explorer 3.0 does not support ALIGN="CENTER" and so the entire table should be explicitly ceptred within the

....

tags.

The BGCOLOR attribute may be used to specify a background colour for the entire table. For example:

 

                                   

                                                                       This table has a red back ground

                       

 

The BGCOLOR and ALIGN attributescan also be used with theandattributes to change the background colour and alignment of individual cells or rows. It us even possible to align rows or cells vertically with the VALIGN attribute, which takes the values "TOP", "BOTTOM" or "MIDDLE".

So the line of code:

 

  

      

      I am right in the centre of this box

  

 

Would create a single cell of height and width 100 pixels, with the text placed in the center. Also Note that the default value for the VALIGN attribute is MIDDLE.

And while on the subject of thetag, the WIDTH and HEIGHT attributes can also be used to change the size of individual cells. Example:

 

  

     Big Fat man

     thin as a rake

   

 

Now that you know how to align things, we should also mention that it is possible to display images within a cell by using the tag, or change the typeface and emphasis of text using formatting tags like and , as the following example illustrates:

 

  

     

       

      

       Who says the hare always wins?

      

      

   

 

Then there are the CELLPADDING and CELLSPACING attributes of the

tag. Example:

 

 

       R1,C1

       R1,C2

 

 

       R2,C1

       R2,C2

 

 

 

 

      R1,C1

      R1,C2

 

 

     R2,C1

     R2,C2

 

 

Now, suppose we have a simple two-row, two-column arrangement, and we want to combine the two cells in the first row into a single cell. No problem ... just add the COLSPAN attribute to thetag, like this:

 

 

       Row 1

 

 

       R2, C1

       R2,C2

                 

 

You can even stretch cells vertically using the ROWSPAN attribute, like this:

 

               Column 1

    R1,C2

 

 

    R1,C2

               

 

                                                Rl,C2

Column 1

                                                        Rl,C2