Why Switch from Table to CSS layout?

I guess you ride your bicycle around the moon before breakfast every morning then if you can’t tell the difference between a table and a heading. After all a bicycle is a perfectly valid means of transport so why not use it to go to the moon.

That’s as valid a way to get to the moon as the code I posted was for defining that headtableing garbage.

As I mentioned before - the first time I swapped two columns on my web site it took me months to recode the tables in all the pages, the second time took as long but that time I got rid of the tables and replaced them with CSS, the third, fourth, fifth, sixth, seventh, eight, ninth, and tenth times for switching columns around has taken about two minutes each to change the CSS that ALL two thousand pages use. The nearly 18 months time that getting rid of the tables has saved me would have been totally wasted if I had continued to use tables after it became possible to do it properly with CSS. You may be prepared to spend years monotonously swapping the columns around in table after table on page after page but anyone with a brain would far rather free up that time by using a shared CSS file instead which also has the benefit that those listening to the page be read to them can hear it in a meaningful order rather than mess a jumbled as.

The page important order in a web of is things. (possible order of content when using tables)

The order of things in a web page is important. (actual order of content when leaving appearance to CSS).

Anyway all those borders through the middle of web pages make any table based web layout look ugly.

I can tell the difference between a table and a heading. I personally wouldn’t put a heading in a table but if someone else chooses to do so, as they are entitled to, then I’m not going to say they must not do that. It’s their choice after I or anyone else advises them of other options.

So it seems we basically are in agreement regarding not using tables for layout except that you seem to be struggling to cope with me not caring if someone else chooses to use tables.

Hi JenniferBigBlue :slight_smile:

I guess you need logic reasons. So, let me try give you at least one:

Your content needs structure. Now, structure is a two meanings word here: semantic structure and presentational structure.

Usually, when making a tableless layout, in order to give your document a presentational structure, you ONLY use SPECIAL html elements that have no semantic meaning: div and span. These two are specifically meant for this kind of job: presentational structure, hooks for presentation. Using them helps your semantic structure remain clean.

Now, in return, by using tables for layout, you are ruining your semantic content structure you probably worked so hard for, because tables equals elements that have a specific semantic meaning, not a void one.

It’s like you have in your mind very clearly what you want to say, but then, when you start to voice it out, it comes out as a different thing all together, making you sound confusing for those intrepreting your page. And I reffer not to the user, but to the agents. Why? See below :wink:

The sighted user is not the standard by which you develop your webpage. That’s a mistake. Different agents interpreting your markup should be your primary concern. Accounting also for possible custom user settings for those agents. And that’s where lies the difference between designers and developers!

Designers consider only well sighted users when making designs, having only a type of agents with default settings. Developers need to account for all types of agents and user custom prefferences, to make sure a design will always make sense.

Designers consider only the end visual result, overlooking the semantic structure. Developers start with a semantic structure for the content, that will target all types of agents, not just visual agents. Then they build a presentational structure for that semantic content that will keep it that way: semantic content. And only then, they try to make it look like designer’s concept, targeting visual agents alone this time.

So, as far as I can tell, you’re asking whether to code like a designer or to design like a developer :lol: My advice, design like a designer and code like a developer. Semantic and Tableless.

Noonnope,

I AM a highly visual person with no apologies. It’s what I’ve been paid to be for the last 20 years. But I agree with you, form and function are not mutually exclusive. It’s a beautiful marriage. I not only want to design gorgeous websites, but ones that function well and accomplish the intended goals.

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? Please be really specific.

Thanks for your time!
Jennifer

Hi Jennifer,

Yes, I sympathise because it’s not easy to let go of something you are familiar with and know how it works. Perhaps, you could take it slowly and rather than trying to do it all at once - do it in stages. When you feel the need for a nested table try and do it with CSS instead.

I’m comfortable with my peers looking down their noses at me. Never understood why people do that.

That always happens :slight_smile:

“…tables were never meant for tabular data”…I assume you meant the opposite?

Doh! I think faster than I can type but you understood what I intended.:slight_smile:

“…If I want to move forward and care about my profession.” I’m not sure what you mean by this or if I care about those things.

I mean “care about best practices” that aid all visitors to your site (from search engines to the disabled to poor sighted or motor impaired users). They are all your visitors and they will all have a first impression. If they can’t find how to get to the content then they will be off to a site that does it better.

I agree that for small sites this may not be much of an issue but the underlying problem is still there. With a little extra work it can be fixed.

Here’s what I care about. I care that my sites are really well designed and instantly recognized as a quality site. (People’s instant first impressions the moment they arrive.)

Yes we all want a site that looks good but research shows that users want a site that delivers good content rather than a site that just looks good. To have both is great and there is no reason why a site can’t look good and also be good under the hood. Otherwise its like having a Ferrari that has the engine of a mini.

I care that the site is one my clients are proud of and feels accomplishes what they wanted. I care about the ease of use for the visitor. I care about the site getting a good ranking in the search engines. I care about how fast a page loads. These are the kinds of things I care about. Is that caring about my profession?

Well those are all the reasons for using CSS as CSS does come out top in all those areas. Research has shown it to be true although it’s not the whole story and of course table sites can be made to rank high also but by default css comes out in top in all the areas you mention.

I don’t mean to twist your words but in your first post you’ve already indirectly hinted that you don’t care about bandwidth, you don’t care about code to content ratio and you don’t care that disabled users might not be able to access your content (because you use tables) . There’s more to web design that what you see on the screen.

Once I change the Dreamweaver template file I have to FTP all the pages that were built using that template. As I said, most of the sites I design are 10-20 pages so were probably talking about ….1 second to upload one file versus 20 seconds? Yes, with 1000 pages that would be a major issue. I don’t think I’ll ever attract a client of that size, but you never know.

Well that’s a different issue anyway and you would still use css in your templates. How you work is up to you and what suits you. If you are happy with templates then that’s fine.

Load time: My code is pretty clean even though I use tables. I’m not completely inept. As I stated, I use CSS for all formatting and positioning. I haven’t used a font tag for some time.

Glad to hear it :slight_smile:

If you are only using a single table to hold the page layout then I don’t see much harm in that if done properly. It’s the nested table approach that is bad and using tables for menus and tables for lists and tables for pictures that is really bad.

SEO: I wish I could know for sure that ranking was being affected by using tables. All of my clients who have paid for promotion get on the first page. (But I have a great SEO and promoter.)

Most SEO specialists are living in the past and will actually harm rankings so if you have a good one then keep hold of them. These days Google will index much more of a site than it used to so content to code ratio is less of an issue but in a recent Video Max Cutts of Google said that it did help to have content high in the page and close to the headings so that the relevance increased. Obviously having tables in the way dilutes this process to some degree. Whether or nt it’s a big issue the answer is as I said before why take the risk when there is a better solution available?

“…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?

Interesting question and I think you might find some answers in the link that Max posted above. Web designers should fully understand the medium they are working in or at least collaborate with someone who does. My graphic skills are zero but I know instantly I see a PSD whether it will work or not and will advise the designer what changes are needed to make it work on the page.

Web design is one of the areas where there are so many skills needed that it’s not always possible to be master of all and sometimes you just have to get help from those that you know or respect.

Maybe the decision to go CSS or table depends on who you are, how you like to work, and who your clients are. If I was an employee working at a company who developed big sites for high-profile companies where the development was a team effort I would have learned CSS layout 10 years ago because it would have been necessary and required. Who knows.

Yes that may be true:)

It all depends whether you want to be at the front or at the back. It can be hard keeping up with everything but inevitably things change and you don’t want to be left with a skillset that is no longer much use or not much in demand.

CSS may not be the ultimate solution and there may be something better around the corner but I can guarantee you that is is not going to be a table approach.

A lot of well known “experts” have gone as far as to say that CSS3 will become the future and you will find that a lot of applications will be designed in CSS rather than other coding languages.

John Allsopp

Over the coming five to ten years, I have little doubt that the vast majority of screen-based interfaces will be developed using CSS, HTML, and JavaScript. That will affect in-flight entertainment systems, car dashboards, ATMs, you name it.

The biggest question I have in my mind right now is the accessibility issue you mentioned. I have only been testing my sites in various browsers. I looked at my sites on my iphone but that’s not exactly thorough testing! :slight_smile: This WILL become more and more of an issue as new technologies grow. Is there an online site for testing sites on different devices like tvs, screenreaders, ipad, various phones, etc.?

You will find a few answers in this thread. Testing on various devices and browsers is difficult - there’s no two ways about it.

The way I manage it is basically to download as many browsers as I can and test in these. I have a PC with xp, a laptop with vista, and a mac computer running windows 7 under parallels. This allows to me to test a range of browsers under various systems and there’s a good chance that I will be able to spot and sort out problems from this.

I also have the iphone emulator form apple running on the mac which is a true emulation of the iphone (or as close as you can get).

There’s no substitute for having the browser to hand and although sites like browershots are useful they are hard to use for debugging as a screenshot tells you little except that it doesn’t look right.

Thanks again for your help. I’m not deliberately being a pain in the a**, I swear! Just searching for motivation to make the leap.

Jennifer
No problem :slight_smile: I think you are asking the right questions and just need some motivation. I wish I could say it would be easy and that the rewards will be great but life isn’t like that :slight_smile:

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.

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.

  1. 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 ( :stuck_out_tongue: ) is painfully slow. Streamlining the code (and getting rid of the rubbish) makes a massive difference.

  1. 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.

  1. 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.

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.

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?

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! :lol:

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 :wink:

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 :slight_smile:

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. :smiley:

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.

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.

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 :slight_smile:

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.

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

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.

ok thanks :slight_smile: 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.

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.

ok no problem :wink:

:rofl: y’all

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.

:slight_smile:

I like DW, tie me up!

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! :lol: 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.

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

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.

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?

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.)

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