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
<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.
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.
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 |
|
<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 |
|
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 |
|
<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.
|
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 |
|
<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 |
|
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.
Privacy Policy
Advanced HTML Home
Copyright © 1997 - 2024
Hosted by IONOS
|