which is better <div> or <table>

[aliceknight]

why many designer suggest to use div tag in web page designing whereas many other says it's OK
to use table tag. Can anyone tell me the answer of this question?

[lorax]

Welcome to WebmasterWorld!

The two top reasons for using Divs instead of Tables are

1) Divs fill whatever horizontal space is available and
2) they require less code. Less code equals smaller files which equals faster load times.

The ability of a Div to fill the space is just a nice feature to have - especially when working with fluid layouts.

The main reason people use Tables is because it's easier to get positioning of the content the way you want it.

To use Divs requires CSS skills and if you don't have them or are just learning - Tables offer a quick way to build without the fuss. But Tables are horrible for fluid layouts. Divs just slide past each other and adjust when they're forced to the next line making fluid page layouts much easier to accomplish (not necessarily to design though).

[topr8]

many people here will tell you that using tables for layout is wrong because it is semantically incorrect.

google can tell what a page looks like whichever method you use and i don't believe there is an SEO advantage to using DIV's (not directly anyway)

although lorax's point (2) is correct, the bytes you'd save by not using tables is trivial, especially if you have quite a few graphics on the page. especially these days as most mobile devices have faster download speeds than an old time dial up connection (where every byte saved really counted)

div's are suited for fluid designs, and many people use tables for an overall layout and also div's within the table cells.

technically div's are most likely to be the correct way to go, they also are much better to use if you are expecting your users to be using devices with very different screen sizes (assuming the site has been designed with this in mind)

in answer to your question: i'd suggest that if you are employing someone to build your site, avoid anyone who wants to use tables for layout - the reason being it is more difficult to use div's and if they haven't mastered the use of div's correctly then i'd be worried about other holes in their knowledge.
if you are doing it yourself and just a beginner, then you should learn to do it properly with divs.
if you are not a beginner, are already competent at using tables for layout and want to build more pages and sites as quickly as you can, then continue with what you know.

[drhowarddrfine]

There is no reason to ever use tables for page layout. The most significant are:

1) Tables are slow. Some may say, "Oh with the powerful computers we have today ... which means they've never considered the poor guy who has to view your page on a mobile phone.

2) Tables are not flexible. Moving an element from one part of the page to another can be difficult to impossible, especially programmatically with javascript. With all the devices out on the market today, tables are least able to accomodate them.

3) Search engines can fail to understand the relationship from one table cell/column/row to another. They do not follow how a page looks on the screen but only the outline of the document. A properly laid out document looks like an outline you may have learned in school with headings and sections and paragraphs. Tables break that relationship.

As an aside, the guy who first thought up the idea of using tables for layout, one year later in 1999(?), wrote an article called, "The Web is Ruined and I Ruined It". Guess what that story is about. Google for it.

So, using tables for layout is for the lazy and those who don't know how to write proper markup and CSS and have no future in this business. Period. End of story.

Now, one thing a lot of people forget, is that a div is just another generic container element. You don't always need a div to layout everything on a page. Lots of times, just leaving a paragraph sit alone is just fine. After all, like a div, it's another block level element. Just like headers are.

And we haven't even begun to touch on section, article, aside, etc. in HTML5.

[swa66]

IMHO the right answer is to use the right tag for the appropriate content.

So for content that is tabular data (think e.g. about a financial document that compares the different source of revenue over the last 4 quarters or so): <table> is the right tag.
Abusing tables for layout is 90's stuff: any designer that promotes that: AVOID THEM LIKE THE PLAGUE.

So what do they use if not tables:
For paragraphs: <p>
For lists, ... you get it by now I guess.
And the layout is separated into CSS, outside and well separated from the HTML.

So divs then ? NO!
<span>, <div> should be used only when no other tag is better - or can be used. With html5, most often other tags are available and usable. Prior to html5, you'd need something to use every so often to create more structure and then <div> wasn't a bad choice.

Why the past tense ? HTML5 is the way to go for new content, so you have many more appropriate options then to persist in splattering <div> and <span> all over the place. Sporadic use is of course still ok as we often have to render things that need something to contain something that's just too abstract to match any of the more semantically relevant tags.
Overdoing divs and spans has a name: "divitis". It's an illness, and IMHO it's just one step less evil than abusing tables for layout.
Any designer that insists to use loads of divs: AVOID THEM JUST AS WELL.

So a wide variety of tags with a bunch of classes and ids onto them to match them to the CSS.
Again: NO!
Classes and id's can be used but should be used sparingly and they again must be used to describe the content, not the layout (so they have names like "warning" not "red").
Usually this "classitis" comes with the "divitis" above.

So, how do you recognize a technically competent designer.
[I'm leaving out the aesthetic aspect intentionally, of course it comes into play.]

Instead get the one that talks about "mobile first", "responsive design".
And ask them to show you work they did at other customers, check it on your phone, tablet and computer. It should be recognizable, but fitting the size of the device. be readable without zooming in on the smallest device and use all the width of the widest device. Mostly check it for usability. Then do a "view source" and read what's there - even if you do not understand html yourself, if you cannot read the source code yourself (even as a complete novice) and "get" what the page is about without having seen the page rendered: WALK AWAY.

Properly made html is using structure from the tags as to make it so that the html itself explains and makes the structure evident, even if you do not know much html, it's quite possible to create html that is intuitively readable and understandable to anybody able to read. If it's not: then it's not well made, and far worse: it's not easy to maintain in the long run, not friendly to be interpreted by machines, ...

So I guess the real answer is to keep looking, and use neither the <div> nor the <table> guy.
(and if those really are the only two you can find: use the <div> guy, as his work is likely going to be easier to fix afterwards - although it'll likely never reach the level of a "mobile first" design without significant rework)

In case you wonder: "mobile first" is a strategy to make the design and content for mobile devices before you make it for other platforms, so as to have a most intuitive interface, and one that works well on small width screens. Then do a rework for ever bigger screens to use them optimally and use an adaptive method ("responsive") to chose which width of layout from the concurrent layouts is offered to which screen (actually it usually means the client chooses which is rendered).

[Kendo]

What I have read above is rubbish:

- tables can be set to any width by pixels or percentage
- tables enable more control over all aspects
- adding a custom table is simpler and doesn't require CSS styling
- in WYSIWYG editors you can visualise what the table looks like

I have been editing HTML since the days of nod and would never recommend DIV over TABLES, not to a pro nor an amatuer. If you don't undertstand basic HTML building blocks then stick to a CMS like DotnetNuke, Drupal, Joomla, Moodle or WordPress.

[swa66]

tables enable more control over all aspects

I'd be ROTFLMAO if I'd assumed you didn't actually mean that.

It's flawed as the reality is the utter opposite of your claim: the standards to which browsers adhere specify explicitly you get LESS control in tables, not more.

E.g. positioning in tables doesn't work the same in all browsers (I'm discounting IE - even the most recent incarnations of chrome and firefox differ widely how they react if you try anyway) and according to the standards the browsers don't have to do it the same either.
That's lack of control due to tables ... not more control.
[And I ran into it recently when trying to make prettier, more user friendly tables (for tabular data!)]

Anyway, I'd like to see anybody make a proper responsive design with a 3 column table layout for a desktop and a single column layout of that same table abused for layout on a phone.
If it is indeed that flexible and allows more control, it should be capable...

[Samizdata]

why many designer suggest to use div tag in web page designing whereas many other says it's OK
to use table tag. Can anyone tell me the answer of this question?

As always, there are some excellent answers to your question in this thread.

And as always, they are displayed in a table.

...

[lucy24]

And as always, they are displayed in a table.

If the relationship among elements works in two dimensions, that's a table. "Tabular data" is not restricted to numbers.

left to right: who said it; what they said
top to bottom: swa66's contribution, Kendo's contribution, Samizdata's contribution

If your content requires nested tables, you are almost certainly doing something wrong. The present page contains 22 tables, nested up to 4 deep. One of those is a true table: the one I described above. The other 21 are for layout. And if you've got elements like

cellpadding="1" cellspacing="3" border="0"

you have misplaced a decade.

:)

[swa66]

Absolutely a GREAT answer lucy24!

I'd click "like" if there were a button for that ;) Oh wait that's also last decade :(

[Kendo]

you get LESS control in tables

Comments like this suggest a lack of experience. The only reason that some of us even tolerate the use of DIV is because CMS coders don't know differently.

[tangor]

The only comment I'll offer is that tables render differently in time when the page loads. If that is acceptable, then go for it. If the data requires it, you need to wait and let it do it. That said, the web is so much faster these days that the above rendering aspect doesn't amount to a hill of beans.

I like using tables for tabular data, ie, rows and columns

Divs make sense in layout and fluid design

I'm not all that convinced that html5 is all that great shakes at the moment, but can see some real potenital value... but after the xhtml etc, I'll wait a bit before taking the full plunge.

[lucy24]

tables render differently in time when the page loads. If that is acceptable, then go for it. If the data requires it, you need to wait and let it do it.

{table-layout: fixed;}

[drhowarddrfine]

@Kendo

I have a mobile site with content on the right side of a page in a table cell with multiple rows of content below its containing table row. When a visitor comes to the site with a phone, I want that content moved to the bottom of the page and the navigation on top slide to the right, off screen, and replaced with a menu button. When clicked, that menu button slides the navigation into view.

How do I do that with a table?

[rayan012]

Tables is old-fashioned way of designing websites. Tables should be use when you really need to present some information in tables. The css and all visual part of site should be in div blocks it's more comfortable.

[Zivush]

If you insist of making table, here's a solution to use divs as tables -
.table{border:1px solid black; display:table; width:90%; padding:2px}
.tr{border:1px solid black; display:table-row}
.td{border:1px solid black; display:table-cell; padding-left:0.3em; padding-right:0.1em; width:44%}

[Dether]

Nice style Zivush, I've just try it in one of my projects, it's lookes very nice! Thanks for sharing :)

[drhowarddrfine]

It's not. It's a hack with no purpose. If you need a table, use a table. Imitating tables with divs is more crazy than using tables for layout.

[System]

The following 5 messages were cut out to new thread by incredibill. New thread at: html/4643765.htm [webmasterworld.com]
2:29 pm on Feb 9, 2014 (PST -8)

[incrediBILL]

Tables is old-fashioned way of designing websites. Tables should be use when you really need to present some information in tables.

Table or Div isn't an either or question, they're too different things used for two different purposes that got jumbled up back in the day during HTML's infancy. Being that this is 2014, not 1996, Divs are for layout, Tables are for tabular data. Done.

Historically tables were purposely misused because HTML 2 provided no other way to accurately position elements on a page. This misuse has been a point of contention with designers ever since and left tables permanently tarnished in the eyes of developers.

I still have some major site using table based positioning that are leftovers from the olden days and eventually, given enough time and alcohol, they will be properly converted but in the interim they still function, look fine, render fast and rank well. If they didn't, they'd have all been converted years ago.

Unless someone looked under the hood they'd never know and not run away horrified.

FWIW, anyone remember the old product Net Objects Fusion? That thing spewed out the most convoluted nested collection of tables I'd ever seen and people used it all over the place.

I'll be happy when the last of my sites are all CSS and table free, except where I'm using tables just to display table data and input grids, not page formatting.

What a legacy mess.

Sadly, most of the really cool and intricate designs that were clumsily done using tables have been abandoned for RWD style sites which typically aren't that interesting to look at and all have a similar look and feel due to the template framework.

Win some, lose some, but I prefer the current cross-platform multi-viewport utilitarian direction it's headed over the crazy full page intricate graphics of yesteryear which made integrating into sites a total PITA.

[iomfan]

Divs are for layout, Tables are for tabular data.

Fair enough.

I'm looking at an analogy: "wheelbarrows are for moving things, wheelchairs are for moving people". Then someone says, "I wouldn't do business with people who move things with wheelchairs - they are incompetent". With the sample I posted (see [webmasterworld.com...] ) I wanted to illustrate that the issue is not as black-and-white as it may seem: of course, people who insist that the only way to move things is to use wheelchairs are seriously missing something, but there are conceivably sitations where an unorthodox approach is the one that meets the need and is not a sign of incompetence but of creative thinking.

I still have some major site using table based positioning that are leftovers from the olden days and eventually, given enough time and alcohol, they will be properly converted but in the interim they still function, look fine, render fast and rank well. If they didn't, they'd have all been converted years ago.

Unless someone looked under the hood they'd never know and not run away horrified.

The example I posted is an abstract from a site whose maintenance I inherited (it is a relatively new site, but the design is from an era long ago). The person who wrote the source text told me that none of the contemporary HTML tools he used produced a design the customer was happy with, so he went back to where he once started out and wrote a page by hand - and the customer approved of its appearance. Then he used that page as a starting point for all pages of the site. And I doubt that the many of the people visiting that site look under the hood (the site is not about anything technical but about something related to human-related services).

Sadly, most of the really cool and intricate designs that were clumsily done using tables have been abandoned for RWD style sites which typically aren't that interesting to look at and all have a similar look and feel due to the template framework.

I don't think of it as an advantage at all when templates show through, when the first impression I get from a website is "another Wordpress blog" or "another Joomla project" or such - if someone tells me that what they offer is different from "the rest", then I also expect them to present that in a way that is different, a way that tells me something about their individuality and creativity. So I think there is nothing wrong with using tools that were current 15 years ago if that gets the job done to the client's satisfaction. :)
(But as a personal challenge I still want to try and "translate" that site with tables to a contemporary design standard.)

[ronin]

Table or Div isn't an either or question, they're too different things used for two different purposes that got jumbled up back in the day during HTML's infancy. Being that this is 2014, not 1996, Divs are for layout, Tables are for tabular data. Done.

+1.

People rarely seem to point out that...

You could use <ul>s for layout.
You could use <p>s for layout.
You could use <pre>s for layout.
In fact... you could use pretty much any element for layout.

Using <table>s for layout is a legacy practice dating from before we had CSS 2 Positioning and it's very much in the same category as the sort of thing above.

In 2014, we can use semantically descriptive HTML5 elements like

<header>
<nav>
<article>
<section>
<aside>
<footer>

and generic <div>s for describing the parts of our pages.

Perhaps a good rule of thumb might be: before you lay out a web-page using <table>s, lay it out using <ul>s.

[drhowarddrfine]

The guy who first thought of the idea of using tables for layout wrote an article titled, "The Web is Ruined and I Ruined It!", back in 1999 or so, if you feel like Googling for it.