DHTML Lab - DHTML Diner - Element Page Coordinates, Part 2 | 7 | WebReference

DHTML Lab - DHTML Diner - Element Page Coordinates, Part 2 | 7


Determining Element Page Coordinates, Part 2
IE for Windows and TABLEs

BORDER Rendering

   
   
   
<TABLE CELLSPACING=0 BORDER=1
       CELLPADDING=0 BORDERCOLOR="MAROON">
<TR><TD WIDTH=30>&nbsp;</TD>
    <TD WIDTH=30>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD>
    <TD><IMG ID="redbox" SRC="redbox.gif"
             WIDTH="200" HEIGHT="200"></TD>
</TR>
</TABLE>

In the examples on the previous pages, and above, the tables have a CELLSPACING value of 0 (zero) which helps to obfuscate the browser rendering principles.

If we expand the cell spacing, then we can easily see how the border lines are created, as below.

   
   
   
<TABLE CELLSPACING=5 BORDER=1
       CELLPADDING=0 BORDERCOLOR="MAROON">
<TR><TD WIDTH=30>&nbsp;</TD>
    <TD WIDTH=30>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD>
    <TD><IMG ID="redbox" SRC="redbox.gif"
             WIDTH="200" HEIGHT="200"></TD>
</TR>
</TABLE>
When we spread out the cells, we see that specifying a value for the BORDER attribute causes two separate rendering principles to kick in:

  1. A border is drawn around the table. The width of the border is 1 pixel, as specified.

  2. A 1-pixel border is also drawn around every table cell.

The cell-border width, although 1 pixel, is not determined by the BORDER attribute.
   
   
   
<TABLE CELLSPACING=5 BORDER=5
       CELLPADDING=0 BORDERCOLOR="MAROON">
<TR><TD WIDTH=30>&nbsp;</TD>
    <TD WIDTH=30>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD>
    <TD><IMG ID="redbox" SRC="redbox.gif"
             WIDTH="200" HEIGHT="200"></TD>
</TR>
</TABLE>
In this final example, we see that the border drawn around the table is 5 pixels, as specified. The cell borders are still one-pixel.

Rule

When the HTML BORDER attribute is used to specify a table border, a border is drawn around the table frame equal in width to the value of the BORDER attribute.

Additional borders are drawn around every table cell. These cell borders are the table rules and they are a single pixel regardless of the BORDER attribute value.

This is the legacy BORDER rendering behavior, common to all browsers, all versions.

HTML 4 compliant browsers, however, can differentiate between the frame and the rules of a table. Our focus in this article is IE4+ for Windows, which supports both the FRAME and the RULES attributes introduced by HTML 4.

These attributes are outlined on the next page in detail.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Oct 07, 2002
Revised: Oct 07, 2002

URL: https://www.webreference.com/dhtml/diner/realpos2/4.html