Help - Search - Members - Calendar
Full Version: Tables vs Divs
Best UK Forums > Entertainment > Technical Times
seraph
I couldn't think of a better title for this because I'm not Jesus.

Anyway, I assume you've all seen and built a table before, right?
A basic example is this:

CODE
HTML
<table style="border: 0px;" cellspacing="0px" cellpadding="0px">
<tr>
<td>
This is a table!
</td>
</tr>
</table>



Now, tables are very popular amongst many webmasters as they allow you to easily set up complex layouts without too much fuss and without using two markup languages as you only need HTML.
However, tables were never designed to make layouts, it's just that someone decided to use them for that.
Tables are actually designed to show data in a tabular form (like Microsoft Excell ™).
A new and growing group of web developers are revolting against tables though as they have discovered the true power of CSS.

CSS is a simple styling language that is used togather with HTML to provide good looking sites with minimal use of font tags, non-compliant properties such as backgrounds and a fair few other things.
CSS alone though cannot make websites as that's not it's purpose.
It can be used with (x)HTML DIV and SPAN tags to make sites though.
DIV and SPAN are two tags which allow you to easily work with content without tables (though it's not uncommon for them to be used with tables).
DIV is usually used for the main formatting of the site while SPAN tags are mainly used for things like text formatting.
An example of producing a similar result to the table above would be:

CODE
HTML
<div>This isn't using tables!</div>


See how little code it used, that's because this example is very simple and it doesn't require much (you don't need structuring tags at all for this really).
If you see a site stating that it uses a CSS layout, it probably means it uses alternatives to tables, like DIV's.

To show off a real difference, why don't we make a 2 column table and div example?
Here's our table:

CODE
HTML
<table style="border: 0px; width: 100%;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width: 50%; background-color: #999999;">
column 1.
</td>
<td style="width: 50%; background-color: #cccccc;">
column 2
</td>
</tr>
</table>


And here's our DIV:

CODE
HTML
<div class="column1">
column 1.
</div>
<div class="column2">
column 2.
</div>



Notice how the divs don't look right? We need CSS for this:

CODE
HTML
<style type="text/css" title="default" media="screen">
div.column1 { background-color: #999999; width: 50%; float: left; }
div.column2 { background-color: #cccccc; width: 50%; float: right; }
</style>


If you put that in your head section, it'll work.
The difference is that tables are static and bolted into place but divs aren't.
They start off doing little more than making a new line, but witth a little code, a div tag can be placed just about anywhere.
The real power in this kind of layout though is that unlike tables, divs can be moved through CSS, so if you've got a browser like Mozilla, you can have a skin system without scripting and which allows you to do simple colour changing that could be done with tables, or full on mods such as movinng bits of the layout around (doesn't work with explorer and such yet though).
I like using this system as I can build a skinning engine that modifies only a few things, the paths to a banner and a CSS file.
This means that the base code is safe even if the skin bombs out or is corrupt as none of the skin is HTML (HTML skins could be distrobuted with all sorts of nasties in them like javascript and pop-up's).
DIVs are by no means perfect though, they can be tricky to get to grips with and some things that don't change table width's, such as padding can change div sizes.
I've run out of things to type really, but I'm trying to get people to at least look into using this alternative to tables.
If you want to see a simple CSS only skinning method, look no further than this site
If you have anything you'd like to know, please ask and I'll see what I can do.
seraph
Anyone?
FBG
QUOTE (seraph @ Jan 12 2005, 07:37 PM)
Anyone?

tables (get a haircut)
COBALT_Blue
Most of my work has been with tables but recently its more with div and css along with php and MySQL. Customers are demanding more for their money and the latest sellers are W3C compliant content management systems such as Mambo or E107 which all you need to do is customise like a website and hand control over to the customer.

Things are very much moving towards everything being content management driven. There is quite a lot of information at my friends site about web stuff. I think its just a customer support forum.

http://www.Itrain.co.uk

Feel free to add anything useful and your own company names in the same format etc
seraph
QUOTE (COBALT_Blue @ Jan 12 2005, 09:08 PM)
Most of my work has been with tables but recently its more with div and css along with php and MySQL.

Correct. Although Tables are still used by many people (including myself in some of my designs) divs seem to be taking over.... but I think it will be a long time before tables aren't used anymore. Tables aren't actually supposed to be used for your design, they're for displaying tabular data, however most peole don't care about what tables were designed for; they just care what tables can do.

I am moving into php and mysql, but that's les of a design aspect. PHP and MySQL are used for backend programming, it's the css and html that displays the stuff.
Ludderz
Tables are the best biggrin.gif
seraph
QUOTE (Ludderz @ Jan 17 2005, 11:51 AM)
Tables are the best biggrin.gif

w00t. Another table meister.

Divs are alot better for complex layouts, and have much more fluidity when they are used properly.

Shame I'm not skilled enough sad.gif
Tenmen
Tables;......i can seat 6 people around mine.
seraph
QUOTE (Tenmen @ Jun 21 2005, 11:04 AM)
Tables;......i can seat 6 people around mine.

You're really funny. dry.gif
ciuboflo
divs rulz!

[advertise at search2.co.uk]
oVercrasH
look
tables and divs are very useful in web design
tabels if very simple and useful when u have one
but when u design professional pages u must use div.

CSS is powefull for designers cool.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.