Solved

CSS Table layout VS CSS DIV Layout (Who is the champion)

Posted on 2013-01-21
45
473 Views
Last Modified: 2013-01-26
Hello All;

I read a post a few months ago, (Cannot remember where it was at now), where this guy posted that he wanted to convert his site from TABLE to DIV, and a user came in and advised against it, stating that designing with a <table> layout is more fluent than doing it in a <div> layout., stating more that, working with a <table> layout, you are more free to design the site however you desire, to where working with <DIV>, you are limited to what a <div> will allow you to do.

Also, working with table layouts, and different screen resolutions.
With a <table> with % work just as well as a <div> when it comes to changing up the scaling with the different Screen Resolutions.

What are your thoughts on these 2 Page Layouts?

Take Care
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 19
  • 13
  • 7
  • +1
45 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38802758
either that was 10 years ago, or the person doesn't know what they are talking about.

nobody designs websites with tables any more. they are slow and cumbersome.

if you're interested in "responsive" design, which is what it sounds like, you need to stay away from tables.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38802986
It depends on what you are doing.  Lots of people still use tables for many different reasons (including being out of date).  And the reasons are what should help you decide what to do.  The "tabular data" reason that many cite is like when you are displaying rows of database data or spreadsheet info.  The data is organized in tables in the source and that is the most direct and easiest way of displaying it.  The problem with 'divs' in that situation is that they don't 'stick together' like tables do so they can take a lot more code to do that function.

'div's are better at less grid-like layouts and I have found that is is easier to apply styles to them.  You find on some websites that they have over-indulged and make it into 'div' soup just like old sites used to have way too many layers of nested tables.  Some of that comes from automated code generators that can easily follow a set of rules whether they make a lot of sense or not.

In any case, you have to look at the goals and resources and make a decision on how to proceed.  There are a lot of examples of just about every kind of layout available on the web.  Try as many as you can so you can see how they work.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38803218
The person describing the limits of div is a moron.  The div can be styled to do everything a table element, row or cell can do and a lot more.  However the real stupidity of the argument is that not using a table means using divs.  The div is one of over a dozen structural tags that can be used to produce virtually any layout that can be imagined.  

Tables in a modern context are for display of tabular data. Using them for other things just makes the code more difficult to maintain.  The page loads slower, and the presentation is limited to the CSS property subset that can be applied.

The stupidest part of the argument is: " you are more free to design the site however you desire".  Modern web pages are about CONTENT not design.  Design supports content.  The old approach of making content fit into a fixed design is 20th century thinking.  I believe the discussion must have either been, as has been said, from the last century, or was from a satirical skit on the comedy channel.

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803238
I have been working myself, with <table> CSS layouts for all my work, now going on 3 years.
I know that it is out-of-date design, however, it is how I self taught myself in designing my layouts.

I do want to move over to <div> layouts, and have looked in on it, however, I have not had the time to do so.

I am going to leave this thread open for a while, to see what people have to say.
Idea, sites, and otherwise, that show which is the better of the 2.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803271
I remember the forum that I went onto, was indeed, from 2012.
And I also remember the person having a reputation level of, well, Very darn high.
Does not mean anything to most people, then again, everyone has their own thinking as to what is good and not good in this world.
What is old 20th century thinking in some aspects, to others, is a The perfect thing.
Does not mean that everyone believes, just as long as the person that makes it, feels as though it is the best they can do with the knowledge they have, and the ability they have obtained.

Keep it coming people.
Love reading your thoughts.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 200 total points
ID: 38803296
There are gobs of resources on the web for how to build a website - lots of clashing advice, some good, some bad, etc...

One thing you might do is look at sites similar in content to yours, check if/how they work across browsers and devices, how quickly they load.. whatever your criteria.. and learn from the source code of the ones that work the best - they are obviously doing something right.

To build a website well is an art and takes some skill, so expect to make lots of bad decisions along the way. That is totally OK as long as you learn from it. You have to kiss a lot of frogs...

And always remember the golden rule:

KISS

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803343
.. hmm, I just looked at your profile, you're an ASP guy. Sigh, you have a lot of unlearning to do. (No offense intended - Just that Microsoft doesn't follow the golden rule)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38803347
No kissing during business hours. Kissing is only allowed in the lounge. ;^)

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38803362
Microsoft doesn't follow the golden rule

The only rule that M$ follows is "get as much money for a given product as you can before everyone finds out it is just as bad; or worse, than the previous version.

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803364
Cd& you crack me up you old dinosaur!

:-.)*
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803394
No offense taken.
As for ASP, I could care less who made it, I LOVE it.
I work well in it, and that is all that counts, on that aspect.

Most of the sites that I have liked, viewing the source is a complete JOKE
I mean, when you view it, it is a bunch of mess jumbled up, and I usually give up after a little while, and move on to something else.

Most site are designed using code generation programs, such as "FrontPage (or) Dreamweaver", and that makes it that much harder to attempt to learn something by.

Right now I am playing around with some <div> code, and trying to get it to do something.
So far, this is about as far as I have ever gotten in DIVs.

This is what I am playing around with right now.
http://ee.cffcs.com/Q_28003296/Q_28003296.html

However, trying to get the Content div to butt up, and having a padding of 5px between the 2 sidebars, is proving to not work out as I am used to.

Either way, I am learning, as I would like to make my sites more div structured than tabled.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 100 total points
ID: 38803423
Just change the float on the right sidebar to left instead of right and it will butt up to the content.

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803427
If you want to use percentages that add up nicely to 100, you can't have any margins, padding or borders as they contribute to the overall width of the element, but don't get taken into account in the percentage value.

You can either apply percentage based margins/padding/borders and take them into account, or apply margins/padding/borders on inner containers.

Read up on the Box Model - understanding that will help you more than anything else.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803451
Thanks Dino.

Koz, I am looking in on the Box Model right now.
Thanks.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803457
By the way.
For using the %, I try to do it, for better page size with screen resolutions.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803465
that's good, you just need to keep in mind how it affects the overall widths of the elements.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 200 total points
ID: 38803506
I make my money on the web by un-jumbling all that source code and making it work.  Actually, more PHP than HTML.  You should keep trying to un-jumble source code.  #1. to see how people doing things.  #2. To see how Not to do things.  You really haven't had any fun until you have to redo a Dreamweaver or iWeb page that uses all absolute positioning where the source code does Not have to be in the same order as the page layout on the screen.  I've gotten to the point where I can hand edit the absolute positions of those things but it's a Lot of detail.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803551
@Dave
When I first started "trying" to learn, which was about around the year 2000
I started tearing apart websites.
As a matter-of-fact
I had a KB (Knowledge Base) back in 2002, and I took the layout of Microsoft's KB.
As I really loved the way that it looked.
About 3 months after my site went live, I received an email from Microsoft
telling me to enjoy the layout, that they have changed their layout to something different.

I love that layout, and I loved the fact that Microsoft noticed that I loved it enough to use it as my own.

I am thinking about going back to that design for the KB that I have today.
And you are right, it is run, however, it is very time consuming at times as well.
Though, I do enjoy looking and dabbling in other peoples work.

I am designing the site that I am working on right now, as DIV and List.
there are still some Tables in it, that may stay, however, I am enjoying watching the
Div Elements come together with my site layout in mind.
So far, it looks just like the original.

Keep the thoughts and idea's coming.
This is becoming a right interesting thread.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803593
Have a question.

In the div layout that I posted the link for.
The Lsidebar div, how would you make it grow to stay the same height with the
Content Div ?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803661
that's the million dollar question :)

Heights cannot be given in percentages, so there is no simple or native way to do that. There are work arounds though ( which I don't particularly recommend ).


1. place both divs in a container and give both divs a very large amount of padding, and an equal amount of negative margin;

.div1, .div2{
   padding-bottom:9999px;
   margin-bottom:-9999px;
}

2. use pixel heights - kinda lame if the content is dynamic.

3. use the background image trick - apply a vertically repeating background image on the container of the two divs - it's not awesome, but it does the job - depends what you're going for.

4. use javascript to detect the higher div, and set both divs to that - not a bad solution if you're already using js on the page. Not a good solution where performance is of utmost importance and every bite and function call counts.

My recommendation is to leave the divs alone and not try to equalize heights. Design the page
to look good without equal heights.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803675
Thanks Koz.
The design is coming along pretty good right now.
As the site gets more developed, and more data is entered
The side bars will grow in height along with its data.
So, I will keep your #1 in mind, if the data does not fill up enough.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38803707
Here is a demo page from another question here that will get you 100%.  Not a recommendation but an example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Height</title>
<meta name="author" content="remorina" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
	margin:0px;
	padding:0px;
	border:0px;
	}

html {height:100%;}
body {
        height:100% !important;
        background-color:#abcdef;
        font:11px Tahoma, "Lucida Grande", "Lucida Sans Unicode", Verdana;
        min-width:990px;
}

/****************** MAIN LAYOUT ****************************/
#header {
        background:#779977;
        height:141px;
        color:#FFF;
        width:100%;
}

#footer {
        clear:both;
        background:#000080;
        width:100%;
        height:44px;
        color:#FFFFFF;
}

#container{
   height:70%;
   border:5px solid green;
   overflow:hidden;
}

#sidebar {
        float:left;
        width:19%;
        height:100%;
        background-color:#f0f0f0;
        border-right:1px solid #cccccc;
}

#content {
        float:left;
        width:80%;      
}
.clear {
        clear:both;
}
</style>
</head>
<body>
    <div id="header">
        <div class="inner">
            THIS IS HEADER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #header -->
    <!-- CONTENT STARTS HERE -->
    <div id="container">
        <!--SIDEBAR STARTS HERE-->
        <div id="sidebar">
            <div class="inner">
                THIS IS SIDEBAR
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #sidebar -->
        <!--CONTENT STARTS HERE-->
        <div id="content">
            <div class="inner">
                THIS IS CONTENT
                <br /><br /><br /><br /><br /><br />
                test
            </div>
            <!--ends .inner -->
        </div>
        <!--ends #content -->
        <div class="clear">
        </div>
    </div>
    <!--ends #container -->
    <div id="footer">
        <div class="inner">
            THIS IS FOOTER
        </div>
        <!--ends .inner -->
    </div>
    <!--ends #footer -->
</body>
</html>

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803772
^^ By using 100% height on the body, it almost works. Unfortunately if you put more content than will fit in the content div, it gets cut off because of the overflow:hidden. If you remove the overflow:hidden, the whole thing comes apart.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803814
Right now I have both side parts with a
height:700px;
Which will run OK, until I get the side loaded down with Data.
Then I can look back at the Height of the sidebars, and see if they need to be changed
Or if removing the Height all together, and allowing it to grow on its own, is the better choice.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38803829
Yep.  There are limits to every method you can find.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38803865
What would be the best
body - Width ?

If I set it to high, then it will create scrollbars on the bottom.
To low, and the content gets squished.

I usually set everything at around 900px
As MOST computer now have wider screen resolutions.
However, there are still those that have the small resolutions,
So I have to watch out for those users as well.
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 200 total points
ID: 38803946
What would be the best
body - Width ?
That's where "responsive" comes into play. For best results use media queries to create versions of the layout for different resolutions and devices.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38804950
@Koz
Doing some research, I found a great site, of which I am looking through their CSS right now.
And this is how they make their layout work across all platforms.
Pretty sweet.
http://themeid.com/demo/responsive/

@media screen and (max-width: 240px) {
}

Putting in everything that changes, within these elements, of which go all the way up to

@media screen and (max-width: 980px) {
}

I have played around with it, and had my text change when the browser window got smaller. That was pretty cool.

There is still a lot more to mess around with and to learn.
You think that you have it, then all of a sudden, you have something else that jumps into the mix, and you have to either start all over, or add into what you already have, and hope that it all works out the way you envision it to be.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38806076
For those interested.
I found this link, which comes with a downed code.
And walks you through how to do the "Responsive" Layout.
http://www.1stwebdesigner.com/css/responsive-website-tutorial/

Of which, I will be using to redesign my stayinshape.us site.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38806571
That is a page I would never recommend for any except Dave. ;^)

The initial load is way to slow, and it has over 200 errors in validation including such hacks as div inside span.  There are missing end tags; end tags for unopened elements, and attempts to use HTML5 on a page with an xhtml doctype.  

They manage to put a layout together with hacks, and very tolerant browsers; but I would not want to have to maintain junk like that.

Cd&
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 200 total points
ID: 38806683
#2 reason is to find out what Not to do.  People put up a lot of sloppy pages that are supposed to 'how to' pages when it seems that they either don't know 'how to' themselves or don't care.  If you learn something from that page, that's fine, just don't stop there.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38806935
The main thing that I learned, which I cannot say was from that page actually, was the

@media screen and (max-width: 240px) {
}

Putting in everything that changes, within these elements, of which go all the way up to

@media screen and (max-width: 980px) {
}

And that is what I am concentrating on at the moment, and that was taken from another site.
However, I did pick up a few pointers from the last mentioned page.
Regardless of errors, as it seems that a LOT of sites have them, if I can pick up to smallest of detail that can help me improve my site design, then I am going to take it.
However, I never copy 100% of a site, or source code, I always start from the ground up, and work my way to where I need to be at, NOT where the so called instructions want me to be, which is in their shadows. So to speak.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38807977
Got something else here.
Lets say that you have an add, say one from Google Ads, that runs like so.

width=728;
height=90;

Is there a way to check this against a browse, and resize it?
Since it is nested within a JS Tag.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 38808053
On my site, Google ads javascript generates an <iframe> of it's own size.  You can try scaling it to see if it works.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38808097
there are no guarantees with ads. even if that worked for one ad, it may not work for another. Ads are notoriously poorly written and unreliable. The last place I worked, we had different ads served for mobile and desktop - perhaps Google Ads has some documentation regarding that.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38808110
If you're interested in mobile, I just posted my mobile-menu code on github which I'm very keen to share.

My plan is write an article for EE, but since it's hot off my presses, here's a sneak preview:
https://github.com/kyleiwaniec/mobile-menu

There are two links to preview in the readme

cheers - always looking for feedback.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38808167
OK Guys.
This is my first time ever doing a site that is nearly all Div.
There are certain area's that are Tables, however, they will stay.

The site is created to run all the way down to:
240x320

I still have a lot of inner working to convert over, so the header still has old CSS code in that is not used in the main page, just in the inner pages.
I am hoping by tomorrow evening or Thursday, the site will be completely converted over to Div CSS (Except for the certain area's with Tables, some will not be changed)

http://www.stayinshape.us/Main2.asp?Type=Home

My son just went on the site with his new iPhone 4, and it just compresses the page, it does not move anything, as I thought that it would, of which is a good thing.

Let me know what you think.
CSS Validation shows 2 errors, of which will be dealt with most likely tomorrow.

thanks guys for all your input in this issue, that I never really understood.
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 38818594
Thanks everyone for your participation in this thread.
And to "kozaiwaniec"
I still have no idea as to why you would have made the Microsoft statement with ASP, and That I will have to do a lot of unlearning.... ASP Is server-side, not client-side, there for, it has nothing to do with HTML or CSS, there for, it is irrelevant in this thread.
With that stated.

All the advice given in this thread was very helpful.
I was able to make my main home page with a DIV layout, however, I hate the way it looks now, as I hated the way it looked before.
Instead of trying to mimic the old layout, I should have looked in on doing it a different way, of which is what I will be doing this weekend.
I will spend the time, and try to mimic another site's web layout I found, as it is more along the lines of an Exercise type of site layout.

As for converting all my sites over to div.
I will have to learn a lot about DIV layouts before I try to tackle that beast, as I have way to many sites to mess with right now, to do something like that.
Way to time-consuming, and the payoff is not great enough to do so.

Take care everyone, and once again, thanks for all the great advice, except the ASP comment, no offense taken, however, I love Microsoft products, it is how I make a living, so cannot bash something that I use every single day, and after being forced to use my son's Mac Book Pro laptop the last couple of days, MAC can kiss my A**.

Have a good one everyone
Carrzkiss
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38819103
Hi Carrzkiss,

I'm not into OS wars - I'm really not. It's funny though, I bought my daughter a Windows 10 laptop for xmas, and I feel the same way about it as you feel about your son's Mac. LOL.

The ASP thing was kind of jaded I guess. I've just seen too many really awful stuff done by people who use it. But you are right, it is server side and shouldn't affect the front end.

There are lots of tools out there - a good artist makes good art no matter what tools they are given.

Cheers :)
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38819468
Yes, ASP like all other server-side languages, are crap if the author does not know how to code them correctly. It is about like PHP, I have seen some wonderful work with it, and have seen a total mess mockup of a joke.
So, it all goes by who is coding the sites.
When I first started, my ASP work was for the dogs, now my codes are downloaded by the hundreds, and I have over 200+ users on my Coding Source site.
So, the work I do is good, and I make sure that everything that I put up, is the best, or I do not put it out, or a try to take it off before anyone sees it, which is what I am about to do to the new mock up of the Fitness site.

As for Windows, I love my NT4, 2000, XP, and now Win7.
Mac, I hate, will only use it when I have to.

Have a good one, have a lot of work to do, and a short time to get it down, before rushing to down, before Jack Frost ices or snows us in for the night.

Carrzkiss
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38821013
meant to ask "kozaiwaniec"
What is: Windows 10

There is a Windows 8, never heard of Windows 10.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38822085
doh! yes. Windows 8. that is what I meant - I had IE 10 on the brain :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38822381
Windows 10 is the version that will deliver everything promised and not delivered in Vista. Should be ready around 2018 and will work correct by 2021. ;^)

Cd&
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38822506
My fav out of all the windows versions was "Windows 2000"
However, that was running "SP1", after SP2 came out, it screwed up the ability
To have open more than 20 windows at a time.

Windows XP - I enjoy it, as my favorite programs run on it.
Windows 7, I think that it is OK, however, they should NOT have released Windows 8
Until they fixed all the bugs in Win7.

I also run Windows 2003 Server.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38822524
Actually my favorite M$ opsys was ms-dos 1.25 to which I could link in custom libraries and extend the OS to support my apps on 128k pcs.  That was back before Bill became a billionaire and M$ became about the money.

Cd&
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now