Why Switch from Table to CSS layout?

[Stevie D]

1) Easier Site-Wide Changes – CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver template files. I make a change to the template file and boom, it changes on all pages. What’s the difference?

First up, there's no reason why you can't combine DW template files with CSS to get the best of both worlds.

Second, you're tied in to using a particular platform there - Dreamweaver. CSS is independent, and so you can use whatever software, frameworks and templates are best at any time, you aren't stuck with using the same one for ever more just because that's how you built the site in the first place.

2) Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup.

Maybe not many people in your target demographic are still using dialup, but have you tried accessing most major websites on a mobile phone? Even a supposed exemplar of good practice such as Sitepoint ( ) is painfully slow. Streamlining the code (and getting rid of the rubbish) makes a massive difference.

4) Separation of Style and Content – I guess this one is related #1, ease of updating?

It's more about making the content independent of the means of delivery. With a CSS-based layout, you can write different stylesheets that present the contents differently for full-size screens, mobile devices and when printing. That ensures that your surfers always get the page set out in the most appropriate way, for whatever media they are using. It is much harder to do that effectively if you have a table-based layout.

This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

All too often, table-based designs are not easily adaptable. I remember years ago, after inheriting a table-based design, I needed to add another item to the middle of the navigation menu. In a CSS design, it's as simple as adding <li><a href="/page.htm">Page</a></li>. In this particular tabular monstrosity, it involved relaying half of the page, because of the way the cells in that section were tied with cells elsewhere on the page.

5) Greater Consistency – If you use template files and CSS, where is there inconsistency?

That is unlikely to be an issue if you're using templates and CSS for formatting.

1) Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features.

That isn't much of an issue these days. The current raft of browsers are all pretty consistent in the way they handle CSS, and most of the variations these days come about when authors use browser-specific implementations of draft CSS3 features. Yes, there are still some pitfalls around IE6, but using a Strict doctype will avoid many of these, and you aren't immune from problems if you use a table-based layout either.

Personally, if I could instantly convert a design into HTML, I’d do it.

My take is that you're coming at it backwards. Rather than thinking about it as 'converting' a pre-existing design to HTML+CSS, you need to think about building a website in a different way.

The foundation of a website is its contents. Start with that. Basic text, wrapped in <p>s. Headings, marked up with <hx>s. Navigation lists, marked as <ul>s. And so on. A bare-bones plain text page, of the sort we used to see back in the early 90s. Then you can think about the layout and the design. Where do you want this bit to go? Where do you want that bit to go? What styling do you want there? Build it from the ground up, and you'll get a much more flexible design than if you try to painstakingly replicate a layout that was never right for the medium in the first place.

“..it should be the medium that dictates your design.” Well, I do know I’m designing for the internet. I’m not confused and thinking I’m designing a brochure, annual report or billboard. Should I apologize for being a designer who learned how to code? Should web designers be programmers who learned how to design?

Where too many designers - particularly those from a print background - go wrong is that they don't fully appreciate what the medium of the web is all about. They think it's just a visual representation of a page, when it really is much more than that. A good web page is ultimately flexible. And by that, I don't just mean that it has a fluid layout that adapts to different viewport sizes, I mean that it can work in different ways. You can streamline it and get rid of the cruft for printing (who needs a clickable menu on a printed page?). You can linearise it to work better on a mobile phone - and take out some of the more resource-intensive components as well. You can allow people to apply their own custom stylesheets to meet whatever visual or cognitive needs they have (eg large text, single column, colours and backgrounds). They can read it and navigate around it using a speech synthesizer.

Most table-based layouts don't make any of that easy, or often even possible. The more complex the layout, the more likely that when it is linearised (by a speech synthesizer, a mobile phone, a search spider, or someone trying to highlight the text to copy and paste it into another application), it all goes haywire, and you find that the contents doesn't follow a logical sequence from start to end, but jumps around all over the place.

Being a good web designer requires a range of skills. You need to understand HTML code, CSS and the way they work together. You need an eye for visuals and graphics, for colour and shape. You need to know the technological constraints and opportunities the medium has. Different people come to web design from different routes, different backgrounds and with different skill-sets. They can all be equally valid starting points, but that's what they are. A truely good web designer will take the time to learn all of those skills; anything less and you won't be doing the best job you can.

Maybe the decision to go CSS or table depends on who you are, how you like to work, and who your clients are.

It depends what kind of a job you want to do. If you're satisfied with "OK, it does the job, just about, for most people" then by all means stick with tables. But if you want to do what is best for your clients and their visitors then you need to learn how to put those tables behind you.

[Stevie D]

If I'm understanding correctly, semantic structure of content is about giving heirachy and order to information. Right now I'm in the WHY phase, so let me ask, why is having a semantic structure important? Does it help more than the blind and the search engines? In what other ways is it useful or used?

It isn't just people with white sticks and guide dogs who will benefit from an appropriate hierarchical structure that assistive technology can understand; there are plenty of people who are sighted (although may have varying degrees of visual impairment) who will use screen readers - for example, some dyslexic people find it easier to have the page read out loud to them than to read it themselves, particularly on sites where the layout and colour scheme increases the jarring and exacerbates the difficulty they have with text anyway. Some browsers (eg Opera) allow users to jump through the headings to quickly navigate through a document.

And yes, the biggest blind user of all is Googlebot. If you use semantically appropriate elements, Googlebot will have a much easier time understanding what your page is all about and how it should rank for different queries. If you haven't used any heading tags at all, it will make it harder for Big G to figure out what is what, what is important, and why it should send people to you.

Finally, what a lot of people find is that using a structured hierarchy actually makes them think about the content more clearly. I have lost count of the number of documents I've worked on (probably more so in print than online) where the author has used varying degrees of enlargement and embellishment for headings and subheadings, and it really wasn't clear what the structure was. Sometimes a section that they thought was important (and so gave a bigger, bolder heading to) was actually subsidiary to a previous (smaller fonted) heading. Because they had never sat down and worked out the document tree, and they were just applying styling as and when they wanted it at the time, the result was a disorganised mess. After I'd spent the time working out the hierarchy and applying heading styles appropriate and consistently, the final document was far more logical and well-ordered than it would otherwise have been.

I guess that as someone who has a natural zeal for organisation and categorisation, I struggle to see things from the other side. But, given that there are HTML elements whose sole and entire purpose is to mark up headings, why would you not use them?

[noonnope]

Noonnope,
[...] let me ask, why is having a semantic structure important? Does it help more than the blind and the search engines? In what other ways is it useful or used? Please be really specific.

To answer shortly: yes, it will help accessibility, no, it's not enough to make for a good SEO. But it will help your productivity (you won't be tied up to tools like DW).


**************************


For a people who like to gossip, here's more than you asked for on the subject!


You are looking at it all wrong. You should write semantic html because that was the initial intent. Presentation was of little concern at first. But became an issues along the way.

Tables used for layout for presentational purposes was the same as using shovels to cut the wedding cakes. It can be done, only if you don't have the right tools at the moment, and you really really must.


**************************

Problems for table for layout:

You say "content" and user agents get "table". You say "presentation/layout" and user agents get "table".


Your stand is more of a user. But not your general common universal user, no. Your table layout targets a very specific user: well sighted, having default settings for its visual browser.

Yes, considering ONLY this type of user, the table layout may appear to be doing its job well. And probably it does so. But only up to a point. After that, your work becomes just a questionable solution.


**************************


What about the rest? What about making life easier for you? Some good SEO results may be easily gained w/o the use of "a great SEO and promoter". Effortlessly. So to speak

Using tables layout means more work in this area. That means money spent to repair a mistake. That means waisted money. One client knowing this it's all it takes to make you lose big time.


Also, some countries have laws regarding accessibility. Maybe not your country, maybe not any of your clients' countries. Today. Tomorrow may catch you off guard.



**************************


Let's say these don't matter. Though they do. But lets say they don't. Why should you still bother switching from tables layout? Simple: for the future



Future Markup Validation

Yesterday, using tables for layout was a solution. You practically had no choice.

Today, using tables for layout in your webpage, doesn't make a validator to raise the red flag. But also, today, there are specific ways that replace the need to use tables for layout. You can choose now.

Tomorrow, who knows? HTML5, right or wrong, brings some semantic nuance with its new elements. Validators may start picking on semantics more. Or maybe semantic validators will be the norm also. Will you still be able to choose?




Graceful ageing of your Markup

Yesterday, tables were known by everyone as a solution for layout.

Today, there are still some remembering how was it.

Tomorrow, I'm sure those that could still remember the days when tables were used for markup extensively, will have to really try to remember exactly how it was done.

That puts your today's markup in a bad position regarding those who will have to modify, reuse, rewrite it.



************************************************


Finally, for your web page to be successful it has to pass many tests in more than one regard.

While it may be invalid and disregarding the semantics it may be ranking at the top, while simply sucking for every user out there. It will soon go to the bottom.

While it may be valid, it may not be semantic and still rank at the top, and having users struggling inside for valuable content. For a while it will remain at the top.

It may be semantic and valid, rank at the bottom, but provide a wonderful UX with a wonderful content. It will raise at the top and stay there longer w/o any major efforts.


If you care enough, you should stay on top of them all: semantic, valid, UX, ranking. This will ensure a FUTURE for your webpage.

[felgall]

I can tell the difference between a table and a heading.

The HTML is needed in order that the computer can tell the difference between them. A computer tells the difference by looking at the surrounding HTML and if it iis an <h1> its a heading and if it is a <table> it is a table regardless of what the person who wrote it meant for it to be.

The biggest saving from using the table tag correctly is all the years of your time you would spend on making individual changes to thousands of web pages if you use tables incorrectly that you save when you use CSS instead. Don't you think it is worth warning people that they are taking an approach that will literally waste years of their time?

Of course if you were to lose your eyesight then you would only hear a jumbled incomprehensible mess for most table layout pages instead of being able to properly follow what the page is about by listening to it. Since a lot of people have their eyesight worsen as they grow older there is a really good chance that you will eventually have to listen to those jumbled messes that you currently don't care about.

[aidos]

Don't you think it is worth warning people that they are taking an approach that will literally waste years of their time?

I have said on at least 1 occassion in this thread that I would discourage people from using tables for layout but they then have the right to choose to use tables if they so wish. I don't care at all if people then end up choosing to use tables because it will make no difference to me. Life for me does not revolve around whether people use tables for layout or not

[felgall]

Life for me does not revolve around whether people use tables for layout or not

It will if you end up unable to see though because then you'll get all the content in whatever jumbled order it is in the table instead of in a way that makes sense.

[aidos]

It will if you end up unable to see though.

That's not true because I don't touch web pages that use tables for layout

[felgall]

That's not true because I don't touch web pages that use tables for layout

If you take that view then I will agree with you. Those who use tables for layout will eventually end up with no visitors to their pages at all and so it will die out that way.

[aidos]

If you take that view then I will agree with you.

ok thanks Now we can let this thread get back on course since back in post #14 I said

I don't touch other peoples' websites if they used tables for layout.

[felgall]

ok thanks Now we can let this thread get back on course since back in post #14 I said

I read that as you not being prepared to work on sites like that. The statement doesn't imply that you are not prepared to visit such sites at all. Two completely different things and your original statement was ambiguous enough to be misinterpreted.

[aidos]

ok no problem

[Black Max]

y'all

[JenniferBigBlue]

Okay, so a semantic structure is good for any type of person with a reading disability (visual impairment, dyslexia, can’t read, the elderly, etc. where readers are needed) and webbots. In these cases “presentation” is irrelevant. I like a clear outline and structure as much as the next guy, just wanted to get specific about why it was important.

[JenniferBigBlue]

To answer shortly: yes, it will help accessibility, no, it's not enough to make for a good SEO. But it will help your productivity (you won't be tied up to tools like DW) .

I like DW, tie me up!

You are looking at it all wrong. You should write semantic html because that was the initial intent. Presentation was of little concern at first. But became an issue along the way.

As I’m sure you’ve already read, original intent doesn’t mean much to me. There’s just way too many inventions being used today that have little to do with what the inventor intended. Bell developed the metal detector to help doctors find bullets in patients (a particular president starting out). Does that mean airports shouldn’t use them? (I say they shouldn’t if it would make the lines move faster!) Is the internet being used today for its original intention? It wasn’t developed so you could buy down pillows or watch porn I assure you! After a tool is invented and goes public, HOW the public chooses to use it is out of their hands, and with time, the initial intent becomes meaningless.

I’m sure glad “presentation” has become an issue or I’d be out of a job. I’m starting to get a sense that most of the folks who have been helping me here are programmers. Perhaps programmers who view “presentation” as somehow inferior to content? Maybe it would be wise to view both presentation and content as equally important. No one wants a beautiful woman who’s dumb as a doorknob. (Well, maybe some.) But like it or not, sometimes “looks” can at least get your foot in the door. It’s human nature. After that, it’s about the quality inside. As I’ve said, both are important to me, but I can’t deny where my strengths lay…with presentation. Maybe that’s why some designers prefer tables, it’s more intuitive and you can SEE what you're doing as you do it as oppose to writing code than looking at what you got. If I can create beauty with CSS, I’ll do it.

Tables used for layout for presentational purposes was the same as using shovels to cut the wedding cakes. It can be done, only if you don't have the right tools at the moment, and you really really must.

Maybe not shovels, but a very large spoon? I doubt so many would be using them if they were that disfunctional for the task.

You say "content" and user agents get "table". You say "presentation/layout" and user agents get "table".

Uh, no. Most of the users I know see just the presentation and information. They have no clue HOW the site was constructed (and for that matter, don’t care.) When I first reveal a new design to a client their very first comments are without exception about how the site LOOKS….always! After we get the look right, then they want to dive into function.

Your stand is more of a user. But not your general common universal user, no. Your table layout targets a very specific user: well sighted, having default settings for its visual browser. "

Yes, without a doubt, the sites I create are for people who can see, aren’t savvy enough to adjust settings and are looking at it using a visual browser. I don't have the stats handy, but what percentage of the population would that be?

What about the rest? What about making life easier for you? Some good SEO results may be easily gained w/o the use of "a great SEO and promoter". Effortlessly. So to speak

Using tables layout means more work in this area. That means money spent to repair a mistake. That means waisted money. One client knowing this it's all it takes to make you lose big time.

Now THIS, I’m interested in!! I’m all for making my work easier… absolutely, positively. And if I listen to Paul, he said there was a very steep learning curve (which I’ve heard over and over), but in the end it will be worth it. I guess it’s a matter of me trusting that this will be the case. I’m still struggling with HOW it will make my life easier, but again, I guess I’ll need to trust that its true. (If you know how it will, tell me please.)

Today, using tables for layout in your webpage, doesn't make a validator to raise the red flag. But also, today, there are specific ways that replace the need to use tables for layout. You can choose now.

Talk to me about this. What is the benefit of using the validator? And please be kind to my ignorance.

[JenniferBigBlue]

To help others explain the specific benefits that CSS layout and semantic markup would have for you it would help to see examples of your current work. Please provide links to sites you have created.

Here's one. www.katewertz.com

Why do I suddenly feel like a lamb being led to slaughter? Programmers looking at a designer's code. Danger, Danger Will Robinson!!

[DaveMaxwell]

I like DW, tie me up!

(must resist open invitation) I'm a fan of DW myself - I was bummed that Adobe bought them since I thought the whole suite was far superior....

I’m sure glad “presentation” has become an issue or I’d be out of a job. I’m starting to get a sense that most of the folks who have been helping me here are programmers. Perhaps programmers who view “presentation” as somehow inferior to content?

Don't forget that presentation can mean different things to different people. You've got browser-based presentation, mobile-based presentation, accessability-based presentation, and even product speficic presentation (iPhone/iPad ring a bell?) . Using css to control layout allows for much more finite control over the presentation to these various platforms without forcing content changes (I'm defining content as changes to the html itself).

Uh, no. Most of the users I know see just the presentation and information. They have no clue HOW the site was constructed (and for that matter, don’t care.) When I first reveal a new design to a client their very first comments are without exception about how the site LOOKS….always! After we get the look right, then they want to dive into function.

To an extent you're right, but when you're working in one media, and the client works in another your work has to be flexible enough to work that way. We had one that started their design review on a smartphone, which we weren't prepared for (not in the specs), but since it was css based, it was easy enough to modify the display to work there.

Yes, without a doubt, the sites I create are for people who can see, aren’t savvy enough to adjust settings and are looking at it using a visual browser. I don't have the stats handy, but what percentage of the population would that be?

There are other things than just purely visual. There's mobile browsers vs non-mobile as just one example. And even if you're not talking about visual, you have to look at your user numbers, even 1% could be a decent number. 1% of 10,000 is 100 users. And have you ever heard the old customer service saying that when a person has a bad experience, they will tell seven different people about that bad experience? So that 100 now becomes potentially 700 people who have a bad experience. And with the virability of the web, I'd venture that the old adage is way out of line - that seven is probably in the 100's now and grows exponentially each day.

Now THIS, I’m interested in!! I’m all for making my work easier… absolutely, positively. And if I listen to Paul, he said there was a very steep learning curve (which I’ve heard over and over), but in the end it will be worth it. I guess it’s a matter of me trusting that this will be the case. I’m still struggling with HOW it will make my life easier, but again, I guess I’ll need to trust that its true. (If you know how it will, tell me please.)

I'll be the first to admit I still have problems with css-based work. I just recently have had two that I haven't needed Paul to figure out what stupid thing I did which caused the issue.

But my most recent mockup work proved to me how powerful the work has been. I had a three column design I was working on. Well, the customer decided they wanted the two outer columns switched and the widths changed for each of them. That would have been a bit of work in the old table based methods because of having to track down the appropriate table columns and copying/pasting them, cursing because I missed a portion of the column (and I'm one to comment the end of a column to try and keep them together) or something and having to do it again

Well, for this project it was done five minutes later, and it would have been less time if I hadn't fat fingered the widths. I change the floats on the two columns, adjusted the margins appropriately, then altered the margins on the middle column. And DONE! One file, no copying/pasting, very little problems. Much easier than in the past.


Talk to me about this. What is the benefit of using the validator? And please be kind to my ignorance.[/QUOTE]

[Paul O'B]

Here's one. www.katewertz.com

Why do I suddenly feel like a lamb being led to slaughter? Programmers looking at a designer's code. Danger, Danger Will Robinson!!

That's not too bad

But 20 minutes later you could have something roughly like this.

<!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>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
p {
    margin:0 0 1em
}
body {
    background-color:#FFFFFF;
    background-image:url(http://www.katewertz.com/images/pageBKGD.jpg);
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, san-serif;
}
a:link {
    color: #173E2B;
}
a:visited {
    color: #632B2C;
}
a:hover, a:focus {
    color: #632B2C;
}
a:active {
    color: #632B2C;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
h1, h2.main {
    font-family: Arial, Helvetica, san-serif;
    font-size: 16pt;
    color: #173E2B;
    font-weight: bold;
    margin:0 0 2px;
}
h2 {
    font-family: Verdana, Trebuchet MS, Arial, Helvetica, san-serif;
    font-size: 9pt;
    line-height: 12pt;
    margin: 0;
    font-weight: normal;
    color: #173E2B;
}
h3 {
    font-size: 9pt;
    line-height: 12pt;
    color: #173E2B;
}
#NavImg-1 {
    position: relative;
    left:0px;
    top:0px;
}
#contents1 {
    position: relative;
    float:right;
    width: 485px;
    z-index: 1;
    font-size: 9pt;
    line-height: 12pt;
    color: #173E2B;
    margin-right:130px;
    display:inline;
    padding:45px 0 5px;
}
#locations1 {
    position: relative;
    margin:0 0 0 40px;
    width: 185px;
    z-index: 2;
    font-family: Trebuchet MS, Arial, Helvetica, san-serif;
    font-size: 7pt;
    line-height: 12pt;
    color: #173E2B;
    font-weight: bold;
    font-style: italic;
    text-align:center;
}
#wrap {
    width:900px;
    margin:auto;
    overflow:hidden;
}
#footer {
    height:60px;
    background:#173E2B;
    border-bottom:20px solid #003333;
    clear:both;
}
.logo, .logo em {
    width:900px;
    height:158px;
    margin:0;
    color:#fff;
    position:relative;
    overflow:hidden;
    text-align:center;
}
.logo em {
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
    background:url(http://www.katewertz.com/images/top.jpg) no-repeat 0 0;
}
.logo b {
    display:block;
    font-style:italic
}
.sideimg {
    float:left;
    margin:2px 10px 2px 2px;
    displau:inline;
}
#sidebar {
    float:left;
    width:285px;
    background:url(http://www.katewertz.com/images/side.gif) no-repeat 0 0;
}
ul#nav {
    width:285px;
    padding:39px 0 0;
    min-height:246px;
}
* html ul#nav{height:246px}
ul#nav li {
    display:inline
}
ul#nav li a, ul#nav li b {
    display:block;
    width:202px;
    height:25px;
    margin:0 0 0 37px;
    text-decoration:none;
    color:#000;
    overflow:hidden;
    position:relative;
}
ul#nav a b {
    margin:0;
    position:absolute;
    left:0;
    top:0;
}
ul#nav li a b{background:url(http://www.katewertz.com/images/side.gif) no-repeat -37px -39px;}
ul#nav li.home a b{background-position:-37px -39px;}
ul#nav li.services a b{background-position:-37px -64px;}
ul#nav li.jungian a b{background-position:-37px -89px;}
ul#nav li.qual a b{background-position:-37px -114px;}
ul#nav li.faq a b{background-position:-37px -139px;}
ul#nav li.loc a b{background-position:-37px -164px;}
ul#nav li.contact a b{background-position:-37px -189px;}
ul#nav a:hover b{border-left:1px solid red;width:200px}
.welcome {
    display:block;
    padding:20px 0 2px;
}
.sig span, .sig span b {
    width:160px;
    height:35px;
    position:relative;
    overflow:hidden;
    display:block;
}
.sig span b {
    position:absolute;
    left:0;
    top:0;
    background:#fff url(http://www.katewertz.com/images/signature.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<div id="wrap">
    <h1 class="logo">Kate Wertz <b>Psychotherapy with Soul in Mind</b><em></em></h1>
    <div id="contents1">
        <h2 class="main">Holistic Psychotherapy and Counseling</h2>
        <p><img src="http://www.katewertz.com/images/katephoto2.jpg" width="100" height="168" alt="Kate Wertz" class="sideimg" ><strong class="welcome">Welcome.</strong>I am a licensed therapist offering counseling and Jungian depth psychotherapy in Jupiter, Florida. Over twenty years of experience supporting people to make positive life changes has taught me that each of us has the capacity for greater joy, satisfaction and peace of mind, even during hard times. </p>
        <p>Modern living can be stressful. In trying to keep up with life&rsquo;s demands, we can easily lose touch with our deeper selves. The result can be anxiety, stress, depression, relationship or career difficulties, addictive behavior or simply feeling overwhelmed and stuck. Therapy can help you to take charge of your life. It can help you to listen to your inner wisdom, to live more fully in the present and to make more satisfying choices. Therapy provides the opportunity to heal old hurts and to become unstuck. It can help you to create greater contentment, a more balanced life and more fulfilling relationships. And it can also provide support to explore your creative potential and find greater  meaning in life.</p>
        <p>This site contains information about my training and approach. I would be delighted to talk with you by phone (561-748-9512) about whether therapy might benefit you. </p>
        <p class="sig"><span>Kate Wertz<b></b></span> <strong>Kate Wertz, M.Ed.<br>
            Licensed Mental Health Counselor</strong></p>
        <address>
        Alhambra Plaza <br>
        Suite 203 E <br>
        725 North A1A<br>
        Jupiter, Florida 33477
        </address>
        <p>561- 748-9512<br>
            <script type="text/javascript" src="emailscript.js"></script>
        </p>
    </div>
    <div id="sidebar">
        <ul id="nav">
            <li class="home"><a href="index.htm">Home<b></b></a></li>
            <li class="services"><a href="services.htm">Services Provided<b></b></a></li>
            <li class="jungian"><a href="jungian.htm">Jungian psychotherapy<b></b></a></li>
            <li class="qual"><a href="qualifications.htm">Kate's Qualifications<b></b></a></li>
            <li class="faq"><a href="faq.htm">FAQ<b></b></a></li>
            <li class="loc"><a href="directions.htm">Location/Directions<b></b></a></li>
            <li class="contact"><a href="contact.htm">Contact<b></b></a></li>
        </ul>
        <div id="locations1">
            <p>Serving clients from<br>
                northern Palm Beach County and <br>
                Martin County, Florida <br>
                Easy access from Jupiter, <br>
                Palm Beach Gardens, Juno Beach, <br>
                North Palm Beach, Hobe Sound <br>
                and Stuart</p>
        </div>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

I'll explain later

[sg707]

Without a question, use CSS layout. Take a look at

http://www.csszengarden.com/

It uses the same HTML that produces completely different layout based on CSS. This is how I like to program.... I posted this methodoly here in site point... they called me divitis or something and very strongly against the idea of doing it that way. Anyways, that site itself is the reason why I favor CSS~

[Paul O'B]

Your page wasn't too bad and you were brave to post it I've seen much much worse and as long as you keep the tables simple and uncomplicated then you won;t run into too much trouble but it could be done just as easy (or more easily in my case) without tables.

There were a few semantic errors and silly things such as alt attributes missing which is very important if you are using an image as content.

Some brief explanations of my example:

The page is basically a 2 column layout which can be done with 2 floats for the columns and top and tailed with a header and footer. It's a very basic structure that doesn't need a table to contain it. The only thing with floats is remember to use a clearing mechanism (see faq on floats).

Starting at the top:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

The doctype above is a partial doctype (no uri) that will trigger quirks mode in all versions of IE which effectively means that IE8 renders as badly as IE5 does and will use the broken box model.

In the broken box model any elements that have a dimension plus padding or borders will be a different size to other browsers because the padding and borders are added inside the width in the broken box model. All other browsers will add the padding and borders to the dimension not subtract from it.

You also lose all the improvements of the modern IE browsers such as hover on elements other than anchors.

Therefore always use a full doctype such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But strict would be better:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

In your page the fist actual content arrives after 520 characters but in my example it's right there at the beginning where you would expect and within 30 characters of the start.

<div id="wrap">
    <h1 class="logo">Kate Wertz <b>Psychotherapy with Soul in Mind</b><em></em></h1>

The h1 uses an image replacement technique and supplies text for users who have images blocked; and text for screenreaders; and text for search engines. It's win win all around. Your heading image would not rank at all as you omitted the alt attributes anyway.

The code you used for your footer was this:

    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td height="60" align="center" valign="top" bgcolor="#173E2B"><img src="http://www.katewertz.com/images/spacer.gif" width="20" height="60" align="absmiddle"></td>
        </tr>
        <tr>
            <td height="20" align="center" bgcolor="#003333"><img src="http://www.katewertz.com/images/spacer.gif" width="20" height="20" align="absmiddle"></td>
        </tr>
    </table>

My code is this:

<div id="footer"></div>

I don't even need to say anything about that

Your navigation is an image map (again without alt attributes) and that will make it hard for screenreaders and SEO.

Juts use a list with image replacement techniques and everyone is happy. You can then create an easy rollover effect so that visual users will have a clue which item they are clicking on. At present I had to guess if I was on the link or not.

Keep the script external where possible.

<script type="text/javascript" src="emailscript.js"></script>

The html in my example is about 18% smaller which is surprising for such a small amount of code although the CSS file has grown it will not be an issue because it will be cached and is only a hit of first view unlike the html which will be seen on every page.

My example was only a rough guide and I didn't spend a lot of time (30 minutes at most) on it so there's probably areas that could be improved more.

Hope it gives you some idea anyway.

[noonnope]

I’m starting to get a sense that most of the folks who have been helping me here are programmers. Perhaps programmers who view “presentation” as somehow inferior to content? Maybe it would be wise to view both presentation and content as equally important.

No, you see, better content (semantic content, w/o tables for layout) means also better presentation.

This is what you must understand: we don't preach to you a philosophical view over the benefits of using CSS for layout.

Instead, we try to make you understand that using CSS for layout will open new doors for you to enhance the presentation part.

Double the fun

Uh, no. Most of the users I know see just the presentation and information. They have no clue HOW the site was constructed (and for that matter, don’t care.)

Actually I was referring to user AGENTS. That HAVE all the clues on HOW the site was constructed. Since they are the user... agents!

Now THIS, I’m interested in!! I’m all for making my work easier… absolutely, positively. And if I listen to Paul, he said there was a very steep learning curve (which I’ve heard over and over), but in the end it will be worth it. I guess it’s a matter of me trusting that this will be the case. I’m still struggling with HOW it will make my life easier, but again, I guess I’ll need to trust that its true. (If you know how it will, tell me please.)

I see the need for another logical example. I don't know how much you had to deal with databases before. But, assuming you can understand a spreadsheet data, you can also visualise how a simple table looks like.

Imagine you want to look for a certain info in a spreadsheet. You do what's easy: bring up the Find or Search option. This will do just fine if you look singular info in a column. Still, up to a point. If your columns contain repeating data you may want to refine your search.

For databases systems you have a more powerful Find or Search option: SQL. With SQL we can interrogate data on multiple columns using different filters in an easy way.

But you see, even SQL cannot help you when your table data is not optimized for search. Meaning, for one thing, that data in your table it's not properly indexed for search.

For tables with small amount of data, optimizing makes little difference. But when tables have reasonable large quantity of data, all the database system power, all the SQL language power, are helpless when dealing with a BAD CONTENT. The search will take ages, when, on the other hand, understanding and using indexes the right way, will only take milliseconds.

Think of CSS layouts as helpful as indexes.

Your table layout. Resorting to this solution, you are making useless the power user AGENTS have. You are offering them BAD CONTENT. It may not make a big difference to the user in some cases.

But there will be cases when tables layout will make your user question whether the solution you're offering rises to its expectations. One thing you probably wouldn't want to happen.

Talk to me about this. What is the benefit of using the validator? And please be kind to my ignorance.

I don't know if you understood properly: semantics is one thing. You can have semantics but your page still be invalid.

One other thing, that you have when using tables for layout, is that you have validations but improper semantics.

You have to cater for both.

[felgall]

Talk to me about this. What is the benefit of using the validator? And please be kind to my ignorance.

The validator will point out some of the errors in your HTML structure. Where you have errors in the HTML then the chances are much greater that at least some of the thousands of different web browsers that exist will treat that garbage differently than the way it gets treated by other browsers and so your page will not look the same in all browsers. At least when your code passes validation you know that at least all the standard compliant browsers will treat it the same way and any differences will be due to errors in the browser rather than errors in the HTML.

There isn't enough time to test your page in all of the thousands of different browsers that exist and so the most effective way of testing is to make sure that the HTML is valid and that it looks the way you expect in the most popular half dozen or so browsers. That way you can expect that most of the other less popular browsers should display it correctly without having to test them all.

You can find a list of a few hundred browsers at http://en.wikipedia.org/wiki/List_of_web_browsers which also has links to more pages that list even more browsers.

[aidos]

Maybe it would be wise to view both presentation and content as equally important.

Yep totally agree 100%. I don't see any point in having some u-beaut wizz-bang earth moving content if it's difficult to read or get at. (but I would still advise against using tables for layout)

[felgall]

Yep totally agree 100%. I don't see any point in having some u-beaut wizz-bang earth moving content if it's difficult to read or get at. (but I would still advise against using tables for layout)

Plus you need to remember that the appearance will not be the same for all media. A web reader or braille printer will not be able to show any of the visual parts of the content. The appearance when printed will also quite likely be significantly different from the way it looks on an iphone screen.

[aidos]

yup, nothing turns me away from a website more quickly than poorly presented, difficult to read content on whatever media, no matter how good the content might be. I haven't seen any content yet that I would not have been able to find elsewhere as well.

[goldfidget]

Hi Jennifer. I did some work for a client a while back. They had a site that had been coded as a dreamweaver tempate. Their original developer had moved on and they had got a freelancer in who had then edited their html directly in a text editor.

The HTML was valid but their dreamweaver templates were now broken. Their site could not now be automatically updated from within dreamweaver. It took me about a day to manually fix the templates.

For me, there are sometimes huge advantages to doing things the same way that everyone else does them.

That said, sometimes everyone else is wrong