- From: T. V. Raman <raman@Adobe.COM>
- Date: Wed, 22 Jul 1998 18:50:18 -0700 (PDT)
- To: WAI GL <w3c-wai-gl@w3.org>, Charles McCathieNevile <charlesn@sunrise.srl.rmit.edu.au>
- Cc: w3c-css-wg@w3.org, raman@Adobe.COM
This message addresses the importance of transitioning the
WWW to using CSS for complex visual layout rather than
continuing down the current hack of abusing tables.
(Tim, I'm copying you --I'm sure you'll find the attached
HTML from the CNN site appalling given your original vision
for the WWW).
(Jim (Gettys) -- thought you'd love the band-width numbers)
Dave (Ragget)-- I'm copying you on this since I'm
sure you'd be appalled by how your table spec is being
abused. I'm copying you also because whenever we have
discussed in the past, we have always gone away with the
understanding that over time the WWW will migrate to using
CSS for achieving the kind of visual effects shown here
using tables.
I'm highlighting this issue because of late
I've seen assertions of the form
"table models will be accessible via the DOM",
"screenreaders can rearrange table content"
being used to justify not moving to CSS but instead
remaining with tables for achieving this form of
visual presentation. I think believing the
above would be a serious mistake --both for accessibility,
and more importantly, from the point of view of making the
WWW scalable and universally accessible from different kinds of devices
--especially mobile devices.
The simple misuse of band-width referred to in my first
point below would itself be a show stopper --
12,600+ bytes of raw HTML (not counting gifs)
with the content request -- the forecast about 10,000 bytes
into the data stream
Hello WAI GL team--
When talking about tables in the access guidelines,
it might be useful to refer to popular (mis)uses of tables on
mainstream WWW sites that causes untold pain today and will
continue to do so in the future --
irrespective of what information
is gleened via the DOM.
As an example, I'd suggest looking at the CNN weather page--
I'll inflict the html source on this list at the end of this
message -- the rest of this message annotates the appended
HTML with the points I think that are important to focus on.
1) The attached 557 line 12,600+ bytes
of html (the byte count does not include the size of the
embedded gifs) is the response for asking what the weather
forecast was for Mountain View.
The content you care about -- the forecast --is about 10,000
bytes into the data stream.
Content wise, all it gives you is expected highs and lows, and
wind speed etc for the next four days.
Access aside, it's a ludicrous use of band-width --but
that's another rant for another day.
2) Note the multiple table instances for the various
navigation bars.
3) To locate the actual content look for the appropriate
comment. In fact the only way you can make sense of this
tag soup is to read the comments --who said HTML was not
a programming language-- or in other words, give the
world enough angle-brackets, and they will figure out a
way to implement a Turing machine.
4) The actual content of the forecast itself
is a nested table with one of the inner tables giving the
content you asked for.
5) Notice that in that "content table", individual cells
achieve further visual alignment and layout by using <BR>
tags e.g. the temperature in Fahrenheit and the Celsius
equivalent are lined up this way--
6) Sunny weather is indicated by sunny.gif --accompanied by
an alt tag-- but it also has the word "sunny" in the
content -- and given the complex visual layout that is
being attempted, you get very confused about what the
"sunny" applies to.
7) And lots more ...
In fact studying the HTML in this attachment shows up why we
really need to
drive the WWW towards achieving multicolumn layout via CSS
rather than via tables.
The reason is obvious, exposing the table model in this HTML
document fully via the DOM will get us no closer to making
the content any better accessible on alternative displays
and media --
the model that you would get from the DOM for this HTML will
just have no meaningful data binding between the model and
the content.
<HTML>
<HEAD>
<TITLE>CNN - Weather - Mountain View, CA</TITLE>
<META NAME="description" CONTENT="4 day weather forecast for Mountain View, CA.">
<META NAME="keywords" CONTENT="weather forecast Mountain View, CA">
<SCRIPT LANGUAGE="javascript" SRC="/virtual/weather/vector.js">
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" LINK="#3333CC" VLINK="#777777" onload="if(parent.frames.length!=0)top.location='http://cnn.com';">
<TABLE WIDTH=600 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<!--========== NAVIGATION ================-->
<TR>
<TD COLSPAN="3">
<TABLE BORDER="0" WIDTH="600" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="120">
<A HREF="/event.ng/Type=click&RunID=11075&ProfileID=469&AdID=5902&GroupID=1&FamilyID=328&TagValues=434.435.586.598.606.629.644.645&Redirect=http:%2F%2Fallpolitics.com" target="_top"><img src="/ads/advertiser/cnn/9805/promos/tempolitics120.gif" border=1 height=60 width=120 alt="What's new in Politics today?"></a>
</TD>
<TD WIDTH="8" ALIGN=RIGHT>
<A HREF="/ads/e.market/"><IMG SRC="/images/1998/05/homepage/ad.info.gif" WIDTH=7 HEIGHT=62 BORDER=0 ALT="ad info"></A>
</TD>
<TD WIDTH="468">
<A HREF="/event.ng/Type=click&RunID=11893&ProfileID=46&AdID=6716&GroupID=24&FamilyID=1100&TagValues=308.434.435.586.594.598.607.629&Redirect=http:%2F%2Fwww.cnnsi.com%2Fplayingfield%2F" target="_top"><img src="/ads/advertiser/cnn/9806/ambulance.gif" border=1 height=60 width=468 alt="News and reviews on the latest and greatest sports PC games. Click here."></a>
</TD>
</TR>
</TABLE>
<HR NOSHADE WIDTH="600" SIZE="1" ALIGN="LEFT">
</TD>
</TR>
<TR VALIGN=TOP>
<TD WIDTH="125">
<a href="/index.html"><img src="/images/1998/05/homepage/cnnin.logo.gif" alt="CNNin" width="125" height="76" border="0" hspace="0" vspace="0"></a><br>
<!--TOP-LEVEL NAVIGATION-->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/index.html"><font color="#000000">MAIN PAGE</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WORLD/"><font color="#000000">WORLD</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/US/"><font color="#000000">U.S.</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/LOCAL/"><font color="#000000">U.S. LOCAL</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/allpolitics/"><font color="#000000">POLITICS</font></a></font></b></td>
</tr>
<tr>
<td bgcolor="#333399"><img src="/images/1998/05/homepage/icon.arrow.down.gif" width="15" height="15" align="RIGHT"><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WEATHER/"><font color="#FFFFFF">WEATHER</font></a></font></b></td>
</tr>
<tr>
<td bgcolor="#9999FF"><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WEATHER/images.html"><font color="#000000">weather maps</font></a></font></b></td>
</tr>
<tr>
<td bgcolor="#9999FF"><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WEATHER/storm.center/"><font color="#000000">storm center</font></a></font></b></td>
</tr>
<tr>
<td bgcolor="#9999FF"><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WEATHER/allergy/"><font color="#000000">allergy report</font></a></font></b></td>
</tr>
<tr>
<td bgcolor="#9999FF"><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/WEATHER/uv.report/"><font color="#000000">u.v. & beach report</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/cnnfn/"><font color="#000000">BUSINESS</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/cnnsi/"><font color="#000000">SPORTS</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/TECH/"><font color="#000000">SCI-TECH</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/SHOWBIZ/"><font color="#000000">ENTERTAINMENT</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/TRAVEL/"><font color="#000000">TRAVEL</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/HEALTH/"><font color="#000000">HEALTH</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/STYLE/"><font color="#000000">STYLE</font></a></font></b></td>
</tr>
<tr>
<td><b><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/SPECIALS/"><font color="#000000">IN-DEPTH</font></a></font></b></td>
</tr>
<tr>
<td><hr size=1 noshade></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="http://cnn.com/CustomNews/"><font color="#000000">custom news</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/QUICKNEWS/"><font color="#000000">news summary</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/almanac/daily/"><font color="#000000">daily almanac</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/CNN/"><font color="#000000">CNN networks</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/TRANSCRIPTS/"><font color="#000000">on-air transcripts</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/SEARCH/quiz/"><font color="#000000">news quiz</font></a></font><br><br></td>
</tr>
</table>
<!--/TOP-LEVEL NAVIGATION -->
<!-- CNN WEB SITES NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" size="1" color="#FFFFFF"> CNN WEB SITES:</font></td>
</tr>
<tr><td bgcolor="#FFFFFF">
<map name="sites">
<area shape="rect" coords="0, 40, 68, 54" href="http://cnn.passagen.se/">
<area shape="rect" coords="0, 54, 77, 66" href="/cnnes/">
<area shape="rect" coords="0, 66, 88, 80" href="/cnnpt/">
<area shape="rect" coords="0, 21, 63, 39" href="/allpolitics/">
<area shape="rect" coords="64, 21, 121, 39" href="/cnnfn/">
<area shape="rect" coords="0, 0, 63, 20" href="/CustomNews/">
<area shape="rect" coords="64, 0, 121, 20" href="/cnnsi/">
</map>
<img src="/images/1998/05/homepage/cnn.website.gif" alt="CNN Websites" width="121" height="81" border="0" usemap="#sites">
</td></tr>
</table>
<!-- /CNN WEB SITES NAV -->
<!--MORE SERVICES NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" color="#FFFFFF" size="1"> MORE SERVICES:</font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/videoselect/"><font color="#000000">video on demand</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/video_vault/"><font color="#000000">video archive</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/audioselect/"><font color="#000000">audio on demand</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/EMAIL/"><font color="#000000">e-mail services</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/desktop/"><font color="#000000">desktop headlines</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/ads/advertiser/pointcast2.0/"><font color="#000000">pointcast</font></a></font><br></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/ads/pagenet/"><font color="#000000">pagenet</font></a></font><br><br></td>
</tr>
</table>
<!--/MORE SERVICES NAV -->
<!--DISCUSSION NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" size="1" color="#FFFFFF"> DISCUSSION:</font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/boards/"><font color="#000000">message boards</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/chat/"><font color="#000000">chat</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/feedback/"><font color="#000000">feedback</font></a></font><br><br></td>
</tr>
</table>
<!--/DISCUSSION NAV -->
<!-- SITE GUIDES NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" size="1" color="#FFFFFF"> SITE GUIDES:</font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/feedback/help/"><font color="#000000">help</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/INDEX/"><font color="#000000">contents</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="/SEARCH/"><font color="#000000">search</font></a></font><br><br></td>
</tr>
</table>
<!-- /SITE GUIDES NAV -->
<!-- FASTER ACCESS NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" size="1" color="#FFFFFF"> FASTER ACCESS:</font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="http://europe.cnn.com/"><font color="#000000">europe</font></a></font></td>
</tr>
<tr>
<td><font face="Helvetica, Arial,sans-serif" size="1"> <a href="http://japan.cnn.com"><font color="#000000">japan</font></a></font><br><br></td>
</tr>
</table>
<!-- /FASTER ACCESS NAV -->
<!-- WEB SERVICES NAV -->
<table border="0" width="125" cellspacing="0" cellpadding="2" bgcolor="#CCCCFF">
<tr bgcolor="#000000">
<td><font face="Helvetica, Arial,sans-serif" size="1" color="#FFFFFF"> WEB SERVICES:</font></td>
</tr>
</table>
<center>
<a href="http://www-cgi.cnn.com/cgi-bin/redirect?INFOSEEK"><img src="/images/1998/06/infoseek.gif" width="125" height="51" border=0></a><br>
<a href="http://www-cgi.cnn.com/cgi-bin/redirect?BIGYELLOW"><img src="/images/1998/07/by_weather.gif" width="115" height="50" border=0></a><br>
<a href="http://barnesandnoble.bfast.com/booklink/click?sourceid=11764&categoryid=weather"><img src="/images/1998/07/bn/weather.gif" width="125" height="51" border=0></a><br>
<center>
<!-- WEB SERVICES NAV -->
</TD>
<TD WIDTH="15">
<IMG SRC="/images/1998/05/homepage/white.gif" WIDTH=15 HEIGHT=1 HSPACE=0 VSPACE=0 BORDER=0 ALT="">
</TD>
<TD WIDTH="460">
<IMG SRC="/WEATHER/images/1998/usforecas.gif" ALT="Weather" WIDTH="460" HEIGHT="50" BORDER="0" HSPACE="0" VSPACE="0">
<BR>
<!-- =============== begin content ================= -->
<TABLE WIDTH=460 CELLSPACING=3 CELLPADDING=0>
<TR VALIGN=TOP>
<TD WIDTH=240>
<TABLE WIDTH=240 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD>
<FONT SIZE="5" FACE="helvetica, arial"><STRONG>Mountain View, CA Forecast</STRONG></FONT>
</TD>
</TR>
</TABLE>
<TABLE WIDTH=240>
<TR>
<TD COLSPAN=4 BGCOLOR="#666699">
<STRONG><FONT SIZE="3" COLOR="#FFFFFF" FACE="helvetica, arial">FOUR-DAY FORECAST</FONT></STRONG>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD BGCOLOR="#FFCC66">
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>Wed.</STRONG><BR>
<IMG ALT="cloudy" SRC="/WEATHER/images/9712/conds/cloudy.gif" WIDTH=24 HEIGHT=27><BR>
cloudy<BR>
<BR>
HIGH<BR>
73 F<BR>
22 C<BR>
<BR>
LOW<BR>
61 F<BR>
16 C
</FONT>
</TD>
<TD BGCOLOR="#FF9966">
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>Thu.</STRONG><BR>
<IMG ALT="p/cloudy" SRC="/WEATHER/images/9712/conds/partly.cloudy.gif" WIDTH=24 HEIGHT=27><BR>
p/cloudy<BR>
<BR>
HIGH<BR>
77 F<BR>
25 C<BR>
<BR>
LOW<BR>
62 F<BR>
16 C
</FONT>
</TD>
<TD BGCOLOR="#FFCC66">
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>Fri.</STRONG><BR>
<IMG ALT="p/cloudy" SRC="/WEATHER/images/9712/conds/partly.cloudy.gif" WIDTH=24 HEIGHT=27><BR>
p/cloudy<BR>
<BR>
HIGH<BR>
77 F<BR>
25 C<BR>
<BR>
LOW<BR>
62 F<BR>
16 C
</FONT>
</TD>
<TD BGCOLOR="#FF9966">
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>Sat.</STRONG><BR>
<IMG ALT="p/cloudy" SRC="/WEATHER/images/9712/conds/partly.cloudy.gif" WIDTH=24 HEIGHT=27><BR>
p/cloudy<BR>
<BR>
HIGH<BR>
80 F<BR>
26 C<BR>
<BR>
LOW<BR>
63 F<BR>
17 C
</FONT>
</TD>
</TR>
</TABLE>
<TABLE WIDTH=240>
<TR>
<TD COLSPAN=2 BGCOLOR="#666699">
<STRONG><FONT SIZE="3" FACE="helvetica, arial" COLOR="#FFFFFF">WEATHER MAPS</FONT></STRONG>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD>
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>RADAR</STRONG><BR>
<A HREF="/WEATHER/NAmerica/us.states/ca.map.html"><IMG ALT="thumbnail map" SRC="/WEATHER/accu.data/cnn_nex23.icon.gif" WIDTH=100 HEIGHT=67 BORDER=0><BR>
Larger view</A><BR>
<A HREF="/WEATHER/NAmerica/us.states/ca.anim.html">6 hr. animation</A><BR>
<A HREF="/WEATHER/NAmerica/us.reg/reg.sw.html">More views</A><BR>
<A HREF="/WEATHER/NAmerica/radar_image.html">Entire U.S.</A>
</FONT>
</TD>
<TD>
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>SATELLITE</STRONG><BR>
<A HREF="/WEATHER/NAmerica/us.reg/sat.sw.html"><IMG ALT="thumbnail map" SRC="/WEATHER/accu.data/swsat.icon.gif" WIDTH=100 HEIGHT=67 BORDER=0><BR>
Larger view</A><BR>
<A HREF="/WEATHER/NAmerica/us.reg/sat.sw.anim.html">6 hr. animation</A><BR>
<A HREF="/WEATHER/NAmerica/satellite_image.html#regions">More views</A><BR>
<A HREF="/WEATHER/NAmerica/satellite_image.html">Entire U.S.</A>
</FONT>
</TD>
</TR>
<TR ALIGN=CENTER VALIGN=TOP>
<TD>
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>TEMPERATURE</STRONG><BR>
<A HREF="/WEATHER/NAmerica/region_map.html"><IMG ALT="thumbnail map" SRC="/WEATHER/cnn.data/namerica_highs.icon.gif" WIDTH=100 HEIGHT=75 BORDER=0><BR>
Larger view</A><BR>
<A HREF="/WEATHER/NAmerica/us.reg/mov.temp.html">QT Movie: Temps</A><BR>
</FONT>
</TD>
<TD>
<FONT SIZE="2" FACE="helvetica, arial">
<STRONG>FORECAST</STRONG><BR>
<A HREF="/WEATHER/NAmerica/today.html"><IMG ALT="thumbnail map" SRC="/WEATHER/cnn.data/namerica_forecast_1.icon.gif" WIDTH=100 HEIGHT=75 BORDER=0><BR>
Larger view</A><BR>
<A HREF="/WEATHER/NAmerica/tomorrow.html">Tomorrow</A><BR>
<A HREF="/WEATHER/NAmerica/us.reg/mov.forecast.html">QT Movie: Forecast</A>
</FONT>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH=214>
<TABLE WIDTH=214>
<TR>
<TD BGCOLOR="#666699">
<STRONG><FONT SIZE="3" FACE="helvetica, arial" COLOR="#FFFFFF">CURRENT CONDITIONS</FONT></STRONG><BR>
<FONT SIZE="2" FACE="helvetica, arial" COLOR="#FFFFFF"> 5 p.m. (local), Jul. 22</FONT>
</TD>
</TR>
<TR>
<TD BGCOLOR="#FFCC66">
<FONT SIZE="3" FACE="helvetica, arial">
<IMG ALT="sunny" SRC="/WEATHER/images/9712/conds/sunny.gif" WIDTH=24 HEIGHT=27 ALIGN=RIGHT>
<STRONG>sunny</STRONG><BR>
<BR>
<STRONG>Temp:</STRONG> 70 F, 21 C<BR>
<BR>
<STRONG>Rel. Humidity:</STRONG> 67%<BR>
<BR>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD><FONT SIZE="3" FACE="helvetica, arial"><STRONG>Wind:</STRONG> NNW at </FONT></TD><TD><FONT SIZE=3 FACE="helvetica, arial">16 mph</FONT></TD>
</TR>
<TR>
<TD ALIGN=RIGHT><FONT SIZE=3 FACE="helvetica, arial">(</FONT></TD><TD><FONT SIZE=3 FACE="helvetica, arial">25 kph)</FONT></TD>
</TR>
</TABLE>
<BR>
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD><FONT SIZE="3" FACE="helvetica, arial"><STRONG>Pressure:</STRONG> n/a</FONT></TD>
</TR>
</TABLE>
<BR>
<STRONG>Sunrise:</STRONG> 6:04 a.m.<BR>
<STRONG>Sunset:</STRONG> 8:25 p.m.
</FONT>
</TD>
</TR>
</TABLE>
<TABLE WIDTH=214 CELLPADDING=4><TR VALIGN=BOTTOM><TD BGCOLOR="#666699">
<STRONG><FONT SIZE="3" FACE="helvetica, arial" COLOR="#FFFFFF">RELATED LINKS</FONT></STRONG>
</TD></TR><TR><TD BGCOLOR="#FFCC66">
<FONT SIZE="3" FACE="helvetica, arial">
• <A HREF="http://cnn.com/TRAVEL/CITY.GUIDES/US/california/">Travel: California</A><BR>
<!-- • <A HREF="http://cnn.com/TRAVEL/ski.report/states/ca.html">Ski Report: California</A><BR> -->
</FONT>
</TD></TR></TABLE>
</TD>
</TR>
<tr align=center>
<td bgcolor="#666699" colspan="2">
<font color="#FFFFFF" face="helvetica, arial"><b>Four-day forecasts for 6,100 cities worldwide</b></font>
</td>
</tr>
<tr bgcolor="#FFFFFF" valign=top>
<td colspan=2>
<TABLE WIDTH=460 CELLPADDING=2 CELLSPACING=3 BORDER=0><TR><TD COLSPAN=2 BGCOLOR="#000000"><FONT SIZE="2" FACE="helvetica,arial,sans-serif" color="#FFFFFF"><b>FOUR-DAY FORECASTS FOR 6100 CITIES WORLDWIDE</b></FONT></TD></TR>
<TR><TD WIDTH=230>
<IMG SRC="/WEATHER/images/9805/uscities.gif" ALT="US cities" WIDTH="89" HEIGHT="18" BORDER="0" HSPACE="0" VSPACE="0"></TD><TD WIDTH=230><IMG SRC="/WEATHER/images/9805/worldcities.gif" ALT="World cities" WIDTH="108" HEIGHT="17" BORDER="0" HSPACE="0" VSPACE="0"></TD></TR>
<TR><TD BGCOLOR="#FF9966">
<TABLE WIDTH="186" CELLPADDING="2" CELLSPACING="0" BORDER="0" BGCOLOR="#FF9966"><TR><TD>
<FONT FACE="Helvetica, Arial, sans-serif" COLOR="#000000" SIZE="1">
<FORM METHOD=GET ACTION="http://www-cgi.cnn.com/cgi-bin/weather/redirect">
<IMG SRC="/WEATHER/images/1998/arrowdkoran.gif" ALT="Arrow" ALIGN=LEFT WIDTH="15" HEIGHT="15" BORDER="0" HSPACE="5" VSPACE="0">Enter your U.S. zip code:<BR><BR><INPUT TYPE="TEXT" SIZE="10" NAME="zip"><INPUT TYPE="SUBMIT" VALUE"GO"><br>Zip goes to nearest of 6100 cities
</FORM></FONT>
</TD></TR><TR><TD>
<FONT FACE="Helvetica, Arial, sans-serif" COLOR="#000000" SIZE="2">
<FORM NAME="go" METHOD="POST">
<IMG SRC="/WEATHER/images/1998/arrowdkoran.gif" ALT="Arrow" ALIGN=LEFT WIDTH="15" HEIGHT="15" BORDER="0" HSPACE="5" VSPACE="0">Or, choose a state:<BR><BR>
<SELECT NAME="vector" ONCHANGE="goVector(this.form.elements[0])">
<OPTION VALUE="none">Select
<OPTION VALUE="us.alabama">Alabama</OPTION>
<OPTION VALUE="us.alaska">Alaska</OPTION>
<OPTION VALUE="us.arizona">Arizona</OPTION>
<OPTION VALUE="us.arkansas">Arkansas</OPTION>
<OPTION VALUE="us.california">California</OPTION>
<OPTION VALUE="us.colorado">Colorado</OPTION>
<OPTION VALUE="us.connecticut">Connecticut</OPTION>
<OPTION VALUE="us.delaware">Delaware</OPTION>
<OPTION VALUE="us.florida">Florida</OPTION>
<OPTION VALUE="us.georgia">Georgia</OPTION>
<OPTION VALUE="us.hawaii">Hawaii</OPTION>
<OPTION VALUE="us.idaho">Idaho</OPTION>
OP
TION VALUE="us.illinois">Illinois</OPTION>
<OPTION VALUE="us.indiana">Indiana</OPTION>
<OPTION VALUE="us.iowa">Iowa</OPTION>
<OPTION VALUE="us.kansas">Kansas</OPTION>
<OPTION VALUE="us.kentucky">Kentucky</OPTION>
<OPTION VALUE="us.louisiana">Louisiana</OPTION>
<OPTION VALUE="us.maine">Maine</OPTION>
<OPTION VALUE="us.maryland">Maryland</OPTION>
<OPTION VALUE="us.mass">Massachusetts</OPTION>
<OPTION VALUE="us.michigan">Michigan</OPTION>
<OPTION VALUE="us.minnesota">Minnesota</OPTION>
<OPTION VALUE="us.mississippi">Mississippi</OPTION>
<OPTION VALUE="us.missouri">Missouri</OPTION>
<OPTION VALUE="us.montana">Montana</OPTION>
<OPTION VALUE="us.nebraska">Nebraska</OPTION>
<OPTION VALUE="us.nevada">Nevada</OPTION>
<OPTION VALUE="us.nhampshire">New Hampshire</OPTION>
<OPTION VALUE="us.njersey">New Jersey</OPTION>
<OPTION VALUE="us.nmexico">New Mexico</OPTION>
<OPTION VALUE="us.newyork">New York</OPTION>
<OPTION VALUE="us.ncarolina">North Carolina</OPTION> <OPTION VALUE="us.ndakota">North Dakota</OPTION>
<OPTION VALUE="us.ohio">Ohio</OPTION>
<OPTION VALUE="us.oklahoma">Oklahoma</OPTION>
<OPTION VALUE="us.oregon">Oregon</OPTION>
<OPTION VALUE="us.pennsylvania">Pennsylvania</OPTION>
<OPTION VALUE="us.rhodeisland">Rhode Island</OPTION>
<OPTION VALUE="us.scarolina">South Carolina</OPTION>
<OPTION VALUE="us.sdakota">South Dakota</OPTION>
<OPTION VALUE="us.tennessee">Tennessee</OPTION>
<OPTION VALUE="us.texas">Texas</OPTION>
<OPTION VALUE="us.utah">Utah</OPTION>
<OPTION VALUE="us.vermont">Vermont</OPTION>
<OPTION VALUE="us.virginia">Virginia</OPTION>
<OPTION VALUE="us.washington">Washington</OPTION>
<OPTION VALUE="us.district">Washington, D.C.</OPTION>
<OPTION VALUE="us.westvirginia">West Virgina</OPTION>
<OPTION VALUE="us.wisconsin">Wisconsin</OPTION>
<OPTION VALUE="us.wyoming">Wyoming</OPTION>
</SELECT>
</FORM></FONT>
<IMG SRC="/WEATHER/images/1998/arrowdkoran.gif" ALT="Arrow" ALIGN=LEFT WIDTH="15" HEIGH="
15" BORDER="0" HSPACE="5" VSPACE="0"><FONT FACE="Helvetica, Arial, sans-serif" COLOR="#000000" SIZE="2">Or, browse the text listing:<br>
<A HREF="/WEATHER/cities/states.list.html">Complete listing of U.S. states</A><BR>
</FONT>
</TD></TR></TABLE>
</TD>
<TD BGCOLOR="#FFCC66" VALIGN=TOP WIDTH=230>
<TABLE WIDTH="186" CELLPADDING="2" CELLSPACING="0" BORDER="0" BGCOLOR="#FFCC66"><TR><TD><IMG SRC="/WEATHER/images/1998/arroworange.gif" ALT="Arrow" VALIGN=TOP ALIGN=LEFT WIDTH="15" HEIGHT="15" BORDER="0" HSPACE="5" VSPACE="0"><FONT FACE="Helvetica, Arial, sans-serif" COLOR="#000000" SIZE="2"><B>Choose a region:</B><BR>
<br>
<a href="/WEATHER/cities/africa.html">Africa</a>
<br>
<a href="/WEATHER/cities/asiapcf.html">Asia</a>
<br>
<a href="/WEATHER/cities/australia.html">Australia & New Zealand</a>
<br>
<a href="/WEATHER/cities/canada.html">Canada</a>
<br>
<a href="/WEATHER/cities/caribbean.html">Caribbean</a>
<br>
<a href="/WEATHER/cities/camerica.html">Central America</a>
<br>
<a href="/WEATHER/citieseurope.html">Europe</a>
<br>
<a href="/WEATHER/cities/mexico.html">Mexico</a>
<br>
<a href="/WEATHER/cities/meast.html">Middle East</a>
<br>
<a href="/WEATHER/cities/samerica.html">South America</a>
<br>
</FONT></TD></TR></TABLE>
</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- =============== end content ================= -->
<!-- search box -->
<form name=seek method=get action="http://search.cnn.com:8765/query.html">
<table width="460" cellpadding="5" cellspacing="0" border="0" bgcolor="#333399"><tr valign=top>
<td>
<a href="http://search.cnn.com" class=white><b><font face="Helvetica, Arial, sans-serif" color="#FFFFFF" size="1">Search CNN by <img src="/images/1998/05/homepage/infoseek.logo.gif" alt="Infoseek" width="66" height="17" border="0" hspace="0" vspace="0" align="absmiddle"></font></b></a>
<br>
<b><font face="Helvetica, Arial, sans-serif" color="#FFFFFF" size="1"> Enter keyword(s) </font></b>
<input type=text name=qt size=30 value="" maxlength=50>
<a href="javascript:document.seek.submit()"><FONT face="Helvetica, Arial,sans-serif" COLOR="#FFFFFF" size="2">go</FONT></A>
<a href="http://search.cnn.com:8765/help/"><FONT face="Helvetica, Arial,sans-serif" COLOR="#FFFFFF" size="2">help</FONT></A>
<input type=hidden name=qc value="">
<input type=hidden name=col value="cnni">
<input type=hidden name=qm value="0">
<input type=hidden name=st value="1">
<input type=hidden name=nh value="10">
<input type=hidden name=lk value="1">
<input type=hidden name=rf value="1">
</td>
</tr>
</table>
</form>
<!-- /search box -->
<center>
<br clear=all>
<font face="HELVETICA, ARIAL, sans-serif" size="2">
<a href="#top"> Back to the top</a>
</font>
<font face="HELVETICA, ARIAL, sans-serif" size="1">
<br>© 1998 Cable News Network, Inc. All Rights Reserved.<br>
<a href="/interactive_legal.html">Terms</a> under which this service is provided to you.<br>
Read our <A HREF="/privacy.html">privacy guidelines</A>.</font><br>
</center>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
^^ݳhm䲲צ7_߭ovqSygZ j躑ZO~Ӎ[^5ڮ@/z{fڙi{(&& =]tnI_jfrzYyۡZnܢi{(jf ڝiܳ(whjfji
zYZg8^{kz uޛ*0݊yujGjަz{Z+ޡzje'hm䲲צ
Received on Wednesday, 22 July 1998 21:53:13 UTC