WebDevelopersNotes logo

home-icon Home / HTML / HTML table online course – Tables part 3

HTML table online course – Tables part 3

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>
Cell 1 Cell 2

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>.

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>
Cell 1 Cell 2

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>
Cell 1 Cell 2

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

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Internet Explorer jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

In the last quarter of 2011, more than 50% of Apple's revenue came from the sale of iPhones. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy