Welcome to WebmasterWorld Guest from 35.175.191.168

Forum Moderators: open

Message Too Old, No Replies

<table> or <div> - Which one do you use?

     
5:51 am on Apr 4, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 7, 2006
posts:42
votes: 0


As the title says, which one do you use and why?
12:16 pm on Apr 4, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 16, 2005
posts:58
votes: 0


i just like tables, been doing them so long now i know them by heart
12:29 pm on Apr 4, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


I prefer to use DIVs. Unless I have tabular data, then I put it in a TABLE.

Used to let FrontPage build my pages for me with TABLEs, but when I learned how to write HTML myself, DIVs seemed the natural way to go.

12:56 pm on Apr 4, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 15, 2003
posts:7256
votes: 3


DIV's only now (for page layout) for the following reasons:-

1. Page size
2. Management of layout for entire site in one CSS file
3. Placement of content within page source-code (SEO)

I still use tables for tabular data display.

There are some layout types which are simply not possible using DIV's in which case you should just use tables and not worry about it too much. All else being equal, and if it's possible to do a particular layout with DIV's, you should use DIV's.

TJ

2:21 pm on Apr 4, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 11, 2004
posts:1014
votes: 0


As others have implied. This is not an either/or question. It's like asking do you eat apples or pears?

<div> and <table> are different, and have different appropriate uses.

Matt

2:37 pm on Apr 4, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 6, 2005
posts:134
votes: 0


After trying too hard to do everything with <div>s I have to agree that it depends on the situation. They're a bunch of people out there who preach tableless design, and I listened for awhile, but you have to be practical.

I usually try to get it done with divs first, then tables if I'm spending way too much time getting it to sit right.

2:38 pm on Apr 4, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Mar 30, 2006
posts:333
votes: 0


tables
2:38 pm on Apr 4, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Mar 30, 2006
posts:333
votes: 0


... and chairs
3:01 pm on Apr 4, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 1, 2004
posts:607
votes: 0


If IE was to vanish from this Earth, I would switch to pure <div>-based layouts immediately. I've sort of got the hang of them and can create beautiful (well, at least I think they are) layouts which work in every browser except guess which. And as CSS karma doesn't translate into income dollars, I'm sticking to tables where they're easiest.
1:51 am on Apr 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 5, 2006
posts:3
votes: 0


Hi Everyone!
I am new to web design, I love using div's, the only problem I have with them is when the text size on the monitor is changed, it will skew everything on the page. I under that there is a way to control this with CSS, but I haven't figured it out yet.

Charley

9:50 am on Apr 5, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 4, 2006
posts:111
votes: 0


div's for me always. I only use tables for tabular data.

Been coding in wordpad for 3 years now, and love it!

11:15 am on Apr 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 3, 2006
posts:13
votes: 0


I'm pretty religious when it comes to picking elements, always trying to use the most semantically correct. Hence, tables only for tabular data.

I am new to web design, I love using div's, the only problem I have with them is when the text size on the monitor is changed, it will skew everything on the page. I under that there is a way to control this with CSS, but I haven't figured it out yet.

The font-size property!?
I'm not sure I completely get your problem, but with all due respect, I think you should go read a book about CSS & (X)HTML before you get too many quirky ideas about how it works. Jeffrey Zeldman's has written a fairly acclaimed one for beginners: "Designing with Web Standards".

Been coding in wordpad for 3 years now, and love it!

Why on earth do you punish yourself like that?
2:08 pm on Apr 5, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:July 2, 2004
posts:607
votes: 0


Man, I haven't used a table (for something other than tabular data) in a few years now. I can't imagine a layout that would be too difficult to create in divs rather than tables (and I've had clients try me on that statement, too!) I don't even *remember* how to do a site in tables anymore!
7:10 pm on Apr 5, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


So many discussions about this topic:
[netresources.co.uk...]

Don't forget to read the comments for every article.

Here's my opinion: I stick with tables.

Why?

- It is easier than CSS-P.
Some pro-CSS will say this is not true.. Well, try it for yourself and see. Be sure to test your code on, at least, Firefox, Opera and IE.

- It is easier to achieve cross-browser compatibility using tables. Do a search for "css hacks".

- In my opinion it is NOT true that changing the design of a CSS-P based website is way faster than a table based one. Anyway, I don't change my design every week and I don't care if it takes me 6 more hours because it's table based.

But, the main reason:

- It you are not a web programmer yourself, you really don't care if a website you visite is CSS-P based or table based. In fact, you won't even know what is a "table".

So I stick with the easier and most cross-browser solution.

7:39 pm on Apr 5, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Another reason to avoid using tables for layout is that they can be less accessible to people with disabilities. That's not always the case... there are ways to create table based layouts that are accessible-friendly. But it requires a little extra thought that I'm sure most developers who create table-based layouts don't put in.

Just something to consider. Sort of the opposite of the "I use tables because it works in every browser" argument.

Regards.

8:02 pm on Apr 5, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0



Another reason to avoid using tables for layout is that they can be less accessible to people with disabilities.

I'd like to know more about that.
Are you talking about font resizing? Like using em instead of px?

What else?
Providing a RSS feed?
Let the user use its own stylesheet easily?

I fail to see why you couln't do that with a table layout.

9:25 pm on Apr 5, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


No, it has nothing to do with fonts... it's more to do with the actual layout and the way screen readers see the data. Essentially, with a table based layout the end user may be forced to listen to a bunch of redundant information over and over again as he/she traverses the site.

If you'd like to learn more about accessibility, here are some useful links:
[section508.gov...]
[w3.org...]
[access-board.gov...]

Those sites will probably explain it much better than I could.

9:39 pm on Apr 5, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


Thanks for the links.
10:15 pm on Apr 5, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


It's quite amusing, I actually had to check the timestamp on the forum messages to ensure I wasn't back in 1999.

I remember having this conversation along time ago on this very forum, I thought standards would have been a bit more widespread by now.

I haven't created a table based layout in almost 5 years, so i'm still unsure as to why there are those who still use them. A lot of people still seem to use tables because they can't grasp or don't understand how to do the equivalent effect with divs and css, or they don't understand the (good) side effects of using divs and css.

I'm very big on semantics and accessibility, so justifiying the use of a table based layout to me is nonsensical.

Also, "div" and "table" are not synonymous. I don't believe you can use one in place of the other. Tables are for tabular data and divs help with layout.


It you are not a web programmer yourself, you really don't care if a website you visite is CSS-P based or table based. In fact, you won't even know what is a "table".

If that is your main reason, then you should probably stop using tables for layout now. 1) That's a ridiculous concept 2) Of course they care and 3) Tell all the people who use screenreaders that.

6:38 am on Apr 6, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 5, 2006
posts:3
votes: 0


Allan, I'll take a look at the book by Jeffrey Zeldman, Thank you. My problem is that when using divs I can have my web pages look decent in different browsers until a user changes the default text size in their browser, then the divs will sometimes overlap. I am still in a web design class where I was told to use tables to stop this problem, which it does......but I have read somewhere that this problem can be controlled in CSS. I hope that I have explained this better. I do know that I have a lot to learn and this site is a tremendous source of information! Thank you.
Charley
12:53 pm on Apr 6, 2006 (gmt 0)

Senior Member from NL 

WebmasterWorld Senior Member lammert is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 10, 2005
posts:2955
votes: 35


I have never understood the war against tables for page layout. If you read the HTML 4.01 spec--the one which is the safest to use according to other recent threads here--tables are there to define layout between elements of all different kinds, where divs are there to define styles for enclosed content. These are different goals. Tables define layout-interaction in-between content, where divs define layout of one single piece of content.

The problematic thing is that some style properties can be used to alter the way blocks of <div> interact with each other (think of position, width, height, float, clear etc) but these styles can also be assigned to tables or other HTML elements. The <div> is not special in that way. Actually <div> is one of the dumbest HTML tag because it has no other effect than grouping content in a block with an optional style.

People with religious believe in the "styles only approach" have in my vision turned the world around and used the harmless and not so functional <div> to fill it with style attributes even for purposes where the HTML spec provided a specialized alternative with <table>.

My approach: I use tables wherever appropriate for layouts because it was where they were defined for in the first place. They have the widest browser acceptance and least problems with cross-browser compatibility. Most of the styling within my tables is done with CSS. Divs are only used when I find it useful to mark a block of text with specific styles, which in practice means almost never.

1:35 pm on Apr 6, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


I like the fact that you conveniently didn't read this message under "tables" in the HTML 4.01 spec:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

Also, in 1999 semantics didn't mean as much as they do and of course the web was still young. It's been 7 years and things have changed, we now understand things better.

To say that "tables are meant to be used for layout" and "they're better supported" shows an incredible lack of knowledge of the web and why tables were used during that period of time. If CSS hadn't been put off for as long as it had after HTML came out, we wouldn't be having this conversation right now. I'm still shocked that i'm having to have this conversation in 2006.

I can have my web pages look decent in different browsers until a user changes the default text size in their browser, then the divs will sometimes overlap. I am still in a web design class where I was told to use tables to stop this problem, which it does......but I have read somewhere that this problem can be controlled in CSS.

You shouldn't prevent the user from resizing text.

---------------------------------------------------

Another point is that you really shouldn't use "div" for everything. You can easily style up normal elements the way you would style up a div, and it's preferable to do that if and where possible.

1:53 pm on Apr 6, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0



Also, in 1999 semantics didn't mean as much as they do and of course the web was still young. It's been 7 years and things have changed, we now understand things better.

And browsers still have lots of issues.

It sounds like you're trying to make people feel bad about using tables by always saying "we're not in 1999 anymore". Well if today, April 2006, div-css was working well in every browser without so many hacks, we wouldn't have this discussion.

I'm not a table freak, I only want to use something that work.. Practically, not just on paper.

2:04 pm on Apr 6, 2006 (gmt 0)

Senior Member from NL 

WebmasterWorld Senior Member lammert is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 10, 2005
posts:2955
votes: 35


Robert, I read that piece of text :) The question of the original poster was however if he should use <table> or <div>. The text you highlighted from the HTML spec talks about CSS, not <div> which are two totally different things. I use CSS with tables, combining both.

<div> is a container to group a piece of content without relation to other content. In my opinion it has been misused by people and advocated as the only proper carrier of CSS styles. Look at the auto generated content from CMS software like Mambo and you know what I mean. Almost every word and html element has been embedded in a seperate <div> in order to make it possible to assign styles to it. Use of CSS can go much broader than only with divs and when designing a site you shouldn't have too narrow focus on the "styles with div" approach only.

Also, using divs instead of tables does not automatically increase the usability of a site for people with disabilities. The order of elements, links within the document to jump to the start of the content and the use of media types in styles are what helps people with disabilities.

To be honest, I haven't used the media types aural, braille and embossed in the styles of my table based sites yet, but I have used media="print" on the style of table columns to alter the appearance of interactive parts like menus and ads from hardcopies and I intend to use the same technique for textreaders.

My point is, that tables are not bad for layout per se, and that you can assign CSS in the same way to it as to divs, getting comparable results only with less CSS hacks needed to prevent all kinds of weird problems in cross-browser compatibilty.

3:03 pm on Apr 6, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


I do understand what you're saying, but my point is that "div" and "table" are not synonymous, so the original question was invalid.

You also highlighted I point I had already made, that div has in fact been overused. Which is why I said to use it "as and when appropriate". Obviously it's possible to do this:

<h2 class="title">Blah</h2>

where others would do this:

<div class="title"><h2>Blah</h2></div>

It just depends on the effect you want.

I am also aware that you can style a table with css, just as you can with any element. The whole issue is semantics, and that CSS in conjunction with semantic mark up is generally favoured instead of considering everything a "cell" and caging layout elements.

I absolutely love using tables for what they're designed for: tabular data.

There is plenty support for CSS and semantic markup these days, I really don't understand the issue. If I can code numerous complex corporate websites with standards based markup, I don't see why others can't.

Trust me, i'm not blaming anyone for the slowness of the W3C or UA designers to implement all the necessary features. I just find it slightly weird that the same question is being asked 6 years on.

I would not use a div to code a table, so why would I use a table to section content.

3:28 pm on Apr 6, 2006 (gmt 0)

Senior Member from NL 

WebmasterWorld Senior Member lammert is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 10, 2005
posts:2955
votes: 35


Robert, the question is not why others can't use table-less designs because in principle everyone can, but why others should.

In my situation the number of people making printouts of pages is much higher than the number of people using screen-readers. Tables give me better control of layout in those cases because the basic structure of the page remains, even with weird paper sizes. Remember that paper-sizes in Europe are smaller than in the US for example. Printouts of many other websites are really ugly, basically because web designers use fixed width in their CSS to keep their <div> blocks well arranged in browsers.

When you are designing a governmental website, access to disabled users is of mucher high priority where the use of <div> can be beneficial. It depends on the type of visitors and the way your site is used.

4:07 pm on Apr 6, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


I doubt that the amount of screen reader users who use government websites is greater than the amount of people who print articles off them. So in that case your advise would be to ignore guidelines, research and semantics and code in tables for supposed better printer support. Accessibility imo is a requirement of all websites.

I have to code up annual reports for corporate websites as well, and one of the main requirements is that they are able to print out a nice version of the information on the site, without all the extra layout elements (and without it looking messed up). I can't really say i've had any problems, and as I said before I use semantic markup with CSS. Tables only for tabular data.

It wouldn't make sense to feed all the fixed width stuff on your page to a printer, so i'm not sure what you mean by that. All the users needs is the info and some of the formatting, which is fairly easy to deal with in css using the media attribute.

4:31 pm on Apr 6, 2006 (gmt 0)

Senior Member from NL 

WebmasterWorld Senior Member lammert is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 10, 2005
posts:2955
votes: 35


I am not saying that things are not possible in a table-less layout, please see my previous post. But not all webmasters have equal skills and many fall back to fixed width and height settings to overcome problems to align <div> elements where the <table> element has a native solution for.

So what is better? A website with tables, but forgivable with layout changes in situations like printing, or websites coded according to "the latest standards and insights" but really horrible on paper?

Both site types render well in browsers with the table driven sites having slightly better backward compatibility.

I know, your answer will probably be that if webmasters implement their CSS properly there is no problem at all--and you are right--but we are facing a real world where many webmasters do not do that all the time, and many don't even know how to do it properly. When it looks good at their own computer in IE6 with 1024x768 screensize, the website is finished.

We live in a world where webmasters have a learning curve to follow and not all webmasters have the will, need or knowledge to get to the end of the learning curve. This is the world where table layout designs are more forgivable in case of layout anomalities than CSS ones.

4:57 pm on Apr 6, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2004
posts:660
votes: 0


If someone can explain how to vertically-centre a line of text in a <div>, then my main reason for using <table> for layout purposes will have gone (I know, pedantic or what?).

charley713:

I love using div's, ... when the text size on the monitor is changed, it will skew everything on the page. ... there is a way to control this with CSS, but I haven't figured it out yet.

Welcome to WebmasterWorld, charley713!

Have a look at the CSS on my site. The file includes comments and links for this very topic. And yes, it is possible, in a way that works well IMHO.

PS
FWIW, this site uses 1999 techniques (<table>s). I do not hear any complaints.

4:59 pm on Apr 6, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 2, 2006
posts:9
votes: 0


In that case, I would suggest that the professional web developer should get another job. I do agree with the "new age of professionalism" for web developers. Far too many people are doing this job, and they aren't even "qualified" to do it, but that's because people think it doesn't require much skill to develop a website. I wish that view would change.

It's a shame that there isn't a decent page creator application out there that people can use to have their websites generated for them.

When it looks good at their own computer in IE6 with 1024x768 screensize, the website is finished.

That's the kind of "web developer" that I dislike, and trust me i'm well aware that there are lots of them.

FWIW, this site uses 1999 techniques (<table>s). I do not hear any complaints.

I have quite a number of complaints, but I doubt it will ever change. For now, i'm happy to educate people about web development, if I have to do it like this then fair enough. It doesn't mean I agree with the code behind it, or necessarily like the system.

Besides, there is a huge need for an accessible forum at the moment and much debate over whether a forum is mostly tabular data or not.

This 50 message thread spans 2 pages: 50