₦airaland Forum

So, exactly how bad are tables for website design? The short answer: Pretty bad!

What do you think about it?

All arguments should be backed with facts even samples where applicable 

I wouldn't say "pretty bad" as tables do have their place. they are bad when you are using it for layout and not for presenting tabular data, the former being able to cause you to embed table upon table and even worse if you are not the indenting type

All samples I would point to are in my free ebook

CSS approach is preferred to tables because CSS has an OOP(Object Oriented Programming) approach to web devpt than tables such as Encapsulation and Inheritance and to an extent Composition. Also the OOP concept allows for easy management of codes. Tables should be used basically to display tabular data.

Yeah, Tables are really bad when compared to CSS

everyone knows the importance of CSS when it comes to internet  but when creating CSS website it should be neat and pretty hope more people inbibe the use of CSS to all project they start working on this 2009 and be sure to test them across the whole browser oo not just IE  because something you've done IE might not come out perfect on FF or other browser, just from experience, my2cent knows what am talking about,

ScottN
If you have a table that is say, 5 rows and 5 columns, which would you prefer? Floating a bunch of DIVs or using a straight up TABLE tag that does what it was intended to do: present tabular data? Think about it.

afam4eva
I think tis best to support such blanket statement claims with examples. Just my opinion.

@yawa-ti-de

Thanks for coordinating the thread on my behalf.

There are more to these reasons which have been pointed out here. Using tables to present tabulated data is ok. Any other reason why we should go for CSS rather than Tables?

When u use CSS, design changes could be made at one point i.e the CSS file and it cuts across d whole components in the app so u don't have to go page by page to make changes.

Nice point. Very much like template. You call on the DIV "id" or "class" and reuse the formatting at random. Just an interesting feature of CSS.

that is correct scottN but again, I think you miss my point which is - what are tables for?  Let me use an example (assume all necessary divs are floated):

A)
<div id="container">
    <div class="one">1</div><div class="one">1</div><div class="one">1</div><div class="one">1</div>
    <div class="one">1</div><div class="one">1</div><div class="one">1</div><div class="one">1</div>
    <div class="one">1</div><div class="one">1</div><div class="one">1</div><div class="one">1</div>
    <div class="one">1</div><div class="one">1</div><div class="one">1</div><div class="one">1</div>
    <br style="clear: both;" />
</div>

AND

B)
<table id="someTable" cellspacing="0">
    <tr>
        <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td><td>1</td>
    </tr>
</table>

Which makes more sense **semantically**?  Your call.  Also:

Also:
1) In some cases, you have to use a TH for your table headings. Sure, this could be done in the DIVs but that would require styling.

2) the above assumes all cells are the same width. If not, you have to declare even more classes

3) overuse of classes and DIVs in css is called "classitis" and "divitis" respectively - very bad diseases

4) I see huge maintainnability issues

Tabulation is tabulation no matter how its design is framed to look. That's my understanding and stand here. Needless for those excess divs while table is what is meant to do the task. Because we learnt about the use of divs should not impart a different orientation in our heads that tables should go into extinction.

Tables for tabulation and not divs and spans and classes (using them= working harder instead of smarter).

I was reading in a forum yesterday where some experts were discussing this "those guys were so tech that even me i have to keep quiet and watch" - they were discussing something about the box model - i know a little about this - the box model has to do with how web elements such as tables, paragraphs, DIVS and some other ones are displayed. SPAN tag is not a box element. They now went ahead to say that the table element is displayed using different box models and that different browsers interprete them differently, so if u carefully layout your table on one browser, you may find out that your site may show in slightly a different manner in another browser. That they said - is the greatest disadvantage of using a table to layout your page and they too said CSS is best. And I concur with them, i just recently upgraded my design to DIVs rather than tables. The fact is we need to move with the times, there was a time that it was frameset that was reigining, and at that time, writing crossframe javascript was a great technique then, window.parent.child1.document.forms.getElementsByTagName['input'].value - can u immagine that? just the get the value of a text box all the way from an embedded frame somewhere, but that shit is outdated now, and so are tables for creating layouts.

For the past few days, I’ve been scouring the web searching for the top reasons why Cascading Style Sheets (CSS) are superior to table-based layouts when designing a website. Some web designers swear that table-based layouts are better than CSS-based layouts, while others believe that table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout. Since we’re one of those CSS die-hards, I’ve compiled a list of 13 reasons why CSS-based layouts are superior to table-based layouts.

Note: CSS cannot be used on its own to create a website - CSS is merely the tool used to style a web site’s visual information. HTML or preferably, XHTML, must be used to define the structure of a website.

The List
Faster page loading
Lowered hosting costs
Redesigns are more efficient
Redesigns are less expensive
Visual consistency maintained throughout website(s)
Better for SEO
Accessibility
Competitive edge (job security)
Quick website-wide updates
Easier for teams to maintain (and individuals)
Increased usability
More complex layouts and designs
No spacer gifs

Well, well. i am so addicted to tables as a good layout tool, maybe if there was a Table-CSS converter, i would be a fan.

Noted, all the good points on XHTML and CSS are what every designer should be heading towards. I am just hoping W3c will come up with something that matches the layout ease of tables with simple to code (columns, spans, nested td) and easy to get into. my css know-how does not go beyond fonts and hyperlinks i am afraid

larger:
CSS3 I blv already supports CSS tables.  The problem? yes, you guessed right - it's not cross-browser, for now at least.

Check out this article: Why CSS Should Not Be Used For Layout

Hi people,
please who can tell me where i can get a good book on css free.
i need it bad bad

Well, i am addicted to tables, though i use css for my formatings and am able to make changes site wide by visiting my css file.

But i think i want to be more productive.
with the help of dreamweaver & Tables, i spend less than 20 mins laying my first pages (homepage), no matter how complex the pages is.
just left with dragging my images in and switching to php.
I guess i must be missing something by not using CSS, pls advice.

@Seun, The content of that article is one reason i did not want to come back to CSS. when you are done coding ur css, expect varying miracles in ur browsers which must always be fixed, fix it in IE, firefox tells u, "NO! you aint done yet", fix it in firefox, IE says, "why u dabaru everything na?".
I respect all these our css gurus

The only site i have used css so far rather than tables is my site (and i regretted it later) - i still find tables better - though you will need to know how to pull some stunts to make it downgrade well on all browsers - like stripping out the cellpadding, spacing,
And it does carry some advantages by allowing relative positioning and all that. I have been using it over the years and i think it is ok - afterall what we are interested in is results - and my layouts show equally in all the major browsers. I think the point here is whatever you make use of - use it well!

Hmm, No matter what, I think this CSS thing is just like the other programming languages. They have their flaws too but I must say that, even those that at this point critique it, sooner or later will have to uphold it else they make their own standard and implement on their own browsers. All I see here is a mastery of the CSS techniques and you are working your way through it. I've used and worked my layouts using CSS and it has been compliant. One thing people might tend to look at while disliking CSS is their not knowing some hacks of CSS which help to make them compliant with IE, FF, Opera etc. An example might be the issue of .png and .gif usuage. If you don't know the tricks to make this compliant on all browsers, it might display well in one and alter in another. This same thing goes for a language like say Ajax. To make it compliant on all browsers, you code to check compatibility on all browsers then give a default action.

There are more to this but all I can say is, learn CSS, practicalize and implement it and you'll ever love it.

The more you code with CSS/Web Standards, the more aware you become of cross-browser issues. It's just, as omnipotens says, like learning any other language.

So come on folks, stop being lazy. Go with the flow!

Seun:
Check out this article: Why CSS Should Not Be Used For Layout

I read your post. True. However, what ever hitches the article pointed out (which can be fixed, given 'liberal creativity', as he stated) do not in a any remote significance taint the benefits of using CSS for layout. tables have their place, and grasping CSS isn't exactly for the tabular oriented, but as someone said but it's the solution, not the problem

My Sample 3-Column-Layout-Code

Tables aren't that bad, once u've mastered them.
Besides, css can be implemented excellently on tables.

ikeobidi,

tables are bad for layout. Period! Tables are for, as the name implies, tabular data. Have you ever tried making a change to a 7-layer deep table, with no indentations? I have and I can tell you it isn't fun, not to mention all the unnecessary code and weight it adds to a page.

This is a topic developers won't stop arguing about. Personally, I go with the idea that CSS are better for layouts while tables should go for tabular data. But that's just me and then again it depends on the complexity of design. Pause for a minute and visit your favorite site. View the source and search for "table". It will be there in use - for layout and not tabular data! No? Browse through 5 more pages of the site and you will find out it is. Google, Facebook, Mozilla labs, just name it.
Like I said, it depends on the design. If it is a simple one with very little layout structuring CSS is fine. But if it is a bit complex, tables will have to come in - @lst for me . Or how do you think facebook do the rounded cornered shadow effect those in-browser popup boxes have?

I wonder why this argument is going on at this age, when the whole world have switched to CSS as far back as 1999. Are Nigerian developers so backwards?

Please check out the w3c website regularly to keep yourselves updated with the latest w3c recommendations.

Cheers!

cnario,

They aren't backwards just, generally speaking, people who want to do less work for maximum pay.  At the end of the day, the average client probably doesn't view source or even tell them what they want.  They want a website and don't care how it gets done, not to mention load testing, etc.  The average developer in Nigeria (and I say with from chatting with quite a few and from reading posts on this board) just wants to upload their site, "clean mouth" and move on to the next thing.

Which is easier? Typing out (or having DW do it for you) a series of embedded tables and knocking out a website in a few hours or learning the box model and why it can be so frustrating for developers?  Using a tried-and-true tables or "wasting" time figuring out "this yeye CSS sef"?

The lazy me would go for the latter in both cases.  However as you have rightly said, the world has moved on in this regard, since 1999 and it is best to stay with the flow and stay up-to-date.

yawa-ti-de:
cnario,

They aren't backwards just, generally speaking, people who want to do less work for maximum pay.  At the end of the day, the average client probably doesn't view source or even tell them what they want.  They want a website and don't care how it gets done, not to mention load testing, etc.  The average developer in Nigeria (and I say with from chatting with quite a few and from reading posts on this board) just wants to upload their site, "clean mouth" and move on to the next thing.

Which is easier? Typing out (or having DW do it for you) a series of embedded tables and knocking out a website in a few hours or learning the box model and why it can be so frustrating for developers?  Using a tried-and-true tables or "wasting" time figuring out "this yeye CSS sef"?

The lazy me would go for the latter in both cases.  However as you have rightly said, the world has moved on in this regard, since 1999 and it is best to stay with the flow and stay up-to-date.

Laziness is the worst thing that can happen to anyone that calls himself a designer/programmer. Do they actually know the implications of using outdated codes? At the end of the day, It's hard work to work with outdated codes, cos they won't validate, as against the latest recommendations.

Moreover, I wonder when quality service will become the first priority of our people, rather than just taking their checks and running after the next project without even caring if they've done what's best for the client. it doesn't matter if the client knows it or not, but it always catches up with them one way or the other, their laziness will be made evident in all their jobs, and eventually on what they think they know, their knowledge will simply become extinct.

As it stands now, there's a lot of things going on concerning web standards, and my advise to anyone that wants to remain relevant is to BEND DOWN AND WORK.

Cheers!

Guys guys guys, take it easy. tables are not outdated.

I know u all are css gurus but hey, using alternative is not bad.

Just like i think ASP sucks compared to other languages, and i dumped it
does not mean I should start a campaign on how bad ASP is

yawa-ti-de:
Which is easier? Typing out (or having DW do it for you) a series of embedded tables and knocking out a website in a few hours or learning the box model and why it can be so frustrating for developers?  Using a tried-and-true tables or "wasting" time figuring out "this yeye CSS sef"?

I have been busy getting my hands wet with 3d modelling, and let me share a tip with u yawa.
when you need to build a human character, and animate him, you need to rig and skin him.
rigging is the art of making ur character appear and move as if it is real
how this is achieved?

you can add influence objects below the skin to make it appear as if it has volume when deforming the character
in other words, those dangerously crashing vehicles producing that heavy bang sound might be empty.


where am driving to is this?
what people want is a website that load fast, displays well, scripted to do the required tasks.
nobody cares if you achieved that with tables or windows, nobody.
they dont even want to know u used dreamweaver or notepad, or php or asp

tables or css, it depends on you
I have asked you to tell me what am losing by using tables and not css, you have said nothing in this regard

cnario:
I wonder why this argument is going on at this age, when the whole world have switched to CSS as far back as 1999. Are Nigerian developers so backwards?

Please check out the w3c website regularly to keep yourselves updated with the latest w3c recommendations.

Cheers!

please show me where w3c is saying that

webdezzi:
, please show me where w3c is saying that

Please log on to the w3c website and browse through their archives. There are tons of articles on this issue.

cnario:
Please log on to the w3c website and browse through their archives. There are tons of articles on this issue.

now i see, Articles u said, articles are not facts my dear.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yahoo! Mail: The best web-based email!</title>
<!-- Refresh login page every 15 minutes -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="refresh" content="900">

<meta content="index,follow" name="robots">
<meta content="Yahoo! Mail Free reliable easy efficient PhotoMail SpamGuard antivirus storage mail for mobile award-winning" name="keywords">
<meta content="Get free web-based email from Yahoo! Access email from anywhere, enjoy unlimited storage space, and feel secure with award-winning spam protection." name="description">
<style type="text/css">



@import url(https://a248.e.akamai.net/sec.yimg.com/lib/reg/css/yregbase_sec_200808110948_01.css);
.ct{background:transparent url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat top right;top:-1px}
.ct .cl{background:transparent url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat top left}
.cb{background:transparent url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat bottom right;bottom:-1px}
.cb .cl{background:transparent url(https://login.yahoo.com/i/reg/cs.gif) no-repeat bottom left}
.clear{clear:both}
#yreglg select, #yreglg input, #yreglg p, #yreglgtb td, #yreglgtb th{font-size:93%}
div.yregdsilu h2.yregdnt, div.yregdsilu p.yregsueasy{width:110px}
/*popup template css */
#yregtpopup #yregtxt {width:260px;margin:0 0 10px} /* popup template */
#yregtpopup #yregwp, #yregtpopup #yregmst{width:525px}
#yregtpopup #yregmst{margin-bottom:5px}
#yregtpopup #yreglg{margin-bottom:0}
#yregtpopup #yregft{padding-top:5px}

#yregtgen #yregtxt h2, #yregtpopup #yregtxt h2, #yregpmtxt h3{font:bold 152%/152% arial;color:#333;margin:0}
#yregtgen #yregtxt p.yregpti, #yregtpopup #yregtxt p.yregpti {color:#666;margin:0 0 2px;font:bold 100%/100% arial}
#yregtgen #yregtxt, #yregtpopup #yregtxt{margin-bottom:20px}
#yregtgen #yregtxt #yreghtxt h3, #yregtpopup #yregtxt #yreghtxt h3{margin:0;font:bold 107%/114% arial;color:#8C57A1}
#yregtgen #yregtxt li h3, #yregtpopup #yregtxt li h3{font:bold 114%/122% arial}
#yregtgen #yregtxt p, #yregtpopup #yregtxt p{margin:0 0 0.8em;line-height:129%}
#yregtgen #yregtxt .yregbpt li, #yregtpopup #yregtxt .yregbpt li{margin:0 0 10px 4px;padding:0 0 10px 22px;background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/purple_arrow.gif) no-repeat 1px 4px}

#yregtgen.yregab #yregtxt{width:auto;}
#yregtgen.yregab #yreghtxt{margin-right:60px;}
#yregtpopup.yregab #yregtxt{width:180px}
#yregtgen #yregtxt #yreghtxt h2, #yregtpopup #yregtxt #yreghtxt h2{color:#7A067F}
.yregbx{z-index:3;margin-right:0!important}
.flicker h3 span {color:#ff0084;font-weight:bold}
.flicker h3 a {text-decoration:underline;}

/* persistency message right above "sign in" bottom */
em.nwred a {font-style: normal; font-size: 85%; vertical-align:5px;}
.kmsibold {font-weight:bold; font-size: 114%;}
input#persistent {margin-bottom: -0em;}
.subperstxt {line-height:1.75em;}
.subperstxt2 {margin: 0 0 0 2em; display:block;}
/* #yregft p.yregfb { font-size:120%; padding-bottom: 5px; padding-up: 5px} */

.yreglgsb{margin-top:0}

#yregwp #yregct #yreglg .yregbxi #yreglgmd {margin-top:1.75em}
body#yregtgen fieldset {margin-bottom:2.5em}
#yreglgtb tr {width:17.92em}
/* p#sigcopys {text-align: left; font-size: 85%; float: right; padding: .4em; margin: .6em .4em 1em 0; border-bottom: 1px dotted #9D9C9D; border-top: 1px dotted #9D9C9D;}
*/
p#sigcopys {text-align: left; font-size: 85%; padding: .4em; margin: .6em .0em 1em 0; border-bottom: 1px dotted #9D9C9D; border-top: 1px dotted #9D9C9D;}
#sigcopys label{display:block; margin:-1.5em 0 0 2em;}


#yregtgen #yregct {margin-right: 0px;}
#yregtgen #yregtxt { margin-left: 5px; margin-right: 245px }
</style>

<style type="text/css">

/*anti phish badge */
.top {position:relative}
#antiphish{position:absolute;right:5px;top:5px;}  
#antiphish.dogear{right:0px;top:0px;}
#antiphish a {font-size:92%;}
img.picture {border:2px solid}

/* badge backgrounds */  
.badge{background-color:#f9f9f9; background-repeat:no-repeat; background-position:top right;}  
.badge #yreglgtb {margin-top:18px;} /* increased badge size */


/* popup code, */
#security {display:none;position:absolute;top:-15px;left:-85px;z-index:1000;background-color:#a5a5a5;}
#security.noimage {left:-76px;top:-10px}
#securityi{position:relative;z-index:1;right:1px;bottom:1px;padding:11px;width:219px;background-color:#fff;border:1px solid #636363;}
#knob{position:absolute;top:30px;right:-10px;width:10px;height:18px;background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/sideknob.png) no-repeat top left}
.noimage #knob{top:22px}
#security p, #security ul li{font:77%/107% verdana;}
#security p a {text-decoration:underline;}
#security p{padding-bottom:5px;}
#security ul{margin:5px 0 0;padding:0 5px 0 0;text-align:right;list-style:none;}  
#security ul li{margin:0;padding:0 0 2px;}

/* help text updates, */
#yregtgen #yregtxt .yregbpt li ul{margin:10px 0 0;padding:0 0 0 15px;}
#yregtgen #yregtxt .yregbpt li ul li{background:none;list-style:disc;margin:0 0 5px 0;padding:0;}
#yreghtxt ul{margin-left:0}
#yreghtxt ul.inlineHeaders li h3{display:inline;}
/* remove top margin on li ul */
.addressbar {display:block;margin:1em 0 1em 0}
.mono{font-family: courier new, courier, monospace;color:#000;font-weight:bold}


#rcta {width:99%; border:1px solid #898989; margin-top:10px; background-image:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/gradient.png); background-repeat:repeat-x; background-color:#fde37c}
.ct {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll right top; top:-1px}
.ct .cl {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll left top;}
#rcta .key {width:40px; height:40px; border:1px solid #666666; background-image:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/key.png); background-repeat: no-repeat; float:left; margin-top:1px}
#rcta .txt {margin-left:48px}
.cb {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll right bottom; bottom:-1px}
.cb .cl {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll left bottom;}
#rcta .ctact {margin:4px 10px;min-height:44px}
#rcta .txt .qs {font:normal bold 92% arial, Helvetica, sans-serif; color:#000; text-decoration:none}
#rcta .txt .sl {font:normal normal 100% arial, Helvetica, sans-serif; color:#000; text-decoration:none}
#rcta .txt .why {font:normal normal 85% arial, Helvetica, sans-serif;}
#rcta .txt .sltxt {line-height:0.9em}
.sltxt a {line-height:0.5em; font-size:85%}
.sltxt .why a{font-size:100%}
.yregertxt { margin-top: 25px }
.yreglgsut { margin-top: 15px }
</style>
<!--[if IE]>
<style type="text/css">
.yregclb{height:1%}
#yreglgtb td{text-align:left}
#yreglgtb td input{width:110px}    
#antiphish img{right:15px}
#antiphish.dogear{right:1px;top:1px;}
#knob{background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/sideknob_b.gif);right:-11px}
.badge #yreglgtb {margin-top:20px;}
#rcta .key {margin-top:0}
.badge {height:1%}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
.yregclb{height:30em}
#yregtxt {height:1%}
</style>
<![endif]-->


<!--[if IE]>
<style type="text/css">
.yregclb,.yregbxi,.yregbx {height:1%}
#yreglgtb td{text-align:left}
#yregtxt #banner div{position:static} /* ie z-index context stacking bug work-around */
#yregtpopup #yregtxt{clear:both; float:left;}
#yregct{padding:0 0 30px}
.yregbx{width: 100%}
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
.yregclb{height:30em}
#yregtxt {height:1%}
/*p#sigcopys {margin-right:0.2em}*/
</style>
<![endif]-->


<style type="text/css">
 
#yreglgtb, #yreglgtb th {text-align: left; width: 100%;}
#yreglgtb td { width:179px;  text-align: left; padding: 0 0 16px 0}
#yreglgtb td input{ width:179px  }
.dbidTip {padding: 3px 0 0 0;  font-size:85%}  
</style>




<style type="text/css">
@import url(https://a248.e.akamai.net/sec.yimg.com/lib/reg/css/yregml_sec_200604111840.css);
div.yregdsilu h2.yregdnt, div.yregdsilu p.yregsueasy{width:110px}
/* persistency message right above "sign in" bottom */
em.nwred a {font-style: normal; font-size: 85%; top:-1px; position: relative }
.kmsibold {font-weight:bold; font-size: 114%;}
p#sigcopys {text-align: left; font-size: 85%; padding: .4em; margin: .6em .4em 1em 0; border-bottom: 1px dotted #9D9C9D; border-top: 1px dotted #9D9C9D;}
input#persistent {margin-bottom: -0em;}
.subperstxt {line-height:1.75em;}
.subperstxt2 {margin: 0 0 0 2em; display:block;}
/* #yregft p.yregfb { font-size:120%; padding-bottom: 5px; padding-up: 5px} */
</style>
<style type="text/css">

/*anti phish badge */
.top {position:relative}
#antiphish{position:absolute;right:5px;top:5px;}  
#antiphish.dogear{right:0px;top:0px;}
#antiphish a {font-size:92%;}
img.picture {border:2px solid}

/* badge backgrounds */  
.badge{background-color:#f9f9f9; background-repeat:no-repeat; background-position:top right;}  
.badge #yreglgtb {margin-top:18px;} /* increased badge size */


/* popup code, */
#security {display:none;position:absolute;top:-15px;left:-85px;z-index:1000;background-color:#a5a5a5;}
#security.noimage {left:-76px;top:-10px}
#securityi{position:relative;z-index:1;right:1px;bottom:1px;padding:11px;width:219px;background-color:#fff;border:1px solid #636363;}
#knob{position:absolute;top:30px;right:-10px;width:10px;height:18px;background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/sideknob.png) no-repeat top left}
.noimage #knob{top:22px}
#security p, #security ul li{font:77%/107% verdana;}
#security p a {text-decoration:underline;}
#security p{padding-bottom:5px;}
#security ul{margin:5px 0 0;padding:0 5px 0 0;text-align:right;list-style:none;}  
#security ul li{margin:0;padding:0 0 2px;}

/* help text updates, */
#yregtgen #yregtxt .yregbpt li ul{margin:10px 0 0;padding:0 0 0 15px;}
#yregtgen #yregtxt .yregbpt li ul li{background:none;list-style:disc;margin:0 0 5px 0;padding:0;}
#yreghtxt ul{margin-left:0}
#yreghtxt ul.inlineHeaders li h3{display:inline;}
/* remove top margin on li ul */
.addressbar {display:block;margin:1em 0 1em 0}
.mono{font-family: courier new, courier, monospace;color:#000;font-weight:bold}


#rcta {width:99%; border:1px solid #898989; margin-top:10px; background-image:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/gradient.png); background-repeat:repeat-x; background-color:#fde37c}
.ct {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll right top; top:-1px}
.ct .cl {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll left top;}
#rcta .key {width:40px; height:40px; border:1px solid #666666; background-image:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/key.png); background-repeat: no-repeat; float:left; margin-top:1px}
#rcta .txt {margin-left:48px}
.cb {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll right bottom; bottom:-1px}
.cb .cl {background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/cs.gif) no-repeat scroll left bottom;}
#rcta .ctact {margin:4px 10px;min-height:44px}
#rcta .txt .qs {font:normal bold 92% arial, Helvetica, sans-serif; color:#000; text-decoration:none}
#rcta .txt .sl {font:normal normal 100% arial, Helvetica, sans-serif; color:#000; text-decoration:none}
#rcta .txt .why {font:normal normal 85% arial, Helvetica, sans-serif;}
#rcta .txt .sltxt {line-height:0.9em}
.sltxt a {line-height:0.5em; font-size:85%}
.sltxt .why a{font-size:100%}
.yregertxt { margin-top: 25px }
.yreglgsut { margin-top: 15px }
</style>
<!--[if IE]>
<style type="text/css">
.yregclb{height:1%}
#yreglgtb td{text-align:left}
#yreglgtb td input{width:110px}    
#antiphish img{right:15px}
#antiphish.dogear{right:1px;top:1px;}
#knob{background:url(https://a248.e.akamai.net/sec.yimg.com/i/reg/sideknob_b.gif);right:-11px}
.badge #yreglgtb {margin-top:20px;}
#rcta .key {margin-top:0}
.badge {height:1%}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
.yregclb{height:30em}
#yregtxt {height:1%}
</style>
<![endif]-->
   
<!--[if IE]>
<style type="text/css">
#antiphish.dogear{right:1px;}
/* #antiphish{right:15px;} */
</style>
<![endif]-->

<!--[if IE 5]>
<style  type="text/css">
#yregbnr{margin-top:23px;padding-top:0}  /* offset login box */
.yregbnrimg {margin:0 0 0 -3px}  /* 3px jog Win/IE5  */
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
.yregclb{height:1%}
#yregbnrti{height:159px;padding-top:0}
#yregbnrtii{margin-top:0}
.knob{top:-5px}
#yregtml .mailplus{height:60px;padding-top:0}
#yregtml .mailplus div{margin-top:0}
#yregtml .spamguard{height:52px;padding-top:0}
#yregtml .spamguard div{margin-top:0}
#yregtml .addressbook{height:50px;padding-top:0}
#yregtml .addressbook div{margin-top:0}
#yregtml .messenger{height:60px;padding-top:0}
#yregtml .messenger div{margin-top:0}
#yregtml .photos{height:60px;padding-top:0}
#yregtml .photos div{margin-top:0}
#yregtml .mobile{height:60px;padding-top:0}
#yregtml .mobile div{margin-top:0}
#yregtml .antivirus{height:60px;padding-top:0}
#yregtml .antivirus div{margin-top:0}
#yregtml .cnet{height:72px;padding-top:0}
#yregtml .cnet div{margin-top:0}
#yregtml .pcmag{height:94px;padding-top:0}
#yregtml .pcmag div{margin-top:0}

</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.knob{top:-6px}
#antiphish.dogear{top:0;right:0;}
#antiphish{right:5px;}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
.yregclb{height:30em}
#yregtxt {height:1%}
p#sigcopys {margin-right:0.2em}
</style>
<![endif]-->


<style type="text/css">
   #yregtxt {width:66%; overflow:hidden}
   #yregbnr {padding-top:0}
   #yregbnr #yregbnrti #yregbnrtii {width:240px}
   #yregiclst {padding-right:0}
</style>
<!--[if IE]>
<style type="text/css">
   #yregbnr #yregbnrti {margin-top:-160px}
   #yregtxt {height:auto}
</style>
<![endif]-->


<style type="text/css">
 
#yreglgtb, #yreglgtb th {text-align: left; width: 100%;}
#yreglgtb td { width:179px;  text-align: left; padding: 0 0 16px 0}
#yreglgtb td input{ width:179px  }
.dbidTip {padding: 3px 0 0 0;  font-size:85%}  
</style>



</head>


<body id="yregtml">

<div id="yregwp">
<!-- begin header -->
<table width="750" cellpadding="0" cellspacing="0" border="0"><tr valign="top">
<td width="100%"><table width="100%" cellspacing="0" border="0"><tr valign="top">
<td width="1%"><img src="https://a248.e.akamai.net/sec.yimg.com/i/us/nt/ma/ma_mail_1.gif" alt="Yahoo! Mail" width=196 height=33 border=0></td><td><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td align="right" style="padding-right:3px;line-height:12px;"><font face="verdana,geneva,sans-serif" size="-2"><a href="https://us.ard.yahoo.com/SIG=151qun21e/M=341232.12015906.12445488.11473400/D=regst/S=150001465:HEAD/Y=YAHOO/EXP=1234431981/L=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm/B=UiFVDUWTSQs-/J=1234424781487099/A=5054024/R=0/SIG=10mgpruen/*http://www.yahoo.com" target="www" class="header" title="Click here to go to Yahoo! homepage">Yahoo!</a> - <a href="https://us.ard.yahoo.com/SIG=151qun21e/M=341232.12015906.12445488.11473400/D=regst/S=150001465:HEAD/Y=YAHOO/EXP=1234431981/L=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm/B=UiFVDUWTSQs-/J=1234424781487099/A=5054024/R=1/SIG=10vfp51gc/*http://ymailupdates.com/blog/" target="www" class="header" title="Click here to go to Yahoo! Mail blog">Blog</a> - <a href="https://us.ard.yahoo.com/SIG=151qun21e/M=341232.12015906.12445488.11473400/D=regst/S=150001465:HEAD/Y=YAHOO/EXP=1234431981/L=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm/B=UiFVDUWTSQs-/J=1234424781487099/A=5054024/R=2/SIG=1159ub4jl/*http://help.yahoo.com/help/us/edit/" class="header" target="yhelp" title="Click here for help">Help</a></font></td></tr></table></td></tr></table></td><td align="right" style="padding: 6px 0 0 4px;"></td></tr></table><script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['UiFVDUWTSQs-']='&U=13gonrggl%2fN%3dUiFVDUWTSQs-%2fC%3d341232.12015906.12445488.11473400%2fD%3dHEAD%2fB%3d5054024%2fV%3d1';

</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=1529ohref%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d202080001%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fQ%3d-1%2fS%3d1%2fJ%3dDD709345&U=13gonrggl%2fN%3dUiFVDUWTSQs-%2fC%3d341232.12015906.12445488.11473400%2fD%3dHEAD%2fB%3d5054024%2fV%3d1"></noscript>
<!-- end header -->
<span id="cache"></span>
<script language="JavaScript">
   
function checkBrowser(){
   var appName = navigator.appName;
   if( appName == "Microsoft Internet Explorer" )
   {
       // this only works in IE 5 for windows and higher ,
       if( navigator.appVersion.indexOf("Windows" == -1 )
           return -1;
       var appVersionAry = navigator.appVersion.split("(";
       if( appVersionAry.length < 2 )
           return -1;
       var appVersion = appVersionAry[1];
       appVersionAry = appVersion.split("; ";
       if( appVersionAry.length < 2 )
           return -1;
       appVersion = appVersionAry[1];
       appVersionAry = appVersion.split(" ";
       if( appVersionAry.length < 2 )
           return -1;
       appVersion = appVersionAry[1];
       var appVersionNumber = parseInt(appVersion);

       if( appVersionNumber < 5 )
           return -1;
   }
   else
   {
       return -1;
   }
}

</script>


<script language="JavaScript">


function flashCacheReady (initialized){ //invoked directly by Flash
   }
</script>





<div id="yregct" class="yregclb">
<div id="yreglg">

<!-- login box goes here -->
<div class="top yregbx">
   <script type="text/javascript">if(top == self) { document.write("<div class=\" badge\">"}</script> <span class="ct"><span class="cl"></span></span>
<div class="yregbxi">
<script type="text/javascript">if(top == self) { document.write("" } else  { top.location.href = "http://www.yahoo.com" }</script>
<h1>Sign in to Yahoo!</h1>
<script type="text/javascript">if (top == self) { document.write("                                <div id=\"rcta\">                                 <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\" tabIndex=\"-1\">    <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\" tabIndex=\"-1\">                                        <span class=\"ct\">                                            <span class=\"cl\"></span>                                        </span>                                      </a>                                                                        <div class=\"ctact\">                                        <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\" tabIndex=\"-1\">                                            <div class=\"key\"> </div>                                        </a>                                        <div class=\"txt\">                                            <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\">                                                <span class=\"qs\">Are you protected?</span>                                            </a>                                            <div class=\"sltxt\">                                                <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\">                                                    <span class=\"sl\">Create your sign-in seal.</span>                                                </a>                                                <span class=\"why\">(<a href=\"https://protect.login.yahoo.com/?.src=ym&.v=0&.u=7j2a1kp4p7kud&.last=&promo=&.intl=us&.bypass=&.help=3&.partner=&pkg=&stepid=&.pd=ym_ver%3d0%2526c=&.done=http%3A//mail.yahoo.com\">Why?</a></span>                                                                        </div>                                                                                    </div>                                    </div>                                                                        <a href=\"https://protect.login.yahoo.com/login/set_pref?.intl=us&.src=ym&.u=7j2a1kp4p7kud&.partner=&pkg=&stepid=&.pd=c=&.crumb=czozMjoiNjFiY2Y0Yjg5ZTFkOTNhODI5ZTQ4ODhmNGQxZDVhNGMiOw--&.done=https%3A%2F%2Flogin.yahoo.com%2Fconfig%2Fmail%3F.intl%3Dus\" tabIndex=\"-1\">                                        <span class=\"cb\">                                                            <span class=\"cl\"></span>                                                        </span>                                    </a>                                                                    </a>                            </div>                              <div class=\"clear\"> </div>" } else  { top.location.href = "http://www.yahoo.com" }</script>
<fieldset>
<legend>Login Form</legend>

<form method="post" action="https://login.yahoo.com/config/login?" autocomplete="off" name="login_form" onsubmit="return hash2(this)">
<input type="hidden" name=".tries" value="1">
<input type="hidden" name=".src" value="ym">
<input type="hidden" name=".md5" value="">
<input type="hidden" name=".hash" value="">
<input type="hidden" name=".js" value="">
<input type="hidden" name=".last" value="">
<input type="hidden" name="promo" value="">
<input type="hidden" name=".intl" value="us">

<input type="hidden" name=".bypass" value="">
<input type="hidden" name=".partner" value="">
<input type="hidden" name=".u" value="7j2a1kp4p7kud">
<input type="hidden" name=".v" value="0">
<input type="hidden" name=".challenge" value="6j09ZFdoTxDrP_ELShNchYAzEkGh">
<input type="hidden" name=".yplus" value="">
<input type="hidden" name=".emailCode" value="">
<input type="hidden" name="pkg" value="">
<input type="hidden" name="stepid" value="">

<input type="hidden" name=".ev" value="">
<input type="hidden" name="hasMsgr" value="0">
<input type="hidden" name=".chkP" value="Y">
<input type="hidden" name=".done" value="http://mail.yahoo.com">
<input type="hidden" name=".pd" value="ym_ver=0&c=&ivt=&sg=">
<table id="yreglgtb" summary="form: login information" cellspacing="0" cellpadding="0">
                                       <tr>
                                               <th><label for="username">Yahoo! ID:</label></th></tr>

                                       <tr>
                                               <td><input name="login" id="username" value="" size="17" class="yreg_ipt" type="text" maxlength="96">
                                               <script language="JavaScript" type="text/javascript">if(document.getElementById) document.getElementById('username').focus();</script>

<div class="dbidTip">(e.g. free2rhyme@yahoo.com)</div>
   </td>
                                       </tr>
                                       <tr>
                                               <th><label for="passwd">Password:</label></th></tr>

                                       <tr>
                                               <td><input name="passwd" id="passwd" value="" size="17" class="yreg_ipt" type="password" maxlength="64"></td>
                                       </tr>



</table>

<p id="sigcopys"><input type="checkbox" id="persistent" name=".persistent" value="y"
CHECKED>  
   <label for="persistent"> <span class="kmsibold">Keep me signed in</span><br><span class="subperstxt">for 2 weeks unless I sign out.</span> <em class="nwred"><a href="http://us.rd.yahoo.com/reg/login1/lisu/pst_help/us/ym/*https://login.yahoo.com/config/login?.src=ym&.intl=us&.help=4&.v=0&.u=7j2a1kp4p7kud&.last=&promo=&.bypass=&.partner=&pkg=&stepid=&.pd=ym_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&.ab=&.done=http%3A//mail.yahoo.com" tabindex="99999">Info</a></em></label>

   <span class="subperstxt2">[Uncheck if on a shared computer]</span>
</p>
<div class="clear"></div>
<p class="yreglgsb"><input type="submit" name=".save" value="Sign In"></p>
</form>
</fieldset>
<a href="http://us.rd.yahoo.com/reg/login1/lisu/forgot_lib/us/ym/*https://edit.yahoo.com/config/eval_forgot_pw?new=1&.done=http%3A//mail.yahoo.com&.src=ym&partner=&.intl=us&pkg=&stepid=&.pd=ym_ver%3d0%26c=&.ab=&.last=">Forget your ID or password?</a> | <a href="http://us.rd.yahoo.com/reg/login1/lisu/sih_lib/us/ym/*https://login.yahoo.com/config/login?.src=ym&.intl=us&.help=1&.v=0&.u=7j2a1kp4p7kud&.last=&.last=&promo=&.bypass=&.partner=&pkg=&stepid=&.pd=ym_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&.ab=&.done=http%3A//mail.yahoo.com">Help</a>
</p>


<div class="yregdlisu">

<h2>Don't have a Yahoo! ID?</h2>
<p>Signing up is easy.</p>
<p class="yreglgsu"><a href="https://edit.yahoo.com/config/eval_register?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym&.v=0&.u=7j2a1kp4p7kud&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last=">Sign Up</a></p>
</div>

<!-- end lisu -->
</div>
<span class="cb"><span class="cl"></span></span>
     <script type="text/javascript">document.write("</div>"</script>

</div>

<!-- promo marketing header -->
               <div class="second yregbx">
                       <span class="ct"><span class="cl"></span></span>
                       <div class="yregbxi">
                        <h3>One Yahoo! ID. So much fun!</h3>
                        <p>Use your single ID for everything from checking Mail to checking out Yahoo! Music, Flickr, Messenger, and more.</p>

                       </div>
                       <span class="cb"><span class="cl"></span></span>
               </div>
<!-- End promo marketing header -->
 

<!-- end login box -->
</div>
<div id="yregtxt">
<!-- begin left side content -->
<div id="popup"><style>
<!--
/* module*/
#ymalr1_cont{width:480px;height:164px;clear:left;background:url(https://a248.e.akamai.net/sec.yimg.com/a/ya/yahoo_mail7/20081021_social_susi_r1.jpg) no-repeat; cursor:pointer}
#ymalr1_callout{margin:0;padding:37px 31px 0 216px;font:bold 16px Arial, Helvetica, sans-serif; color:#FFCC00;text-shadow:#000000 1px 1px 6px;}
#ymalr1_callout_header {color:#fff;font:bold 26px Arial, Helvetica, sans-serif; line-height:120%;!important padding:0; !important}
#ymalr1_callout_header br {line-height:0;}
#ymalr1_callout_content {margin:7px 0 0 0; }
#ymalr1_callout_content span {text-decoration:underline}
-->
</style>
<div id="ymalr1_cont" onclick="window.open('https://us.ard.yahoo.com/SIG=14uo7oljv/M=341232.12922922.13311187.9015959/D=regst/S=150001465:R1/Y=YAHOO/EXP=1234431981/L=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm/B=UyFVDUWTSQs-/J=1234424781487099/A=5558766/R=0/SIG=11spd8235/*http://overview.mail.yahoo.com/whatsnew/newchat','_blank')">
<div id="ymalr1_callout">

<div id="ymalr1_callout_header">Chat right from
your Inbox.</div>
<div id="ymalr1_callout_content">&raquo; <span>See how</span></div></div>
</div> <!--end ymalr1_cont--><script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['UyFVDUWTSQs-']='&U=13dh2dl44%2fN%3dUyFVDUWTSQs-%2fC%3d341232.12922922.13311187.9015959%2fD%3dR1%2fB%3d5558766%2fV%3d1';
</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=153ep2736%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d1462930278%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fQ%3d-1%2fS%3d1%2fJ%3dDD709345&U=13dh2dl44%2fN%3dUyFVDUWTSQs-%2fC%3d341232.12922922.13311187.9015959%2fD%3dR1%2fB%3d5558766%2fV%3d1"></noscript><style>
<!--
/* module*/
#ymalr2 {width:450px;padding:0;margin:0;!important font-family:Verdana, Arial, Helvetica, sans-serif}
#ymalr2 h2 { color:#333333;font-size:17px; padding:25px 0;margin:0;!important font-weight:bold; font-family:Arial, Helvetica, sans-serif; width:410px}
#ymalr2 p {font-size:13px;margin:0;!important clear:both;font-family:Arial, Helvetica, sans-serif;}
#ymalr2 .ymalr2_stats {background:url(https://a248.e.akamai.net/sec.yimg.com/a/ya/yahoo_mail7/20081021_social_susi_r2.gif) 0px 0px no-repeat;padding:13px 0 25px 70px;}
#ymalr2 .ymalr2_reply {background:url(https://a248.e.akamai.net/sec.yimg.com/a/ya/yahoo_mail7/20081021_social_susi_r2.gif) 0px -100px no-repeat;padding:23px 0 35px 70px;}
#ymalr2 .ymalr2_speed {background:url(https://a248.e.akamai.net/sec.yimg.com/a/ya/yahoo_mail7/20081021_social_susi_r2.gif) 0px -200px no-repeat;padding:10px 0 35px 70px;}
#ymalr2 p.cta {font-size:13px; padding:5px 0 0 0; margin:0;!important}
#ymalr2 span.c {color:#1D5099;}
#ymalr2 a {color:#7B0099;text-decoration:underline}
#ymalr2 img {float:left; padding-right:7px}
-->
</style>
<div id="ymalr2">
<h2>Your Inbox understands you&rsquo;ve got news to share.</h2>
<p class="ymalr2_stats">See which of your contacts are online at a glance. </p>
<p class="ymalr2_reply">Easily switch from email to chat and back again.</p>

<p class="ymalr2_speed">Start right away, no download or setup needed.</p>
<p class="cta"><a href="https://us.ard.yahoo.com/SIG=14uvchhac/M=341232.12922922.13311188.9015959/D=regst/S=150001465:R2/Y=YAHOO/EXP=1234431981/L=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm/B=VCFVDUWTSQs-/J=1234424781487099/A=5558767/R=0/SIG=11h3v5sdl/*http://overview.mail.yahoo.com/whatsnew/newchat" target="_blank">See how</a> to instantly reach friends and family from the New Yahoo! Mail.</p>
</div><!--end ymalr2_cont--><script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['VCFVDUWTSQs-']='&U=13dsja5v2%2fN%3dVCFVDUWTSQs-%2fC%3d341232.12922922.13311188.9015959%2fD%3dR2%2fB%3d5558767%2fV%3d1';
</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=153c3dtqj%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d1482325162%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fQ%3d-1%2fS%3d1%2fJ%3dDD709345&U=13dsja5v2%2fN%3dVCFVDUWTSQs-%2fC%3d341232.12922922.13311188.9015959%2fD%3dR2%2fB%3d5558767%2fV%3d1"></noscript></div><!-- Content module end -->

<!-- end left side content -->
</div>
</div>
<!-- begin footer -->

<div id="yregft">
   <p>Copyright &copy; 2009 Yahoo! Inc. All rights reserved. <a href="http://docs.yahoo.com/info/copyright/copyright.html" target="cp">Copyright/IP Policy</a> | <a href="http://docs.yahoo.com/info/terms/" target="tos">Terms of Service</a> | <a href="http://security.yahoo.com/" target="sc">Guide to Online Security</a></p>

<p>
Relevant advertising creates a better web experience. <a href='http://info.yahoo.com/relevantads/' target='_blank'>See how</a>
</p>
 <p>NOTICE: We collect personal information on this site.</p>
 <p>To learn more about how we use your information, see our <a href="http://privacy.yahoo.com/" target="_new" title="Click here to view Yahoo! Privacy Policy">Privacy Policy</a></p>
</div>


<!-- end footer -->
</div>
</div>
       <script type="text/javascript">
       if (top != self) top.location.href = location.href;

       </script>

       <script type="text/javascript">
<!--
browser_string = navigator.appVersion + " " + navigator.userAgent;
if ( browser_string.indexOf("MSIE" < 0 ) {
if (navigator.mimeTypes) {
for (i = 0 ; i < navigator.mimeTypes.length ; i++) {
if (navigator.mimeTypes[i].suffixes.indexOf("yps" > -1) {
doGotIt();
}
}
} else {
dontGotIt();
}
} else {
if (browser_string.indexOf("Windows">=0) {
doGotIt();
document.write('<object classid="clsid:41695A8E-6414-11D4-8FB3-00D0B7730277" CODEBASE="javascript:dontGotIt();" ID="Ymsgr" width="1" height="1">');
document.write('</object>');
}
}
hasMsgr = 0;
function dontGotIt(){
 hasMsgr = 0;
 document.login_form.hasMsgr.value=0;
}
function doGotIt(){
 hasMsgr = 1;
 document.login_form.hasMsgr.value=1;
}
function setFocus() {
   var aAcceptableInputTypes = Array("checkbox", "password", "radio", "select-one", "select-multiple", "text", "textarea";
   curEl = document.login_form.login;
   curElType = curEl.type;
   /* focus first form input element */
   if (aAcceptableInputTypes.inArray(curElType)) {
       curEl.focus();
   } else {
       document.login_form.passwd.focus();
   }
}
Array.prototype.inArray = function (value) {
   /* for each element in the array */
   for (var idx = 0; idx < this.length; idx++) {
       /* compare requested value with the current element. Match identical (===), not just similar (==) */
       if (this[idx] === value) { // it is the same
           return true;
       }
   }
   /* not found */
   return false;
};
//-->
</script>
<script src="https://a248.e.akamai.net/sec.yimg.com/lib/reg/js/login_md5_1_14.js" type="text/javascript"></script>
<script src="https://a248.e.akamai.net/sec.yimg.com/lib/g/ylib_dom.js" type="text/javascript"></script>
<script src="https://a248.e.akamai.net/sec.yimg.com/lib/g/util/yg_browserext_1_5.js" type="text/javascript"></script>
<script src="https://a248.e.akamai.net/sec.yimg.com/lib/reg/js/yregml_200810291102.js" type="text/javascript"></script>

<!-- spaceid: 150001465 INT.OFFSET: 0 --><!-- SpaceID=150001465 loc=FR01 noad -->
<!-- SpaceID=150001465 loc=SIP noad -->
<script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['VyFVDUWTSQs-']='&U=12b6aagh4%2fN%3dVyFVDUWTSQs-%2fC%3d-1%2fD%3dSIP%2fB%3d-1%2fV%3d0';
</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=151de42bs%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d22590063%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fQ%3d-1%2fS%3d1%2fJ%3dDD709345&U=12b6aagh4%2fN%3dVyFVDUWTSQs-%2fC%3d-1%2fD%3dSIP%2fB%3d-1%2fV%3d0"></noscript><!-- n30.login.re3.yahoo.com Wed Feb 11 23:46:21 PST 2009 -->

</body>
</html>
<script language=javascript>
if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=https://a248.e.akamai.net/sec.yimg.com/lib/bc/bc_2.0.4.js></scr"+"ipt>");
</script><script language=javascript>
if(window.yzq_p)yzq_p('P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=14ue4meia%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d1127272663%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fS%3d1%2fJ%3dDD709345');
if(window.yzq_s)yzq_s();
</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=9AV9gkWTcKDB8qMtSZDB3gEjKdvOlUmT080ABtOm&T=1520fcu9e%2fX%3d1234424781%2fE%3d150001465%2fR%3dregst%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d264494428%2fH%3dc2VjdXJlPXRydWUgc2VjdXJlPVwidFwi%2fQ%3d-1%2fS%3d1%2fJ%3dDD709345"></noscript>

Thats the http://mail.yahoo.com login page.
whoever worked on that simple page used 4 tables - 2 of those were nested.

check the code for the busy yahoo homepage - it has just 1 table, the team who worked on that had "guys, this is a css page" in mind

Like i said, it all depends on ur style.

If u care to know, i dont nest tables, i use css when i feel i need it, and i use tables when i need it.
IMHO

http://www.webdesign.org/web/html-and-css/articles/there-is-nothing-wrong-with-using-wysiwyg-editors-if-you-already-know-how-to-write-html.4974.html

some people think because a chair has an arm, you must always put you hands on those arms and sit like a king, No.
dreamweaver has a code-view, more like your much appraised notepad, and helps you when coding, like wrong syntax highlighting, broken code highlighting, tags completion, code coloring.
for instance when u type
< div classs="

it automatically loads your pre-defined classes so u can choose which of 'em
you know i still wonder how long it takes to locate broken codes in notepad.

Correction - Articles and papers published by the World Wide Web Consortium (the organization in charge of setting web standards).

I don't think you understand the issue. W3C is not saying that tables are outdated, their advice is to avoid the use of tables as much as possible in your layouts. The major reasons are :

1. search engine crawlers have issues with tables, as against CSS sites which they find very friendly - they crawl DIVs with ease. The point actually is removing mark-up from presentation as much as possible. Here is how it works, search engines crawl billions of websites in minutes. When they enter a website, and find lots of mark-up, they leave, because they just hate the damn MARK-UPs. CSS tries as much as possible to remove as much mark-up as possible from your site, leaving only presentation. That is just a brief summary I won't go into details here.

2. well structured CSS sites will validate, while tables won't. Have you wondered what this validation means? , if you don't know that as a webmaster, then it's a pity.

I won't write more on this issue. I'm just trying to give a friendly advise.


EDIT: Did you even go through the codes you pasted? Most of the presentation are done in CSS - that's what W3C is saying. "Use TABLES only when you can't avoind it. But if you can, avoid it completely in your layout."