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

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

`All Border-Related <TABLE> Attributes`

This page hosts a tool allowing you to view the rendering of all value combinations for BORDER, FRAME and RULES.

Below the buttons are two radio buttons allowing you to choose which set of functions to use to position the blue square:

Old Functions: The functions created in Part 1 of these articles and reproduced earlier in this article.
New Functions: The functions created later in this article.

In the section marked "Attribute Combinations" below, you can choose attribute-value
combinations for both outer and inner tables.
You can also make the tables single-row/single-column, to see how the absence of
cell divisions affect the rendering.

The tables will re-render to reflect your choices, as will the reference HTML
to the right of the tables.

When the blue square is re-positioned, the section marked "Resulting Calculations"
will display the calculations the functions performed to
determine where to place the blue square.

Old Functions New Functions

Attribute Combinations

Outer Table

Make multi-row/multi-cell Make single-row/single-cell

CELLSPACING= 0 1 2 4 6 Inner Table

Make multi-row/multi-cell Make single-row/single-cell

CELLSPACING= 0 1 2 4 6

Resulting Calculations

Function Calculations (Old - Part 1 functions)

Function Calculations (New - Part 2 functions)

</td>
        <td><textarea id="ta1" class="taResult"/ placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" ></td>
    </tr></table></span>
<p>You may have noticed in the <tt>TEXTAREA</tt> display just above and right, 
that we have referenced the <tt>clientLeft</tt> and <tt>clientTop</tt><br/>
properties <a href="9.html">when retrieving position in the new functions</a>.</p>
</td></tr></table><br clear="ALL"/></span>
<br clear="ALL"/><script language="JavaScript" type="text/javascript">
</script><p align="CENTER">Produced by Peter Belesis and</p>
 
All Rights Reserved. <a href="https://www.internet.com/corporate/legal.html">Legal Notices.</a><br/>
Created: Oct 07, 2002<br/>
Revised: Oct 07, 2002
<p align="CENTER"><small>URL: https://www.webreference.com/dhtml/diner/realpos2/8.html</small></p><br/><script language="JavaScript" src="realpos3g.js" type="text/javascript"/>                
                </div>
            <div id="right"><div class="image square quad" style='margin-bottom:20px;'>
    
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>
<div id="ssn_widget_container">
    <div id="ssn_widget_header">
        <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="https://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5>
    </div>
    <div id="ssn_widget_content">
<form inert id="SSN" name="populate" action="https://www.webreference.com/school-search-results.html" method="get">
	 
	 <label>Zip Code:</label>
	  <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
	 <br/><br/> 
	 <label>Subject:</label>
	  <select name="sub">
		<option value="all">- Select All Subjects -</option>
				<optgroup label="Computers and Technology">
		<option value="compapplications">Computer Applications</option>
		<option value="comeng">Computer Engineering</option>
		<option value="comscience">Computer Science</option>
		<option value="cnp" selected="selected">Computer Prog. - Software Dev.</option>
		<option value="gameprogramming">Computer Game Programming</option>
		<option value="webdesign">Web Design</option>
		<option value="webdevelopment">Web Development</option>
		<option value="internetsystems">Internet Systems</option>
        <option value="internetcertification">Internet Certification</option>
        <option value="databasedesign">Database Design and Development</option>
        <option value="infosystemsmgmt">Information Systems Management</option>
        <option value="itprojectmgmt">Information Technology Project Management</option>
		<option value="networkdesign">Network Design - Development</option>
        <option value="systemsanalyst">Systems Analyst</option>
	  </select>
	  <br/><br/>  
	  <label>Degree:</label>
	  <select name="qual">
	   <option value="all" selected="selected">- Select All Degrees -</option>
		<option value="associate">Associate's</option>
		<option value="bachelor">Bachelor's</option>
		<option value="master">Master's</option>
		<option value="doctoral">Doctoral</option>
		<option value="certificate">Certificates</option>
		<option value="diploma">Diplomas</option>
		<option value="coursework">Coursework</option>
		<option value="mba">MBA</option>
	  </select>
	<br style="clear:both;"/><br/>  
	 <input name="ct" type="radio" value="online"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Online
	  <input name="ct" type="radio" value="campus"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Campus
	  <input name="ct" type="radio" value="either" checked="checked" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Both
      
	  <br/><br/> 
	  <input type="submit" value="Submit"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />	
</form></div>
</div><div class="image square quad" style='margin-bottom:20px;'>
     
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>

<div class="articlecategorysummary">
    <iframe scrolling="no" frameborder="0" align="middle" src="https://webreference.com/sl/assetlisting/index1612-2.html?wsn=www.webreference.com&wpu=/dhtml/diner/realpos2/8.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaTeArIZ78AAHFbYwIAAAAR%20domain=None;;n=203;c=1395323;s=9530;x=7936;f=201308291521150;u=j;z=TIMESTAMP;k=https://assetform.webreference.com/controller&wpos=AssetListing&lyt=l9&mcss=https://www.webreference.com/imageserver/b2btechleadform/webreference/styles/style_email.css&css=https://www.webreference.com/hqb2b/css/qmp/qmp_default.css&title=Top%20White%20Papers%20and%20Webcasts" name="inneriframe" id="inneriframe" height="820px" width="340px;"></iframe>
</div>

</script>
</div>

</div>
        <div class="clear"></div>
        <div id="footer">
        <div id="footer_content">
    <div id="quad_bottom"class="quad" align='center' style='margin-left:auto;margin-right:auto;width:720px;'>
        
<script language="JavaScript">
	var t=displayDFPTag("lb");
	document.write(t);

</script>
    </div>
    <div class="footer_listing">
         
    </div>
    <div class="footer_listing">
        <span class="list-header">WebReference</span>
        <ul>
            <li class="first"><a href="../../../js/tips/index.html">Tip Archive</a></li>
            <li><a href="../../../about.html">About</a></li>
            <li><a href="../../../sitemap.html">Sitemap</a></li>
            <li><a href="../../../contact.html">Contact</a></li>
            <li><a href="../../../accountManagement87fb.html%3FformType=registrationForm.html">Subscribe</a></li>
        </ul>

</div>
    <div class="footer_listing">
        <span class="list-header">Topics</span>
        <ul>
            <li class="first"><a href="https://webreference.com/authoring.html">Web Authoring</a></li>
            <li><a href="../../../internet/index.html">The Internet and the Web</a></li>
            <li><a href="../../../multimedia/index.html">Multimedia</a></li>
            <li><a href="https://webreference.com/programming.html">Web Programming</a></li>
            <li><a href="../../../promotion/index.html">Website Promotion and Marketing</a></li>
            <li><a href="../../../experts/index.html">Contributors</a></li>
        </ul>
    </div>
    <div class="footer_listing">
        <span class="list-header"><a href="https://www.developer.com/"><img src="../../../img/dev.com_logo.png" alt="Developer.com"></a></span>
        <ul>
            <li class="first"><a href="../../../terms.html">Terms Of Service</a></li>
            <li><a href="../../../licensing.html">Licensing and Permissions</a></li>
            <li><a href="../../../privacy.html">Privacy Policy</a></li>
            <li><a href="../../../mediakit/index.html">Advertising</a></li>
            <li><a href="https://e-newsletters.developer.com/">Newsletters</a></li>
            
        </ul>
    </div>    <div class="footer_listing">
         
    </div>
    <div class="clear"></div>
    <div id="copyright">
        Copyright © 2017 QuinStreet Inc. All Rights Reserved.
    </div>
</div>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-48218803-1', 'auto');
    ga('send', 'pageview');

</script>

        </div>

<div id="ajax_alpha"></div>
		<div id="ajax_beta"></div>

</body>

</html>

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

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

All Border-Related <TABLE> Attributes

Attribute Combinations

Resulting Calculations

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

`All Border-Related <TABLE> Attributes`