|
|||||||||||||||||||||||||||||||
tables or div ?
is there any alternative to table. whenever i use tables for a 3 columns design in get lot of errors as if content in middle column is large the position if the other two columns varies and the navigation in lefy bar moves down with the content of the middle column is there a way to prevent this.
Your message subject would suggest that you may already know the answer 
. Although, you should be able to do what you are describing with tables. If you post your code here it would help people more easily identify what the problem is.
Aside from that, DIVs are great for exact positioning on the screen via the assistance of CSS positioning. Depending on who will be visiting your site, you may want to consider this option. CSS and DIV positioning are pretty widely supported on modern browsers, so if most people that will be visiting your site running a newer linux distro or XP then they will likely be able to view your page with no problem. But, if the people who are visiting your site are using older OSs with older browsers then this may present problems for them.
If you would like to know more about this, just hit google with "CSS positioning" - also, here is a link to w3cSchools with more info - http://www.w3schools.com/css/css_positioning.asp
. Although, you should be able to do what you are describing with tables. If you post your code here it would help people more easily identify what the problem is.
Aside from that, DIVs are great for exact positioning on the screen via the assistance of CSS positioning. Depending on who will be visiting your site, you may want to consider this option. CSS and DIV positioning are pretty widely supported on modern browsers, so if most people that will be visiting your site running a newer linux distro or XP then they will likely be able to view your page with no problem. But, if the people who are visiting your site are using older OSs with older browsers then this may present problems for them.
If you would like to know more about this, just hit google with "CSS positioning" - also, here is a link to w3cSchools with more info - http://www.w3schools.com/css/css_positioning.asp
Yeah divs are way better, I'll never go back to tables, ever.
The W3C wants you to use divs and CSS, not tables. I use whichever is more convenient for the project. If it's just one of my lowly minisites, then tables are fine, but if I'm deploying a full scale website it's divs and CSS.
Div's offer such powerful possibilities that one can get a bit confused at times, but the more time i spend on them, the better I feel about using them. Maybe work with tables is simpler, because it does not offer so many possibilities, but on the other hand it's no fun to work with something totally lacking creativity.
divs and css are a lot cleaner than tables, and allow more control and customisation
i also think that divs are easier to hand code, requiring <div>+</div> rather than lots of imbedded tags
getting your content seperate from the layout is always advantagous
for ultimate control check out xml
i also think that divs are easier to hand code, requiring <div>+</div> rather than lots of imbedded tags
getting your content seperate from the layout is always advantagous
for ultimate control check out xml
| lepris wrote: |
| work with tables is simpler, because it does not offer so many possibilities, but on the other hand it's no fun to work with something totally lacking creativity. |
Hrm, actually creative solutions are that much more common and needed when there's a limit as to what can be done. From what I've heard about css/div positioning mostly anything can be done which is fine and I'm looking to learn it but saying creative solutions are impossible with tables is just plain wrong
yeah right, creative solutions within tables, they exit, because building anything on tables is comparable to planning a new model of airplane in comparison to divs.
Divs and css are cleaner, but tables are easier. No need for floats and positioning or any of that shat. Use divs when you can, but if something is too much of a pain, use tables until you figure out the divs.
if ist something that you want people to look at and you're ready to invest the effort/time, then divs all the way. Tables are for the quick & dirty jobs 
Yeah dirty jobs!!!! are for tables. Well I try not to do even those on div's. Have you too noticed that working with div's is far more rewarding and gives more satisfaction from completed projects.
My opinion is that if you're going to be doing something that's just a small little quick and dirty project, that's only going to be for your own personal use, or maybe a small group of others, do whatever is easiest, or that you feel the most comfortable with.
However, if your going to be developing any sort of a website, I believe that you should comply with the W3C's guidelines, and use tables how they were intended to be used. Sepperate content from format, and stick all your formating in style sheets wherever possible. For one thing, this will keep your site from getting outmoded as the web moves more to using style sheets for formatting and display, but it also makes the site easier to access for people who are using devices like screen readers, that can get hung up on the way tables have things arranged. So all, I'd say DIVs all the way!
However, if your going to be developing any sort of a website, I believe that you should comply with the W3C's guidelines, and use tables how they were intended to be used. Sepperate content from format, and stick all your formating in style sheets wherever possible. For one thing, this will keep your site from getting outmoded as the web moves more to using style sheets for formatting and display, but it also makes the site easier to access for people who are using devices like screen readers, that can get hung up on the way tables have things arranged. So all, I'd say DIVs all the way!
It really often times boils down to manipulation also. With DIVs, you can easily alter appearance a little or a lot, depending on your needs, practically on the fly.
Best I can tell, most everything that can be done with DIVs can also be done with tables, but you have to evaluate efficiency when doing something specific - such as precise positioning.
Basically, you have to think; “do I want to write out a dozen nested tables to position this button here or is there a better way?” – in this case you would be best with a div and some css. Although there is a bit more required on learning the payoff is great in both appearance and ease coding.
Best I can tell, most everything that can be done with DIVs can also be done with tables, but you have to evaluate efficiency when doing something specific - such as precise positioning.
Basically, you have to think; “do I want to write out a dozen nested tables to position this button here or is there a better way?” – in this case you would be best with a div and some css. Although there is a bit more required on learning the payoff is great in both appearance and ease coding.
Using tables for layout it semantically incorrect and not search engines friendly. Divs exist for that, to separate sections in your (x)html document. But to achieve the same layout with divs that you get with tables, it's a really pain to do. I'm talking about a 3 columns layout, in which the center column comes first in the code and no matters which column is higher, all the other will follow the size of the biggest. This is really painfull to aquire with css, but possible...
Some approaches to the layout:
http://www.positioniseverything.net/articles/onetruelayout/
http://alistapart.com/articles/holygrail/
http://alistapart.com/articles/multicolumnlayouts/
Being the last one the easiest to achieve.
Some approaches to the layout:
http://www.positioniseverything.net/articles/onetruelayout/
http://alistapart.com/articles/holygrail/
http://alistapart.com/articles/multicolumnlayouts/
Being the last one the easiest to achieve.
Hi Marioh !
That's a nice reference you gave, very useful. hope everyone who doubts the usefullness of divs reads it !
That's a nice reference you gave, very useful. hope everyone who doubts the usefullness of divs reads it !
| lepris wrote: |
| Hi Marioh !
That's a nice reference you gave, very useful. hope everyone who doubts the usefullness of divs reads it ! |
Yes, let's help people go webstandards.
| Hobbit wrote: |
| Yeah divs are way better, I'll never go back to tables, ever. |
Could not agree more. Ever since I discovered DIVs and CSS, I've not made a site in tables.
Here's a simple example. Not ideal, but it works.
HTML
| Code: |
|
<!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" xml:lang="en" > <head> <title>3 column with header and footer</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" type="text/css" href="mainstyles.css" /> </head> <body> <!-- START HEADER --> <div id="header"> Header stuff goes here </div> <!-- END HEADER --> <!-- START MAINWRAPPER --> <div id="mainwrapper"> <!-- NAVIGATION --> <div class="nav"> <p>Navigation can go here</p> </div> <!-- CONTENT --> <div class="content"> <p>Main content here</p> </div> <!-- RIGHT --> <div class="right"> <p>Right hand side</p> </div> </div> <!-- END MAINWRAPPER --> <!-- START FOOTER --> <div id="footer"> Footer info </div> <!-- END FOOTER --> </body> </html> |
CSS
| Code: |
|
html { background: #fff; } body { background: #fff; margin-left: auto; margin-right: auto; width: 774px; height: 100%; border: 1px solid #000; font: normal 10px arial, sans-serif; color: #000; line-height: 140%; } #header { height: 90px; border-bottom: 1px solid #000; background-color: grey; } #mainwrapper { position: relative; top:0; height: 500px; padding-bottom: 20px; background: #fff; color: #000; background: #fff; padding-top: 10px; } #mainwrapper .nav { display: inline; float: left; width: 110px; height: 100%; margin-top: -10px; padding-left: 5px; border-right: 1px solid #000; } #mainwrapper .content { display: inline; float: left; width: 503px; height: 100%; margin-top: -10px; overflow: auto; padding: 0 5px; } #mainwrapper .right { display: inline; float: right; width: 130px; margin-top: -10px; height: 100%; padding-left: 10px; border-left: 1px solid #000; } #footer { position: relative; top:0; width: 100%; height: 70px; color: #000; border-top: 1px solid #000; border-bottom: 1px solid #000; text-align: center; } |
In additional to this. If you are unsure on how to achieve what uyou're after, there's an online tool you can use to create CSS based layouts for you - http://www.csscreator.com/version2/pagelayout.php
I would also recommend reading the tutorials at www.w3schools.com. It's an excellent site
I would also recommend reading the tutorials at www.w3schools.com. It's an excellent site
Consider resolution independence - say, you have a table that is around 700 px wide, aligned center, and has tens of nested tables inside to create myriad rounded corners and weird shapes. When seen at 800x600, the table would show up at the center, leaving around 40-50px on each side; and at higher resolutions the main table would still be 700px and centered; all the extra "blank" space gets distributed equally on either side.
Is it possible to use DIVs with absolute positioning here, since the co-ordinates of each element depend upon the resolution (unless the master table is left aligned on the page), and how? That would be really good.
Is it possible to use DIVs with absolute positioning here, since the co-ordinates of each element depend upon the resolution (unless the master table is left aligned on the page), and how? That would be really good.
I would say to create a master div, usaually named #wrapper or something along those lines. This should have a fixed width, with auto left and right margins, thus forcing the page to center on the screen. Within this wrapper, you can then use absolute positioning for the section divs, as you are working with a definite screen width, regardless of resolution.
I still get nightmares about tables sometimes at night...
I used to use tables a while back, luckily I found the light and started using proper coding techniques. Div's are hard to get used to but are definitely the way to go for web design. Less code = less bandwidth usage, and it also makes your markup much easier to read and edit.
according to W3C guidelines we should make div based websites, to make our website reachable and usefull for people with disabilities, who use some special equipment to surf websites. and ofcourse for better placement in search engines.
here is a link to get help on css layouts all examples are here whether you want to make a two or three column website no mater fixed or fluid layout. http://www.dynamicdrive.com/style/layouts/
to get help on other goodies for your website like tableless forms, css menus here is another link http://www.cssdrive.com/index.php/examples
to test your website for table less validation use this link http://w3tableless.com/ validation is based on W3c rules for making a website table less.
to read further on W3C guidelines on accessibility read this
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
here is a link to get help on css layouts all examples are here whether you want to make a two or three column website no mater fixed or fluid layout. http://www.dynamicdrive.com/style/layouts/
to get help on other goodies for your website like tableless forms, css menus here is another link http://www.cssdrive.com/index.php/examples
to test your website for table less validation use this link http://w3tableless.com/ validation is based on W3c rules for making a website table less.
to read further on W3C guidelines on accessibility read this
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
I think tables are better because the div align is really annoying an gets all over the coding. Also, when the user has a bigger monitor it sometimes messes up, whereas tables can be adjusted.
| roboguyspacedude wrote: |
| Also, when the user has a bigger monitor it sometimes messes up, whereas tables can be adjusted. |
Not if you code it correctly
Divs are far easier to manage than tables. The code is cleaner, making it easier to find the content.
I gotta agree with the divs as the best option. I stop using tables about a year ago, and that was the best thing that I've ever done. The code is soooo much cleaner and nicer on the eyes. But more than the cleaner code, I love the flexibility that you can get with CSS and divs. I hated how restricting tables weres. you can always tell when a layout has been done with tables. It tends to look pretty bulky. Its not easy when you first switch to divs, but in the long run its worth it.
Could not agree more. It's definitely worth the perserverance
div getting me error..but table it's ok..
| xsharez wrote: |
| div getting me error..but table it's ok.. |
What div is giving you an error?
Post some code and maybe we can help
You can use div !!!!
I've always used tables... it's what I grew up with...
But now I'm gonna go ahead and look into divs seeing all the positive things said about it.
Then maybe I can convert my site to div's. O_o, that may be a bit of work though.
But now I'm gonna go ahead and look into divs seeing all the positive things said about it.
Then maybe I can convert my site to div's. O_o, that may be a bit of work though.
i started as many people on divs, but in the moment you go to liquid desings tables are just a mess... but i still get a lot of trouble using divs, most of the times i use a combination of both, if not i find it too hard...
I know this topic has been already posted, but i just wanted to see a poll...
Sorry to the userwho posted the original topic!
Sorry to the userwho posted the original topic!
I merged both topics.
I like using tables. And nobody is going to tell me I have to use div because that's the "better" way. It works and even passes the validator, so not even code nazis have good grounds for criticism.
| Arnie wrote: |
| I like using tables. And nobody is going to tell me I have to use div because that's the "better" way. It works and even passes the validator, so not even code nazis have good grounds for criticism. |
Nobody is saying you should change. Us "DIV developers" are just following the advise and standards set by the W3C
Does that make you feel superior somehow? (This is a question in general, not personal.)
Using tables doesn't make a site less compatible, it doesn't make a layout less good-looking, and for many coders (including me) it doesn't make the coding any harder. On the contrary.
So why then would using "the W3C recommendation" make anyone superior? Perhaps because that's what a group of people (who I call W3C worshipers) is bragging about all the time? I'm not saying any of you here are, you should judge yourself on that one.
(http://www.frihost.com/forums/vp-588417.html)
And tables are also standards defined by the W3C, anyway. But I guess it gives you even more status when you even strictly follow the recommendations, huh? Although it may cost more time and the result will hardly differ. But, you can brag about being W3C approved even beyond the validator!
Tables may not have been strictly made for the purpose of layouts. But that's only theory governed by the godly W3C. And for some reason, many great layouts use tables with succes. For example, this forum's? ...
Bottom line is, the only factor that really matters is what the coder is used to. Nobody has any reason to feel superior because he's using divs (or tables for that matter). And believe me there are enough people who do anyway.
Last edited by Arnie on Thu May 17, 2007 1:02 pm; edited 1 time in total
Using tables doesn't make a site less compatible, it doesn't make a layout less good-looking, and for many coders (including me) it doesn't make the coding any harder. On the contrary.
So why then would using "the W3C recommendation" make anyone superior? Perhaps because that's what a group of people (who I call W3C worshipers) is bragging about all the time? I'm not saying any of you here are, you should judge yourself on that one.
| Arnie wrote: |
| I wonder what's with the recent fixation on W3C anyway. I mean, I know they've been around for long, but for the last few years it's become some sort of hype to refer to them. |
And tables are also standards defined by the W3C, anyway. But I guess it gives you even more status when you even strictly follow the recommendations, huh? Although it may cost more time and the result will hardly differ. But, you can brag about being W3C approved even beyond the validator!
| Quote: |
| "LOOK ma NO TABLES!" |
Tables may not have been strictly made for the purpose of layouts. But that's only theory governed by the godly W3C. And for some reason, many great layouts use tables with succes. For example, this forum's? ...
Bottom line is, the only factor that really matters is what the coder is used to. Nobody has any reason to feel superior because he's using divs (or tables for that matter). And believe me there are enough people who do anyway.
Last edited by Arnie on Thu May 17, 2007 1:02 pm; edited 1 time in total
@Arnie
Following the recommendation, having your site validated or not simply means nothing, and nobody is better or worse than anybody by validating the sites of making them on divs or tables. Google and Gmail are killer apps and they are far from being validated.
Making your layout with tables will have your site being validated since you follow the w3c recommendations for tables. There is a site, for example that does not use divs nor tables for structuring.
The only thing is that according to w3c, tables are made to present tabular data (like this forum), not for layout purposes, divs are sections in the document, that's why people tells to use divs for layout purposts. So, tables are semantically incorrect while talking about layout.
Nobody is telling you are worse than anyone (seems that you started doing it to yourself) by using tables instead of divs for structuring layout. Remember, 99% is very very good, if you have to use a table to make a layout easier to you, but followed the recommendation on the other parts, it's pretty good.
Following the recommendation, having your site validated or not simply means nothing, and nobody is better or worse than anybody by validating the sites of making them on divs or tables. Google and Gmail are killer apps and they are far from being validated.
Making your layout with tables will have your site being validated since you follow the w3c recommendations for tables. There is a site, for example that does not use divs nor tables for structuring.
The only thing is that according to w3c, tables are made to present tabular data (like this forum), not for layout purposes, divs are sections in the document, that's why people tells to use divs for layout purposts. So, tables are semantically incorrect while talking about layout.
Nobody is telling you are worse than anyone (seems that you started doing it to yourself) by using tables instead of divs for structuring layout. Remember, 99% is very very good, if you have to use a table to make a layout easier to you, but followed the recommendation on the other parts, it's pretty good.
Nobody is explicitly saying so here. But I talk about these things on more occasions and 99% chance that some are thinking and/or implying their superiority for being faithful W3C followers.
and 99% chance that some are thinking and/or implying their superiority for being faithful W3C followers.I'm 99% div user, hardly use something else like tables.. working as a proffessional webdesigner.. ehm, justdont think I'm that good at it but I guess other people do
Anyways.. I use divs always.. also write all my code in notepad, old fashion way.. ye DW is alot easier.. but I like it old fashion..
Only reason I use divs is because I'm IMBA with css.. and you can do so much with a div if you just know your stuff with the css.. tables are used for forms and data.. I use tables when I make my login scripts, when I throw up a shoutbox or when I'm about to list alot of data... otherwise it's divs.. as few as possible to keep it clean
Anyways.. I use divs always.. also write all my code in notepad, old fashion way.. ye DW is alot easier.. but I like it old fashion..
Only reason I use divs is because I'm IMBA with css.. and you can do so much with a div if you just know your stuff with the css.. tables are used for forms and data.. I use tables when I make my login scripts, when I throw up a shoutbox or when I'm about to list alot of data... otherwise it's divs.. as few as possible to keep it clean
I am 100% agree with Azmo, he is 100% right as i myself write only div based structures, i m sure with a good knowledge of css you can do a lot more things using div. but thats not true for tables and moreover tables put necessary markup all over your pages.
to be honest i don't find any better than the other, when i use divs when i make a layout that i want to easly convert to a myspace overlay but for website layouts the easy option is to use tables altogh in the past i have found iframes usfull, for potioning floating flash objects etc but these can be annoying as they are not supported in every borswer and i have found that background transparentcy does not work in ie, something that can rin designs, but i voted divs for the diversity.
The Div gets my vote
I find in many web applications table still can not be replaced.
I tend to be an old school web designer, so I tend to stick with the tables
You should use tables for tabular data. CSS for layout. Divs should be used for containers where there is no other logical element to be used. Or to group some elements in f.ex. a colomn.
While some people abuse tables, other people abuse divs. They use divs for headings, div for paragraphs etc etc etc. HTML should be semantic, and divs should be used as grouping or the last choice.
While some people abuse tables, other people abuse divs. They use divs for headings, div for paragraphs etc etc etc. HTML should be semantic, and divs should be used as grouping or the last choice.
cavey, I could not agree more with you.
i even heard , that , tables are nowadays , being prefered less by crawlers as it takes time to render and is a usability issue with the user .
So , what i would consider is using a DIVISION tag .
www.glish.com/css/ has some nice tutorials , for designing , with "LOOK ma NO TABLES " , kinda issues .
So , what i would consider is using a DIVISION tag .
www.glish.com/css/ has some nice tutorials , for designing , with "LOOK ma NO TABLES " , kinda issues .
 |