I still love tables, but...

Griff · Mar 7th, 2008, 18:34

I still love tables, but I know I gotta use CSS. Maybe I should have posted this in the CSS forum...

Anyways!

I've been making websites for a long time now, but the last three years I've been studying a graphic design course and haven't really been doing much web design. Now that I'm back into it I see that my method of using tables galore is foolish and CSS can do it much better.

But I don't understand exactly how. I've used CSS a lot in the past, as a separate .css file to contain code like non tiling images, my text rollovers, basic stuff.

I'm re-designing my website (I've made the layout in Photoshop), and I figure this is the best thing to do > use CSS as much as possible and tables as little as possible. But I don't know where or how to start, and I feel I need convincing that CSS can actually do a better job at this than tables...

So, any suggestions or comments anyone?

Corey Bryant · Mar 7th, 2008, 19:35

CSS tutorials will help start you out. CSS Zen Garden should move you a long a bit better. My roommate bought this book from Zen Garden since it seemed to help him along in building a website using CSS

You might just take a look at a few of the CSS layouts on a few of the websites (Google 3-column CSS layout, 2 column CSS layout) and you will see a few website listed.

delusion · Mar 7th, 2008, 20:06

CSS makes smaller code, therefore it improves loading-speeds. CSS is flexible opposed to tables. Change the witdh of a table and the whole layout of your site is messed.
CSS is a lot easier to edit. When you've made the html and wat to make changes, simply edit the css-file, instead of changing every page of your tables-site..
Need I go on?

saltedm8 · Mar 8th, 2008, 00:13

hows this for some very good reasons

I.Tables are usually more bytes of mark-up. (Longer to download, and more bytes of traffic for the host.)

II.Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)

III.Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)

IV.Tables may require you to chop single, logical images into multiple ones. (This makes redesigns very hard, and also increases page load time [more http requests and more total bytes].)

V.Tables break text copying on some browsers. (That's annoying to the user.)

VI.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.)

VII.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.)

VIII.Tables are semantically incorrect mark-up for layout. (They describe the presentation, not the content.)

IX.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.)

X.Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.

Griff · Mar 8th, 2008, 01:21

Alright, so I guess I have a bit of reading to do...

In the meantime, this is the last website I made, and of course it's loaded with tables:

http://www.lightcycle.com.au

So what would the best way have been to built this site / design with CSS more prominent?

Here's a screenshot of how I assembled it using tables:

http://www.griffdesign.com/misc/screenshot.jpg

saltedm8 · Mar 8th, 2008, 01:27

CSS is ALWAYS better than tables, tables were never made to create whole web templates, they were made for 'tables' of information...

believe it or not, css is pretty easy once you get the basics down, i only took a few weeks to learn the basics when i started, have a good look around the internet and if you have any questions we will be happy to help you.

delusion · Mar 8th, 2008, 05:32

Quote:

Originally Posted by Griff

Alright, so I guess I have a bit of reading to do...

In the meantime, this is the last website I made, and of course it's loaded with tables:

http://www.lightcycle.com.au

So what would the best way have been to built this site / design with CSS more prominent?

Here's a screenshot of how I assembled it using tables:

http://www.griffdesign.com/misc/screenshot.jpg

You have a lot of empty cells in your design. Those still have to be loaded by the browser, so it's useless data. In CSS you could've just set a margin, which is waaaay smaller code..

Griff · Mar 8th, 2008, 07:40

From purely a design sense, I only concerned myself with empty cells over a certain pixel size (10 or so) cos they didn't resize themselves... But I know this is somewhat off topic...

Griff · Mar 9th, 2008, 01:40

If it's easy to tell from a quick glance at that website I did (www.lightcycle.com.au), how many tables do you guys think I could have used if I was using a more prominent CSS construction? I'm just trying to understand how I COULD have gone about constructing the site.

Is there a chance the way I went about it was fine? Thing is I used an awful lot of tables... Would it be possible to construct without ANY tables?

saltedm8 · Mar 9th, 2008, 09:42

from the looks of your site you do not need tables at all, it should have been completely css

Griff · Mar 9th, 2008, 12:31

Far out!

Thanks! : )

pagerss · Mar 9th, 2008, 12:48

For little sites Griff you may use some tables. You will agree that only css design is not for everybody and in other hand often you must think for different browser compatible. It haven't any argument against css design except above i think. It is better design for conclusion, but table design is not for garbage yet

saltedm8 · Mar 9th, 2008, 18:19

Quote:

Originally Posted by pagerss

For little sites Griff you may use some tables. You will agree that only css design is not for everybody and in other hand often you must think for different browser compatible. It haven't any argument against css design except above i think. It is better design for conclusion, but table design is not for garbage yet

wanna bet ? - tables were never meant for design, css, if you are offering a professional service or want any sort of result from your website is an absolute MUST

tables are dead, along with those silly gimmics that go with them, ( things that follow your mouse, or sparkles etc )

welcome to the real world of web design pagerss

Griff · Mar 10th, 2008, 01:43

Would my above website (www.lightcycle.com.au) require a lot of complex CSS to get the same effect without using tables? Or would it be mostly basic CSS stuff?

pagerss · Mar 10th, 2008, 06:49

Ok saltedm8,

You win

would you explain to Griff how to make his page without table. Actually i also use only css, as you can see. May be is good idea to add that is better also design to be certificate with w3.org. I mean css + html. There are a couple of recommendation for cool web2.0 design. Griff if you are interested you can contact me pm and i will try to help you

Regards reader

saltedm8 · Mar 10th, 2008, 16:15

its better for him to try and then ask questions when he gets stuck, you learn faster that way, you can however look at these http://layouts.ironmyers.com/ to get you off on the right foot

Griff · Mar 12th, 2008, 06:46

Thanks guys. I have been at a few of the links posted here, but I think I will buy a book on CSS and continue to post on the thread/s when I get stuck.

Thanks again. : )

donovan · Mar 12th, 2008, 11:17

hey man, Im also pretty new to CSS and I have found it to be a great asset to my designs and will never go back to tables for page layout.
One of the first books I read about CSS was "CSS - The missing manual"
I found it to be really helpful and easy, especially for a first-timer.

hugepixels · Mar 13th, 2008, 04:57

i'm also in a process of learning the CSS which is really most common to many websites nowadays. many are concerns with the speed of their websites and this is why many programmers are using CSS but the main questions is, why some websites load in slowly. it is the codes, images, server or the connection. most of the time in my observation are the images. the table do not contribute much with the speed of the website. code load faster than the image. try optimizing your images and cache them immediately on users pc. when it comes to the codes use CSS for your "font color, size, links, body etc". reduce your codes one at a time until you master the CSS.