Page 1 of 2
<table> or <div>: Which is the better layout met
Posted: Wed Jun 20, 2007 4:13 pm
by smudge
Hello, I've used both table-based and div-based layouts, and can't decide on which to use.
Tables are easier to make, but divs are more configurable from my experience. Which is the 'correct' or 'better' method to use?
Posted: Wed Jun 20, 2007 4:31 pm
by Weirdan
Neither. Semantic markup is the way to go =P
Re: <table> or <div>: Which is the better layout
Posted: Wed Jun 20, 2007 4:32 pm
by Gente
I use '<div>' only. They are much more flexible, and SEO friendly.
smudge wrote:Tables are easier to make...
It depends... If you are using "Standard template design" you are right, if you design is custom design table-slicing became like hell.
Posted: Wed Jun 20, 2007 5:27 pm
by superdezign
The only time that tables were easy to make was before I knew that there was an alternative.
However, becoming too reliant on divs can easily bring you back to the stage of table based layouts, just with different elements
Posted: Wed Jun 20, 2007 6:03 pm
by smudge
Ok, new words!
What is "Semantic Markup"? I tried wikipedia, and it redirected me to markup language
What is "Standard template design"? Neither wikipedia or google knows...
This is one of those times where I feel like everything I ever knew was wrong...
Posted: Wed Jun 20, 2007 6:17 pm
by superdezign
Semantic mark-up is basically using the correct HTML elements for the correct data. Using it the way that it was meant to be used.
Standard template design... just templating. No idea what he means by "standard." Ask him.

Posted: Wed Jun 20, 2007 6:36 pm
by Christopher
smudge wrote:This is one of those times where I feel like everything I ever knew was wrong...
Like most things, if you think about it you can come pretty quickly to a reasoned understanding. But if you have just accepted what all those tutorials did on faith then you could ignore the obvious.
There are lots of tags in HTML. Many of those tags have meaning to humans and machines as well. Things like <table> or <p> or <ul> or <h1> all describe things that you have been looking at in books/magazines/websites all your life. The placement and organization of things has meaning -- hence the use of the term semantic. They have meaning to people once rendered, but they also could/should have meaning to computers that read the source. A computer can give meaning to <table> or <p> or <ul> or <h1> and therefore deal with the content in those structures appropriately.
There is also the need to do things in web pages that really do not have meaning ... other than to position things to make them pleasing to the eye, etc. Hence there are tags for that stuff like <div> and <span>. They can be used to create structures that are unique to a web page and only exist to communicate that uniqueness -- not universal meanings.
That's why my answer to your question would be: neither. Tables are absolutely brilliant for tables. They were very handy in the first few years of the web at making layouts because they had the best width and height controls. Improvements in CSS made the Div a better tag for layouts as well as a semantic improvement, because tables should really only be used for tables.
Posted: Thu Jun 21, 2007 1:41 am
by matthijs
Arborint summed it up nicely. Table based layouts should be something of the past. They are only easier for you because of your experience with them. Once you are used to not using tables for your layouts, and instead using CSS you'll never want to go back.
And about the poll question <table> vs <div>: the question implies somehow that one would use "divs" about the same way as one would use "tds". That is the wrong approach, in my opinion. If you think about what Arborint wrote about semantic markup and understand the reasons for CSS, you'd start completely different.
The way I see it you should start with the content of a document for the web (the webpage). Then you mark it up for the web. It has a header section with a few links to other sections (<ul><li><a href=..), a main title (<h1>), maybe a subtitle (<h2>), and then a few paragraphs (<p>). Etc etc. Now you start grouping different subsections of the page. Say you have the header area with navigation, title, branding. Enclose that in a div id="header". You have the main content area, let's enclose that with a div id="maincontent". Then we have a subsection. Let's enclose that with a div id="subcontent". last we have a footer area for some extra stuff (copyright etc), we enclose that in a div id="footer".
Now, at this point I haven't thought about design or layout at all. If I would see this page in a webbrowser it would be a very logical page to read. It's marked up well, semantically. Headers are headers, paragraphs are paragraphs, lists are lists. It's only at this point that I start thinking about design.
I might open photoshop and start playing with designing the content I have. Or maybe I don't even open photoshop yet, but instead open up my texteditor and start writing my CSS. Start writing CSS rules for the basic typography. Then for the main grid layout (you know, maybe make it a 2 column layout). Then for some basic colors.
You see, this is a radically different approach. But the correct one, I believe. We end up with very well made web pages. Marked up so well it will last a long time. Understandable for search engines. Accessible for screenreaders. With a bit of CSS and photoshop work we make it look any way we want. Ready for display in other devices then a 1024px PC screen. With another single stylesheet we make it look good in hand held devices.
Posted: Thu Jun 21, 2007 4:19 am
by Gente
smudge wrote:"Standard template design"? Neither wikipedia or google knows...
It's my own definition. I even put quotes around it
Ok. It's a pretty simple design - header, footer, column left, column middle, column right and everything is a simple rectangle.
Typical example -
http://www.americanheritage.com/
Note: I don't want to insult the author of this site. I just say that site is very simple (at least for table production)

Posted: Thu Jun 21, 2007 9:50 am
by smudge
I usually just use a table for layout, then divs inside the table for appearance. My standard design is just a banner across the top, a linkbar on the left side and a website 'body' (not <body>) below the banner and to the right of the linkbar. That is just the way I learned to make a simple layout, but I see what you guys are saying. Maybe you could point me to some exceptionally designed websites to examine the 'proper' way to design.
Posted: Thu Jun 21, 2007 10:13 am
by pickle
In my opinion, "better" is the one that's simpler. There have been numerous occasions where it's easier & faster for me to make a table-based layout - with less markup (both XHTML & CSS-wise) than an equivalent CSS/<div> only setup. I think religiously attaching yourself to one methodology or the other is un-wise.
I'd say try a <div> based layout first but if you find yourself working on it for 3 hours just to get it looking right, go to tables & have it done in 20 minutes
I should stress though at this point that using tables to place absolutely everything on the page is ridiculous. I just use them for page layout & let other stuff worry about the placement of elements.
Posted: Thu Jun 21, 2007 10:26 am
by The Phoenix
If its tabular data, use a table.
If its for layout, use div's.
Posted: Thu Jun 21, 2007 1:50 pm
by matthijs
pickle wrote:In my opinion, "better" is the one that's simpler. There have been numerous occasions where it's easier & faster for me to make a table-based layout - with less markup (both XHTML & CSS-wise) than an equivalent CSS/<div> only setup. I think religiously attaching yourself to one methodology or the other is un-wise.
I'd say try a <div> based layout first but if you find yourself working on it for 3 hours just to get it looking right, go to tables & have it done in 20 minutes

Reading this makes me feel like when I bring in my car for repair to some car repair shop I don't know. You know, you explain your problem, they say "ok, give us the keys, thanks buy we call you when it's finished." I imagine these guys checking out the problem in the car, talking to each other. "O well, bugger that's a tough welding job. It's almost 16.45, I want to go home, let's just put some duct tape around it or something, that will hold a year or so. The owner won't notice."
And that is exactly what is happening here as well

Posted: Thu Jun 21, 2007 2:25 pm
by superdezign
The Phoenix wrote:If its tabular data, use a table.
If its for layout, use div's.
Thank you!! That's what tables are for. Tables weren't added in HTML for layouts... Programmers made it that way. If we never did, search engines would likely treat tables as nothing but data, as it should be.
They exist to arrange data in rows and columns, like a database. Luckily, HTML 5 promises to be a bit more... defined as to how layouts should be made.
Posted: Thu Jun 21, 2007 6:38 pm
by pickle
matthijs wrote:Reading this makes me feel like when I bring in my car for repair to some car repair shop I don't know. You know, you explain your problem, they say "ok, give us the keys, thanks buy we call you when it's finished." I imagine these guys checking out the problem in the car, talking to each other. "O well, bugger that's a tough welding job. It's almost 16.45, I want to go home, let's just put some duct tape around it or something, that will hold a year or so. The owner won't notice."
And that is exactly what is happening here as well

I understand how you made that analogy but I have to disagree (and I'm more than aware I'm arguing the unpopular opinion

). Actually replacing a part on a car is physically stronger & more appropriate than using duct tape. Duct tape & a ...muffler for example... do
not have the same functionality and
cannot perform the same function. The discussion here is between two different sets of tags that (arguably)
can perform the same function.
The
only argument I've every heard as to why to use <div>s over <table>s is because "Tables are for tabular data...". I've never seen any SEO research that shows me that tables hurt search results. As for the semantic argument - while that's certainly valid - why is this:
Code: Select all
<table id = 'container'>
<tr>
<td id = 'top-left-shadow'>
</td>
<td id = 'top-stretch-shadow'>
</td>
<td id = 'top-right-shadow'>
</td>
</tr>
<tr>
<td id = 'left-shadow'>
</td>
<td id = 'content'>
Hello world!
</td>
<td id = 'right-shadow'>
</td>
</tr>
<tr>
<td id = 'bottom-left-shadow'>
</td>
<td id = 'bottom-stretch-shadow'>
</td>
<td id = 'bottom-right-shadow'>
</td>
</tr>
</table>
so much worse than this:
Code: Select all
<div id = 'container'>
<div id = 'top'>
<div id = 'top-left-shadow'>
</div>
<div id = 'top-stretch-shadow'>
</div>
<div id = 'top-right-shadow'>
</div>
</div>
<div id = 'middle'>
<div id = 'left-shadow'>
</div>
<div id = 'content'>
Hello world!
</div>
<div id = 'right-shadow'>
</div>
</div>
<div id = 'bottom'>
<div id = 'bottom-left-shadow'>
</div>
<div id = 'bottom-stretch-shadow'>
</div>
<div id = 'bottom-right-shadow'>
</div>
</div>
</div>
???
That's a real world example of a table based layout converted to a div based layout. That conversion was done by a friend of mine & fellow moderator here who knows more about CSS layouts than anyone else I know. So semantically, <div> based layouts (at least in this instance) are no worse than <div> based.