<table> or <div>: Which is the better layout met

JavaScript and client side scripting.

Moderator: General Moderators

<table> or <div>?

<table>
0
No votes
<div>
10
100%
 
Total votes: 10

smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

<table> or <div>: Which is the better layout met

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

Neither. Semantic markup is the way to go =P
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Re: <table> or <div>: Which is the better layout

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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. :P
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post 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.
(#10850)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post 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) :)
smudge
Forum Contributor
Posts: 151
Joined: Sun May 20, 2007 12:13 pm

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
The Phoenix
Forum Contributor
Posts: 294
Joined: Fri Oct 06, 2006 8:12 pm

Post by The Phoenix »

If its tabular data, use a table.

If its for layout, use div's.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 :x
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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 :x
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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply