Advanced HTML Guide

   

Tables in HTML

   
       

Tables are the most essential item in web page layout. They allow you to arrage your text and pictures around the page as you want. You can create very interesting layouts if used well. You can embed tables inside tables if you want to create more complicated layouts

UpA Simple Table

<TABLE BORDER="1">
 <TR>
   <TD>Top Left</TD>
   <TD>Top Middle</TD>
   <TD>Top Right</TD>
 </TR>
 <TR>
   <TD>Bottom Left</TD>
   <TD>Bottom Middle</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>
Top Left Top Middle Top Right
Bottom Left Bottom Middle Bottom Right
<TABLE>
This is the start of the table. Border sets the border width at 1.
<TR>
This defines a table row.
<TD>
This stands for table data and splits the rows up into cells.
 

UpRow & Column Spanning

You can use these command to create more complicated tables.

<TABLE BORDER="1">
 <TR>
   <TD ROWSPAN="2">Left</TD>
   <TD COLSPAN="2">Top</TD>
 </TR>
 <TR>
   <TD>Bottom Middle</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>
Left Top
Bottom Middle Bottom Right
ROWSPAN
This tells the browser how many rows the current cell should take up. In the above example the cell takes up two rows which is why it takes up the whole of the left hand side of the table.
COLSPAN
This tells the browser how many columns the current cell should take up.

The cells which would have contained the words "Bottom Left" and "Top Right" are of cource left out as these spaces are being taken up by the "Left" & "Top" cells.

 

UpCell Spacing & Padding

These settings control how wide the spaces between the cells are and how much padding is put between each cell boundary and its contents.

Cell Spacing

<TABLE BORDER="1" CELLSPACING="0">
 <TR>
   <TD>Top Left</TD>
   <TD>Top Right</TD>
 </TR>
 <TR>
   <TD>Bottom Left</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>
Top Left Top Right
Bottom Left Bottom Right

From now on I will only reproduce the bits of code
that control the settings that we are looking at. The rest
of the table code is similar to that in the previous example.

<TABLE BORDER="1" CELLSPACING="10">
Top Left Top Right
Bottom Left Bottom Right

Cell Padding

<TABLE BORDER="1" CELLPADDING="0">
Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="1" CELLPADDING="10">
Top Left Top Right
Bottom Left Bottom Right
 

UpTable Borders

<TABLE BORDER="1">
Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="10">
Top Left Top Right
Bottom Left Bottom Right

The FRAME command can be used to give more precise control over which parts of the table borders are shown. These work in HTML 3.0 supporting browsers. Therefore these only work in IE4 at the moment.

<TABLE Frame=void>
Top Left Top Right
Bottom Left Bottom Right
<TABLE Frame=border>
or
<TABLE Frame=box>
Top Left Top Right
Bottom Left Bottom Right
<TABLE Frame=above>
Top Left Top Right
Bottom Left Bottom Right
<TABLE Frame=below>
Top Left Top Right
Bottom Left Bottom Right
<TABLE Frame=hsides>
Top Left Top Right
Bottom Left Bottom Right
<TABLE Frame=vsides>
Top Left Top Right
Bottom Left Bottom Right

The RULES attribute has a similar effect but allows you to specify ruled lines between the columns and rows

<TABLE RULES=none>
Top Left Top Right
Bottom Left Bottom Right
<TABLE RULES=row>
Top Left Top Right
Bottom Left Bottom Right
<TABLE RULES=cols>
Top Left Top Right
Bottom Left Bottom Right
<TABLE RULES=all>
Top Left Top Right
Bottom Left Bottom Right
 

UpTable Colours

There are a selection of commands which allow you control over how a table is coloured. For information on the Hexidecimal colour values see my Hexidecimal Colour Chart.

<TABLE BORDER="1" BGCOLOR="#00FF00">
This sets the back ground colour for the
whole table.
Top Left Top Right
Bottom Left Bottom Right
You can also set the colours for the individual cells.
<TABLE BORDER="1">
 <TR>
   <TD BGCOLOR="#FF0000">Top Left</TD>
   <TD BGCOLOR="#00FF00">Top Right</TD>
 </TR>
 <TR>
   <TD BGCOLOR="#0000FF">Bottom Left</TD>
   <TD BGCOLOR="#FFFF00">Bottom Right</TD>
 </TR>
</TABLE>
Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="1" BORDERCOLOR="#0000FF">

Not supported by Netsape 3

Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="1"
      BORDERCOLORLIGHT="#FFFF00"
      BORDERCOLORDARK="#FF0000">

Sets the light border color to yellow and the dark background color to red. Not supported by Netsape 3

Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="1"
 BACKGROUND="fadeflag.gif">
 <TR>
   <TD>Top Left</TD>
   <TD BACKGROUND="uparrow.gif">
    Top Right</TD>
 </TR>
 <TR>
   <TD>Bottom Left</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>

You can also give the table a background picture and specify individual images for each cell if you want.
IE4 & N4 only.

Top Left Top Right
Bottom Left Bottom Right
 

UpAlignment Of Tables

<TABLE ALIGN="LEFT">

<CENTER>
<TABLE BORDER="1" ALIGN="CENTER">

Table Contents

</TABLE>
</CENTER>
Netscape 3 does not support the CENTER option
so in order to centre the table put in inbetween a
<CENTER></CENTER> tag.

<TABLE ALIGN="RIGHT">

 

UpAlignment Of Table Contents

This example demonstrates the tables ALIGN & VALIGN commands
<TABLE BORDER="1">
 <TR>
   <TD ALIGN="LEFT" VALIGN="TOP">This
     text is aligned to the top
     left of the cell</TD>
   <TD VALIGN="TOP">This text is aligned
     vertically at the top</TD>
   <TD ALIGN="RIGHT" VALIGN="TOP">This
     text is aligned to the top right of
     the cell at the top right hand side
     of the table</TD>
 </TR>

 <TR>
   <TD ALIGN="LEFT">This text is aligned
     horizontally to the left</TD>
   <TD ALIGN="CENTER"
    VALIGN="MIDDLE">
     This text is aligned horizontally
     and vertically in the middle of
     the cell</TD>
   <TD ALIGN="RIGHT">This text is
     aligned horizontally to the
     right</TD>
 </TR>

 <TR>
   <TD ALIGN="LEFT"
    VALIGN="BOTTOM">This
     text is aligned to the bottom left
     of the cell at the bottom left hand
     side of the table</TD>
   <TD VALIGN="BOTTOM">This text is
     alligned vertically at the
     bottom</TD>
   <TD VALIGN="BOTTOM"
    ALIGN="RIGHT">This
     text is aligned to the bottom right
     of the cell</TD>
 </TR>
</TABLE>
This text is aligned to the top left of the cell This text is aligned vertically at the top This text is aligned to the top right of the cell at the top right hand side of the table
This text is aligned horizontally to the left This text is aligned horizontally and vertically in the middle of the cell This text is aligned horizontally to the right
This text is aligned to the bottom left of the cell at the bottom left hand side of the table This text is alligned vertically at the bottom This text is aligned to the bottom right of the cell
 

UpTable Captions

<TABLE BORDER="1">
 <CAPTION ALIGN="top">
   This is the table's top caption
 </CAPTION>
 <TR>
   <TD>Top Left</TD>
   <TD>Top Right</TD>
 </TR>
 <TR>
   <TD>Bottom Left</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>
This is the table's top caption
Top Left Top Right
Bottom Left Bottom Right
<TABLE BORDER="1">
 <CAPTION ALIGN="bottom">
   This is the table's bottom caption
 </CAPTION>
 <TR>
   <TD>Top Left</TD>
   <TD>Top Right</TD>
 </TR>
 <TR>
   <TD>Bottom Left</TD>
   <TD>Bottom Right</TD>
 </TR>
</TABLE>

A right and left option are also supported by the ALIGN attribute.
This is the table's bottom caption
Top Left Top Right
Bottom Left Bottom Right
 

UpTable Tricks

Circular Corners?

You may have noticed that some of my tables have circular corners instead of the usual square ones like the table below.

<TABLE BORDER="0" WIDTH="30%" ALIGN="CENTER"
  CELLPADDING="0" CELLSPACING="0"
  BGCOLOR="#FFFF00">
 <TR>
  <TD>
    <P ALIGN="LEFT"><IMG SRC="topleft.gif" WIDTH="15"
      HEIGHT="15" VSPACE="0" HSPACE="0"
      BORDER="0"></P>
    Table With Circular Corners
    <IMG SRC="bottomright.gif"
     WIDTH="15"
     HEIGHT="15" VSPACE="0" HSPACE="0"
     BORDER="0"
     ALIGN="RIGHT">
  </TD>
 </TR>
</TABLE>

Table With
Circular Corners

This is done by putting a gif in the corners of the table. The Quarter-Circle part of it is transparent to let the table colour show through. The other bit is white to hide the corner. All that needs to be done is adjust some of the tables parameters so that the GIFs push up right against the edges of the table.

By altering the settings and giving the GIFs a border in the example below you can see the GIFs white corners. By moving the images into the corners of the table we can produce a table that seems to have rounded corners such as the table above.

The 2 GIFs are visible in this table.

You can of cource use this technique to produce all sorts of interestingly shaped tables.


  The  
Advanced  HTML
Site
Privacy Policy
Advanced HTML Home
Copyright © 1997 - 2024
Hosted by IONOS