HTML table online course - Tables part 3

Putting an image as a background of a table has its drawbacks. Though, Internet Explorer displays the table well, Netscape Communicator will tend to repeat the image for each of the table and this results in a tiled display.

<TABLE BACKGROUND="merc.jpg" WIDTH="250" HEIGHT="150"
BORDER="2">
<TR>

<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF">Cell 1
</FONT></TD>

<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF">Cell 2
</FONT></TD>

</TR>
</TABLE>

If you are using Netscape Communicator, you might not be able to see the full picture of the car. This is because Communicator, repeats the image for each cell and the BACKGROUND attribute in <TABLE> works more like that of <TD>.
Check out a tip under the HTML and JavaScript section of Tips and Tricks, to avoid this problem or click here.

The BGCOLOR attribute is ignored if the table contains a BACKGROUND attribute with a valid URL address.

<TABLE BACKGROUND="merc.jpg" BGCOLOR="#0099FF" WIDTH="250" 
HEIGHT="150" BORDER="2">
<TR>

<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF">Cell 1
</FONT></TD>

<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF">Cell 2
</FONT></TD>

</TR>
</TABLE>

Our table above has both BACKGROUND and BGCOLOR attributes. Since the value of BACKGROUND is a valid URL, BGCOLOR will be ignored. If the background image cannot be found (the URL is invalid), the BGCOLOR attribute value is used to put a background color in the table. (In such cases, the rendering differs between I.E. and N.N.).

Now back to discussing other attributes.

The VALIGN attribute aligns the contents vertically and takes TOP, MIDDLE (not CENTER) and BOTTOM as values.

The border around the table is made via the FRAME attribute whose default is BORDER or BOX. If you don't want borders on all sides you can specify different values for FRAME. However, this attribute does not work in Netscape.

<TABLE BGCOLOR="#00CCFF" WIDTH="250" HEIGHT="150" BORDER="2"
FRAME="RHS">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP">Cell 1</TD>
<TD ALIGN="CENTER" VALIGN="TOP">Cell 2</TD>
</TR>
</TABLE>

The next session looks at designing tables with spanning columns and rows.

Now play with the code:
To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.