Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    More Cheesier Than Ever Cheesehead's Avatar
    Join Date
    January 18th, 2005
    Location
    Land of The NFL Champs!
    Posts
    2,942
    CSS or Tables?
    I can truly appreciate the value of a style sheet for setting fonts, link styles, page colors, etc. I would not make a site without this.

    But what about the css alternative to tables? I am not sold on this. So, please, rebuke me here and give me some good reasons to not simply use nested tables. And, a good reason in not "Because that's how the GOOD programmers do it".

    Right now I have a site with a 2 column plus header css layout. I have code as shown below and I get headache after headache. Furthermore, I see no SEO advantage since my leftcolumn links still show up before my content. If I move my left column navigation below my main content, the page is messed up.

    So preach to me here. And please help me fix this if possible. Or tell me what I want to hear "tables are OK".

    <body>

    <div id="header">
    <? include("banner.txt") ?></div>
    <div id="navigation">
    <? include("leftcolumn.txt") ?></div>
    <div id="content1"><br>
    <h1>The name of this page</h1>
    <h2>Content 1</h2>
    <p>Some sample content.</p>
    </div>

    </body>
    This World is Not My Home
    We're gonna go inside, we're gonna go outside, inside and outside. . . And then we're gonna go go go and we're not gonna stop til we get across that goalline! Quotes from the movie Rudy, 1993

  2. #2
    Internet Cowboy
    Join Date
    January 18th, 2005
    Posts
    4,662
    It seems that different versions of MSIE have different issues interpreting CSS, especially when it comes to alignment. I use tables and CSS for that reason, so I say it is ok to use tables.

  3. #3
    Affiliate Manager cbsturg's Avatar
    Join Date
    January 24th, 2007
    Location
    Lima OH
    Posts
    753
    It sounds like you're using relative positioning with your div tags. If all of your div tags are absolutely positioned, it won't matter how they are ordered on the page. That being the case, you could well put your content before your navigation with its Google-friendly <h1> tags.

    Another advantage to divs is that changing the layout of pages can be a lot easier. My own experience with tables is that the nesting can get pretty intense. A CSS approach to the layout can take away some of that confusion.

    That said, I'm still fighting myself to fully embrace CSS over tables. I'm much faster at nesting tables than positioning divs - mainly because most of my programming experience has come in manipulating tables. My feeble attempts with divs have sparked more interest in it, and I anticipate using them in all of my future work. Eventually I'll get comfortable enough with them that this won't be an issue.

    I hope...
    Chris Sturgill
    "All my life I've had one dream, to achieve my many goals." - H. Simpson

  4. #4
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    I use tables and extensive CSS. The purists do have genuine reasons for being anti-table, but while convincing, I've found their arguments to not be very compelling.

    Sort of like if greenpeace says that paper is better than plastic, but i happen to re-use plastic bags at my house and I also looked at the research and while true that paper is better, it's just marginally so.

    Like the bags, if you use nested tables in great volume, it can cause real problems.

  5. #5
    The Beer Hunter LearnAbout's Avatar
    Join Date
    June 1st, 2005
    Location
    usually 19th hole
    Posts
    281
    I've just changed one of my main sites from heavily table based to heavily CSS based. A couple of positive changes came with that (which were intended!):
    - Load per page is now about half it used to be, just about 18k per page (many ppl in my target market still have dial-up)
    - Spiders see a lot less HTML vs. content, so I hope that the improved HTML to content ratio is seen positively by SEs (??)
    - It's a lot easier to mess with. I've had the habit with tables to nest and nest until it was right, and it became a nightmare to do additional changes later.
    - I now find it a lot easier to shift around the div containers rather than nested tables if I want to change layouts between pages with different content.

    It was a pain in the you-know-what to set up, mainly because I'm still in the CSS learning phase, but in the end I think it's worth it. I still use tables, but to a much lesser extend. In fact, now that the learning curve is getting shorter, I've started converting a second site from nested tables to mainly CSS.
    [URL=http://www.golfbeginnerguide.com/]Golf Beginner Guide[/URL] ; [URL=http://www.ladygolfersguide.com/]Lady Golfers Guide[/URL]

  6. #6
    Newbie DaddyHalbucks's Avatar
    Join Date
    May 8th, 2007
    Location
    Las Vegas, Nevada USA
    Posts
    42
    Tables have been around longer and all browsers know how they work..

  7. #7
    Affiliate Manager MINDsprinter's Avatar
    Join Date
    August 18th, 2006
    Location
    Washington, DC
    Posts
    1,436
    Try to get the CSS to work if you can! It really helps with the search engines, load time, and code maintenence.

    AListApart has been a big resource for me in this department. Check out this article: http://www.alistapart.com/articles/multicolumnlayouts

    It should give you a really good start on cross-browser multi-column layouts.
    Jason Rosenbaum
    Affiliate Manager
    MINDsprinting

  8. #8
    http and a telephoto
    Join Date
    January 18th, 2005
    Location
    NYC
    Posts
    17,708
    I like tables. I like css for style, but not for positioning.
    Deborah Carney
    TeamLoxly.com BookGoodies.com ABCsPlus.com

  9. #9
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    Quote Originally Posted by LearnAbout
    I've just changed one of my main sites from heavily table based to heavily CSS based. A couple of positive changes came with that (which were intended!):
    - Load per page is now about half it used to be, just about 18k per page (many ppl in my target market still have dial-up)
    - Spiders see a lot less HTML vs. content, so I hope that the improved HTML to content ratio is seen positively by SEs (??)
    - It's a lot easier to mess with. I've had the habit with tables to nest and nest until it was right, and it became a nightmare to do additional changes later.
    - I now find it a lot easier to shift around the div containers rather than nested tables if I want to change layouts between pages with different content.

    It was a pain in the you-know-what to set up, mainly because I'm still in the CSS learning phase, but in the end I think it's worth it. I still use tables, but to a much lesser extend. In fact, now that the learning curve is getting shorter, I've started converting a second site from nested tables to mainly CSS.
    Totally agree... beyond totally agree. CSS is wonderful. But I think the question is whether to all but completely abandon all tables when using CSS. I think that's too drastic. I think you can have all the advantages of CSS and still use tables where needed. Do you advocate table-less design or do you use tables inside your css divs when you feel it's appropriate?

  10. #10
    Affiliate Manager MINDsprinter's Avatar
    Join Date
    August 18th, 2006
    Location
    Washington, DC
    Posts
    1,436
    Do you advocate table-less design or do you use tables inside your css divs when you feel it's appropriate?
    As an ideal, tables are for tabular data. If you have a bunch of data that is arranged in a table, then use tables, that's what they are for. For layout and positioning, it *should* be CSS.

    But....

    In the real world I find myself using a mixture of approaches. For example, the site I designed for the company I work for uses a lot of tables for layout, and CSS for styles. I did this because *sometimes* it is easier to get things to work in all browsers with tables, and the backend code our website is based on is table-based. The issue is when you go back and change one little thing, your design breaks and it is hard to figure out why with all those nested tables.

    However, I've also designed sites free of all tables. It was a hell of a time getting it to work in all browsers, but once I did, maintenance is a breeze. The HTML is much much easier to understand, and sitewide changes are easy to, because you only have to change one attribute in a stylesheet, instead of that same table tag on every page.

    I'm trying to use less and less tables as my skills improve. I must admit, I still design with Dreamweaver. However, I hear it is easier and more efficient to code by hand, and table-less layouts get easier that way too. Just my 2 cents....
    Jason Rosenbaum
    Affiliate Manager
    MINDsprinting

  11. #11
    general fuq mrbshouse's Avatar
    Join Date
    January 18th, 2005
    Location
    Argieville
    Posts
    1,381
    as handheld devices become more popular does a CSS design have an advantage over table format when looking at a page on the small screens?

  12. #12
    Affiliate Manager MINDsprinter's Avatar
    Join Date
    August 18th, 2006
    Location
    Washington, DC
    Posts
    1,436
    Yes mrbshouse!

    Because you can designate different stylesheets for different browsers and platforms, this makes mobile design a lot easier. Just make a new stylesheet for mobile and you can leave your HTML alone.
    Jason Rosenbaum
    Affiliate Manager
    MINDsprinting

  13. #13
    ABW Ambassador Snib's Avatar
    Join Date
    January 18th, 2005
    Location
    Virginia
    Posts
    5,303
    Moving into CSS positioning has been a very organic process for me. It really just stemmed from my need for more flexibility. I started out styling tables with CSS then I finally got comfortable enough to replace my table tags with div tags. Now when I do a new page or layout I always start with a <div style= and tweak it until it looks right. If the style is repeated I'll move it into my .css document, otherwise I leave it inline. It's very clean as I don't need to do a lot of indentations in my code to make it clear what td belongs to what tr. Now I just create a series of div blocks with little to no indentations in my code. I just love how little space it takes up in the end.

    I still do run into cases where I need to use a table though. For example I use a table when I need to force a div to wrap multiple divs. I also use tables to vertical align images in certain places. I'm still looking for a CSS solution to these problems, but I haven't found one quite yet.

    My advice to anybody transitioning from tables to divs is to style your tables with CSS so you can eventually replace your tables and tds with divs. One very important key to CSS design is floating. Here's a very nice tutorial that explains how to float your elements:

    http://css.maxdesign.com.au/floatuto...troduction.htm

    This is how you can mimic tds to create a row of divs. Then when you want to start a new row you can simply start the next element with clear: left or clear: both. This will stop the browser from creating an endless row of divs.

    Happy CSSing!

    - Scott
    Hatred stirs up strife, But love covers all transgressions.

  14. #14
    What's the word? Rhia7's Avatar
    Join Date
    January 13th, 2006
    Posts
    9,578
    Thanks for the tips
    ~Rhia7 -- Remember the 7
    Twitter me

  15. #15
    All Around Web Guy Cursal's Avatar
    Join Date
    January 18th, 2005
    Posts
    829
    My only complaint about CSS isn't really about CSS but MSIE.

    Man, I have had to write all kinds of css hacks to get clients that use IE to see what a real browser renders.

    CSS is clean and keeps your content and style separate, easy to edit, lower page file sizes, so many great options to use with navigations and information on mouseovers, reduces the need for .js.

    But making it work in IE6 and/or IE 7 makes me what to pull my hair out sometimes...UGH!!

    After all is said and done I still use a blend still of tables and css for peronal sites.

    But have built/worked with a few table-less designs.

    If you are building a dynamic template site I would suggest pure CSS.

  16. #16
    general fuq mrbshouse's Avatar
    Join Date
    January 18th, 2005
    Location
    Argieville
    Posts
    1,381
    Snib

    nice link I feel like i'm at the all you can eat buffet

    thanks for everyone that has chimed in ;-)

  17. #17
    More Cheesier Than Ever Cheesehead's Avatar
    Join Date
    January 18th, 2005
    Location
    Land of The NFL Champs!
    Posts
    2,942
    Quote Originally Posted by cbsturg
    It sounds like you're using relative positioning with your div tags. If all of your div tags are absolutely positioned, it won't matter how they are ordered on the page. That being the case, you could well put your content before your navigation with its Google-friendly <h1> tags.
    Yes, I believe you are right. I will try absolute positioning. Thanks!

    I guess, based on all the input here I would conclude the tables are just fine for sites where a huge navigational menu does not precede your main content. I have site with just 6 links in the top menu - this is not detrimental to SEO and tables are fine. The new site I am working on however will have perhaps 30 items in navigation and I don't want all of these links preceding my h1 and unique content - so I will get the absolute positioning to work.

    With respect to tables, one can use server-side includes for elements of the tables and thus control the entire site with just a handful of files provided not too many tables are nested. The drawback of this is that your site might look pretty funky in a wysiwyg editor since the table elements will not be loaded until the site is served up. I like to use a wysiwyg editor like FP to create links, paragraphs, or lists and then cut and paste the code into an html editor - it saves a lot of time. Then again, if one changes the sizes of content areas too much, css won't keep bad things from happening if your current content no longer fits (like too many products per row) - you will have to go back page by page to fix this.
    This World is Not My Home
    We're gonna go inside, we're gonna go outside, inside and outside. . . And then we're gonna go go go and we're not gonna stop til we get across that goalline! Quotes from the movie Rudy, 1993

  18. #18
    ABW Ambassador Snib's Avatar
    Join Date
    January 18th, 2005
    Location
    Virginia
    Posts
    5,303
    Quote Originally Posted by Cheesehead
    With respect to tables, one can use server-side includes for elements of the tables and thus control the entire site with just a handful of files provided not too many tables are nested. The drawback of this is that your site might look pretty funky in a wysiwyg editor since the table elements will not be loaded until the site is served up. I like to use a wysiwyg editor like FP to create links, paragraphs, or lists and then cut and paste the code into an html editor - it saves a lot of time. Then again, if one changes the sizes of content areas too much, css won't keep bad things from happening if your current content no longer fits (like too many products per row) - you will have to go back page by page to fix this.
    Rather than use a WYSIWYG editor to test your site you can install Apache, PHP and mySQL on your computer (try Apache2 Triad). That way your PHP includes will get executed and you'll be able to see the site in its full glory before you upload. Since I first started using Apache on my computer my entire development process has been improved substantially. I don't need to upload pieces of my site to my server to test them. I can build on my machine and see it as it will appear on my live server. It's really been a life saver.

    - Scott
    Hatred stirs up strife, But love covers all transgressions.

  19. #19
    All Around Web Guy Cursal's Avatar
    Join Date
    January 18th, 2005
    Posts
    829
    That Rocks Snib!

    Gonna work on getting that setup.

  20. #20
    Affiliate Manager cbsturg's Avatar
    Join Date
    January 24th, 2007
    Location
    Lima OH
    Posts
    753
    Quote Originally Posted by Snib
    Rather than use a WYSIWYG editor to test your site you can install Apache, PHP and mySQL on your computer (try Apache2 Triad)...Since I first started using Apache on my computer my entire development process has been improved substantially. I don't need to upload pieces of my site to my server to test them. I can build on my machine and see it as it will appear on my live server. It's really been a life saver.
    Well spoken. Drop WYSIWYG and get your hands dirty. I haven't used Apache2 Triad so I can't speak for it, but I have used XAMPP and think very highly of its installer. Apache2, PHP and MySQL installed and working together within 5 minutes. Beats those times I did it by hand and wasted hours of my life.

    Scott, if you wouldn't mind, I'd be interested to hear how A2T compares with XAMPP (if you have experience with both...). Obviously this thread isn't the place, but a comparison of the two would be quite interesting.
    Chris Sturgill
    "All my life I've had one dream, to achieve my many goals." - H. Simpson

  21. #21
    Affiliate Manager MINDsprinter's Avatar
    Join Date
    August 18th, 2006
    Location
    Washington, DC
    Posts
    1,436
    Also, stay away from absolutely positioned if you can. Relative is a lot more flexible and allows you to do liquid layouts and such.

    Also, re: Cursal's complaint about MSIE, cross browser compatibility is always a pain, but I use an invaluable piece of code to get around it. Basically, drop this in your header and you can specify different stylesheets for MSIE 7.0, MSIE 6.0, and all other browsers. You can then put on a styleheet for all browsers using the normal code. This way, once you figure out which style is changing the layout in the 3 browsers, you just put a different version in each of the three stylesheets and each browser only loads one. Here's what it looks like:

    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="stylesheet_for_ie6.css" />
    <![endif]-->
    
    <!--[if gte IE 7]>
    <link rel="stylesheet" href="stylesheet_for_ie7.css" />
    <![endif]-->
    
    <![if !IE]>
    <link rel="stylesheet" href="stylesheet_for_all_others.css" />
    <![endif]>
    
    <link rel="stylesheet" href="general_stylesheet.css" />
    So, every browser loads two stylesheets, the general_stylesheet.css and the specific stylesheet that matches the browser. It really works like a charm!
    Jason Rosenbaum
    Affiliate Manager
    MINDsprinting

  22. #22
    ABW Ambassador Snib's Avatar
    Join Date
    January 18th, 2005
    Location
    Virginia
    Posts
    5,303
    Quote Originally Posted by cbsturg
    Scott, if you wouldn't mind, I'd be interested to hear how A2T compares with XAMPP (if you have experience with both...). Obviously this thread isn't the place, but a comparison of the two would be quite interesting.
    I'm sorry, but I haven't tried XAMPP. I have heard good things about it and I'm sure it'll get the job done. I stopped using Windows over 2 years ago, so my knowledge of these packages is limited now. If I did still use Windows I'd be sure to install a package with PHP5, but that's not necessary for everybody.

    - Scott
    Hatred stirs up strife, But love covers all transgressions.

  23. #23
    ABW Ambassador Snib's Avatar
    Join Date
    January 18th, 2005
    Location
    Virginia
    Posts
    5,303
    Quote Originally Posted by MINDsprinter
    So, every browser loads two stylesheets, the general_stylesheet.css and the specific stylesheet that matches the browser. It really works like a charm!
    This would be a last resort for me. I can usually find a solution that works without needing to create multiple stylesheets.

    - Scott
    Hatred stirs up strife, But love covers all transgressions.

  24. #24
    Affiliate Manager MINDsprinter's Avatar
    Join Date
    August 18th, 2006
    Location
    Washington, DC
    Posts
    1,436
    You're right Scott, but there are just some things where this technique is necessary. The bulk of my styles are in the general stylesheet, but I find seperate stylesheets is much easier to understand than other CSS "hacks" floating around out there.
    Jason Rosenbaum
    Affiliate Manager
    MINDsprinting

  25. #25
    All Around Web Guy Cursal's Avatar
    Join Date
    January 18th, 2005
    Posts
    829
    Quote Originally Posted by MINDsprinter
    You're right Scott, but there are just some things where this technique is necessary. The bulk of my styles are in the general stylesheet, but I find seperate stylesheets is much easier to understand than other CSS "hacks" floating around out there.
    Yep, that's the pain in @ss I'm talking about

    Making multi-styles. I just wish MS would get their act together and get Web compliant. What makes them so special that they don't/won't comply?

    MIND, that is the best solution I have come across too.

    When a client wants something I do my best to make it happen. HACking and SlAsHing my way through the code.
    I keep it as clean as possible and very structured & the CSS really helps with that.

    I have installed Apache2 Triad now trying to get it work with Dreamweaver.
    Found a great article at WMW but what a bunch of code I'll need to add to the Apache httpd.conf file. Might as well keep working with a "testing sever" via Dreamweaver.

    But still a great way to "play" with server aps

+ Reply to Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. Can't Get Images to Appear in Tables
    By sweat in forum WebMerge (Fourthworld.com)
    Replies: 4
    Last Post: May 7th, 2006, 01:40 PM
  2. Tables and Columns
    By jwg in forum WebMerge (Fourthworld.com)
    Replies: 1
    Last Post: February 11th, 2005, 03:41 AM
  3. HTML Tables....
    By eggerda in forum Programming / Datafeeds / Tools
    Replies: 4
    Last Post: January 14th, 2004, 05:59 AM
  4. Need Help With Tables & IE
    By sweat in forum Programming / Datafeeds / Tools
    Replies: 6
    Last Post: July 10th, 2003, 12:29 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •