Replace tables with div's

M

MielieSpoor

Expert Member
Joined
Dec 6, 2006
Messages
1,984
Reaction score
4
Location
Dublin
Ok, I know my way round windows forms and can pretty much anything in windows form that I want to do, but this does unfortunately not count for web applications.

At varsity I was taught to make use of table to position stuff on the page and it works but not the ideal as it results in a hell of a lot of coding.

I have seen people using div's instead and have read that it is 'better' to use div's instead of tables, but I have one problem - how??

When I make use of div's, they end up to be positioned from top to bottom and not all over the page as I want them to be.

How would I go about this?

Com'on all you web people...
 
What you really want is CSS positioning.

http://www.htmldog.com/guides/cssadvanced/layout/

There are many good articles available on the web.

Keep in mind that expecting to exactly port a table based design to CSS is unrealistic. Learn what is possible and design around that.

Edit: Here are some related resources. I will add more as I go through my old bookmarks:
http://www.glish.com/css/
 
Last edited:
MielieSpoor said:
Ok, I know my way round windows forms and can pretty much anything in windows form that I want to do, but this does unfortunately not count for web applications.

At varsity I was taught to make use of table to position stuff on the page and it works but not the ideal as it results in a hell of a lot of coding.

I have seen people using div's instead and have read that it is 'better' to use div's instead of tables, but I have one problem - how??

When I make use of div's, they end up to be positioned from top to bottom and not all over the page as I want them to be.

How would I go about this?

Com'on all you web people...
Click to expand...

look for "throwing tables out of the window"

maybe one of these might help ;)
Why you should convert to CSS ?
http://www.programimi.com/2007/08/18/why-you-should-convert-to-css/

Beginner's Guides
http://www.wpdfd.com/issues/70/css_from_the_ground_up/
http://www.sitepoint.com/article/html-css-beginners-guide

Throwing tables out of the window
http://www.stopdesign.com/articles/throwing_tables/

Still throwing tables
http://www.stopdesign.com/log/2005/07/27/still-throwing-tables.html

Examples of converting table layouts to CSS
http://www.maxdesign.com.au/presentation/open-publish/

Example of creating a CSS layout from scratch
http://www.subcide.com/tutorials/csslayout/index.aspx

CSS Basics
http://www.cssbasics.com/

CSS starting points
http://24ways.org/2005/css-layout-starting-points

CSS resource of tutorials, tips, galleries and much more
http://www.softwaredeveloper.com/features/designing-on-a-dime-060407/
Click to expand...


...here we go the one i was looking for
semaphore said:
http://developer.yahoo.com/yui/grids/
Click to expand...
 
Last edited:
The following CSS properties will become your new best friends (or worst enemies, depending on how well you get acquainted):
- float
- clear
- position

Depending on the complexity of the original table-based design, you should be able to achieve a near-100% conversion within a short period of time. I've had to convert table-based layouts to div/css based layouts (some of them my own :o) that took me a week or 2 to finish!
 
Last edited:
Can someone explain to me why tables are that bad? I'm not a web developer but every now and then I write the odd CGI script and I always use tables to do my layouts although I know my why around CSS. I can write an app with the same look and functionality in half the time then struggling to use CSS and have it look the same in both Firefox and IE.
 
dade said:
Can someone explain to me why tables are that bad? I'm not a web developer but every now and then I write the odd CGI script and I always use tables to do my layouts although I know my why around CSS. I can write an app with the same look and functionality in half the time then struggling to use CSS and have it look the same in both Firefox and IE.
Click to expand...

1. Tables are usually more bytes of markup. (Longer to download, and more bytes of traffic for the host.)
2. Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)
3. Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
4. Tables may require you to chop single, logical images into multiple ones. (This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
5. Tables break text copying on some browsers. (That's annoying to the user.)
6. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>). (They limit what you can actually do in terms of layout.)
7. Once you know CSS, table-based layouts usually take more time to implement. (A little effort up-front learning CSS pays off heavily in the end.)
8. Tables are semantically incorrect markup for layout. (They describe the presentation, not the content.)
9. Tables make life hell for those using screen readers. (Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
10. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS. (Have you seen CSS Zen Garden?)
 
CSS Zen Garden FTW! :p I'm still busy designing my own stylesheet for submission. But seriously, Kloon's reasons are spot-on. When you design a DIV/CSS-based layout, you can VERY easily do a complete redesign of the site within an hour and still charge the client heaps of money.
 
Try - Google for a stylesheet framework - Google has one, i use 960 - they can be a good starting point as well as an excellent way to learn
 
The advantage of DIV's is that by using CSS files, you can duplicate the same look-and-feel, by including one stylesheet throughout your site. With tables, you need to duplicate the same code in every page (if using static pages, but even with dynamic pages, the net result is multiple pages with the same table content).

If you really struggle, use a CMS like Drupal or Joomla to take care of your layouts.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X