View Full Version : Tables vs. Divs — The Comeback.

04-09-2009, 10:58 AM
hi, all.

smashing magazine has posted what appears to be an interesting article.


Check it out!

04-09-2009, 01:00 PM
I don't think the article is "tables vs divs". It's the problems of both but there is no worthy discussion for tables for layout.

04-09-2009, 01:00 PM
Thanks for the link, nice post.

04-09-2009, 02:24 PM
Along the lines of that article, I've been redoing a standard contact form that I keep around. Would just like to know people's opinions of whether or not it's semantic enough.

Is it wrong to be using classes such as "pad20". They serve no other purpose but to move it to the left, and without tables I find the padding necessary to get everything lined up the way I want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
#content {
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
#contact_form {
#contact_form li {
.greeting {
.greeting li {
.alignTop {
.pad43 {
.pad45 {
.pad3 {
.pad105 {
.padtop10 {
br {
<div id="content">
<form method="post" action="gdform.php">
<p>Please use this form to contact us</p>
<ul id="contact_form">
<li class="pad105">
<ul class="greeting">
<input name="title" type="radio" value="mr" />
<label for="title">Mr.</label>
<input name="title" type="radio" value="mrs" />
<label for="title">Mrs.</label>
<input name="title" type="radio" value="ms" />
<label for="title">Ms.</label>
<br />
<li class="pad43">
<label class="alignTop">Name:</label>
<input name="name" type="text" id="namefield" size="42" maxlength="50" />
<li class="pad45">
<label class="alignTop">Email:</label>
<input name="email" type="text" id="emailfield" size="42" maxlength="50" />
<li class="pad3">
<label class="alignTop"> Comments:</label>
<textarea name="comment" cols="32" rows="5" id="commentfield"></textarea>
<label class="alignTop">Concerning:</label>
<select name="concerning" id="concerning">
<option value="gen_info" selected="selected">More Information</option>
<option value="prices">Pricing</option>
<option value="delivery">Delivery</option>
<option value="pastorder">Past Order</option>
<option value="other">Other</option>
<li class="padtop10">
<label>May we contact you?</label>
<input name="contact" type="checkbox" id="contact" value="yes" checked="checked" />
<input name="submit" type="submit" id="submit" value="Send" />
<input name="reset" type="reset" id="reset" value="Clear" />
<input type="hidden" name="redirect" value="thankyou.html" />
<input type="hidden" name="subject" value="Form Submission from Website" />

I'd welcome any opinions on what to change.


04-09-2009, 02:30 PM
Nice link
There are well documented issues with table based layouts, but the problems with nested divs have not been well documented in the past. Nested Divs are often used to make rounded corners and drop shadow effects, this is nearly as bad as using a table layout.

Spent 6 hrs the other day overriding the default output of one of the open source Content Management Systems as it was full of nested divs.

CSS3 (http://www.css3.info) provides mechanisms to do drop shadows rounded corners and other cool effects, and degrades gracefully for less capable browsers. It also means that the HMTL has less gunf (no need for nested Divs), meaning faster downloads, better SEO, and less load on the servers

04-09-2009, 02:59 PM
Fisher: you can save 20 lines of code by losing the ul and li tags, and using br's or hr's to seperate logical sections of the from.
Moving the CSS to a seperate file will allow for better reuse. changing the css for .alignTop to the following will help with layout

.alignTop {

its not incorrect to use the class attribute to style your css, but "pad20" has no meaning to anyone but yourself, perhaps use more meaningful class names such as "contact_details"

04-09-2009, 03:29 PM
CSS3 (http://www.css3.info) provides mechanisms to do drop shadows rounded corners and other cool effects, and degrades gracefully for less capable browsers.

So, CSS3, eh? A specification that’s not even official and will take aeons to be implemented properly in the major browsers. :rolleyes:
The other problem is that “degrades gracefully” isn’t an option for most clients, employers, or web designers. They want the website to look the way it was designed and don’t care for specifications or good practice.

Fisher, semantic code includes using meaningful class names and IDs and a class or ID that represents the look of an element in its name is not semantic. For example what happens if you change your design (take the CSS Zen Garden (http://csszengarden.com) as example) and your element with class “pad20” or “alignTop” doesn’t have any padding of 20px or top alignment anymore? What do these classes say about the element then? Not even an ID of “sidebar” is very semantic because what you have planned as sidebar initially doesn’t have to be a sidebar forever.

The correct approach is to give elements classes and IDs that represent their function, their purpose in the document, for example “content”, “info”, or “section”. If the function isn’t clear st first or it can have different meanings, some more generic class names are appropriate such as “section1” or “subsection2”. And you can use the same class names for elements inside #content as you can for elements inside #info since you can still style them differently with CSS: #content .section {…}, or #info .section {…}, respectively. Sometimes less is more and you don’t need a class because you might be able to use a parent element selector or whatever.

04-09-2009, 09:37 PM
So, CSS3, eh? A specification that’s not even official and will take aeons to be implemented properly in the major browsers.Except for all the css3 properties that are available in the modern browsers right now (not IE).

04-10-2009, 05:01 PM
Just of curiosity, what are your opinions on using 'empty' divs for design purposes (like applying images as background-images to those certain divs, etc, to archieve a certain design)?

04-10-2009, 10:55 PM
I’ve made my point just earlier today in this thread (http://codingforums.com/showthread.php?t=163558). Most of the time if you write semantic HTML then you won’t even need additional empty elements since you can just use what you’ve got. There are a few exceptions, of course (talk about scalable rounded corners) but generally that’s the way I think and I haven’t been wrong with it so far.