reptile7's JavaScript blog
Wednesday, March 18, 2009
 
Table Dump
Blog Entry #139

We continue today with our analysis of the www.time.gov Web page. As promised at the end of the previous post, we will next
(1) overhaul the www.time.gov presentation and also
(2) merge www.time.gov's usatimezonemap and zonenamesb3c96c19 image maps.

The www.time.gov tables

Last time we noted that the www.time.gov source contains no CSS at all and employs a set of four nested tables to lay out its display. Section 11.1 ("Introduction to tables") of the HTML 4.01 Specification declares, Tables should not be used purely as a means to lay out document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables. Got it, folks?

Let's first take stock of www.time.gov's tables and what they do before we get rid of them - in the discussion below I will reference these tables per their source order as tables[0], tables[1], tables[2], and tables[3], as would be returned by a var tables = document.getElementsByTagName("table") command.

My 'attribute x is valid/deprecated' statements below can be confirmed by checking the W3C's HTML 4 Index of Attributes.

One more point before we get started: when I refer to, say, the "first cell" of tables[i]'s "first row", I am referring to the first-in-source-order cell of tables[i]'s first-in-source-order row, granted that we could legitimately reference that row and cell with tables[i].rows[0].cells[0] per the DOM rows property/collection of the table object and cells property/collection of the tr object.

tables[0]

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr align="center" valign="middle"> ... </tr></table>

The width="100%" and height="100%" attributes of the outermost table and the align="center" and valign="middle" attributes of its single tr element child serve to center the www.time.gov display within the viewport (the viewing area of the browser window). These attributes are all W3C-valid except for the table's height attribute; however, the MSDN Library's and Netscape's reference materials both specify that a table element can have a height attribute, so it's safe to assume that this attribute is widely supported.

tables[0]'s only row contains one cell, which holds tables[1].

tables[1]

<table border="0" cellpadding="0" cellspacing="0"> ... </table>

This table uses Netscape's proprietary spacer element to surround the www.time.gov display with a custom 1px solid #ffcd38 border. For example, tables[1]'s first row

<tr><td colspan="3" bgcolor="#ffcd38"><spacer type="block" width="1" height="1"></td></tr>

sets the top border; the left, right, and bottom borders are set in the same way by the first cell of tables[1]'s second row, the third cell of tables[1]'s second row, and tables[1]'s third row, respectively. The tables[1] border code would not be worth discussing in detail even if the spacer element were widely supported, which it is not.

The bgcolor attribute was formerly legit for the table, tr, td/th, and body elements, but is now deprecated for all of these elements.

The second cell of tables[1]'s second row holds tables[2].

tables[2]

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00695e" background="/images/bgndteal.gif"> ... </table>

The background attribute is not valid for the table element or for the td element (see the next code snippet); it was previously valid for the body element, and only for the body element, but has now been deprecated. However, the MSDN Library (but not Netscape) says that background is OK for the table and td elements, and in practice I find that Firefox, Opera, and Safari all support background for these elements.

In any case, tables[2]'s background attribute is unnecessary given that the bgndteal.gif image is nothing more than a 32px-by-32px #00695e color block; its effect is identical to that of tables[2]'s bgcolor attribute, which at least was valid once upon a time.

Left-side decorationThe first cell of tables[2]'s first row holds the starstripe.jpg image that runs down the left side of the www.time.gov display:

<td width="21" rowspan="3" valign="top" background="/images/starstripe-bg.jpg">
<img height="416" width="21" src="/images/starstripe.jpg" alt="Welcome to" />
</td>

There are no transparent regions in the starstripe.jpg image, and thus it might seem pointless to equip starstripe.jpg's td container with a background image. If starstripe.jpg were for some reason not available, however, we would see the stretched-to-fit starstripe-bg.jpg image in its place (at least that's what happens with the browsers on my computer).

The width attribute of the td element has been deprecated.

The second cell of tables[2]'s first row holds the The Official US Time head.gif image:

<img height="30" width="438" src="/images/head.gif" hspace="4" vspace="13" alt="The Official US Time" />

We discussed the hspace and vspace attributes of the img element in the "Image Position" section of Blog Entry #15; both of these attributes are now deprecated.

tables[2]'s second row contains one cell, which holds tables[3].

The one cell of tables[2]'s third and last row holds the Privacy Statement privacy.gif and Disable/Enable Java javaoff.gif or Disable/Enable Java javaon.gif linking images at the bottom of the www.time.gov display (the preceding images and the tables[3] images shown below actually have transparent backgrounds - I've given them tables[2]'s background color to make them easier to see):

<td width="460" align="left" valign="top">
<a href="http://www.nist.gov/public_affairs/privacy.htm">
<img src="images/privacy.gif" width="208" height="11" border="0" align="left" alt="Privacy Statement" /></a>
<script language="JavaScript1.2"><!--
if(JavaOK){document.write('<a href="#" onclick="ToggleJava(this);"><img src="/images/javaoff.gif" width="186" height="11" align="right" name="IsJava" alt="Disable/Enable Java" border="0" /></a>');}//--></script></td>

The align and border attributes of the img element are now deprecated, as is the script element's language attribute - we will disentangle the IsJava img placeholder from its surrounding script later.

tables[3]

<table border="0" cellpadding="2" cellspacing="0"> ... </table>

The one cell of tables[3]'s first row holds the Please Click pleaseclick.gif image that appears directly above the mapped map2.gif image.

The map2.gif image (more precisely, its img placeholder) and its associated usatimezonemap map element are both contained by the single td element of tables[3]'s second tr element. Strangely, the map2.gif image and the usatimezonemap map are also marked up with font and b elements:

<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" color="#3c3c98"><b> ...image plus map... </b></font>

Interestingly, there are no content model violations here: the font element, although deprecated, can have a b element child according to the X/HTML Transitional DTDs, whereas the b element can have img and map element children according to the X/HTML Strict DTDs. Having said this, the above font and b elements have absolutely no effect on the map2.gif image* and usatimezonemap map and should be removed.

*I have subsequently discovered that Firefox and Safari do apply the font and/or b formatting to the img alt="Select a time zone" text when the map2.gif image is not available, but this is non-standard behavior that should not be counted on. We could reliably format the Select a time zone string if we were to recast the img element as an object element, but this is a can of worms that we're not going to open - not now, anyway.

The one cell of tables[3]'s third row holds the zonename img placeholder under the map2.gif image.

The zonenames.gif image and its associated zonenamesb3c96c19 map are both contained by the single td element of tables[3]'s fourth tr element.

The one cell of tables[3]'s fifth and last row holds the Time exhibits timeex.gif and About this service aboutthisservice.gif linking images:

<td align="center">
<a href="exhibits.html"><img border="0" height="13" width="112" src="/images/timeex.gif" hspace="10" vspace="20" alt="Time exhibits" /></a>
<a href="about.html"><img border="0" height="13" width="147" src="/images/aboutthisservice.gif" hspace="10" vspace="20" alt="About this service" /></a>
</td>

Whew - what a mess, huh? It's time to clean this baby up, and we'll do that in the next post.

reptile7
- posted by A. Peak @ 2:38 PM
Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)