cancel
Showing results for 
Search instead for 
Did you mean: 

CSS v tables

newinvention
Grafter
Posts: 139
Registered: 30-07-2007

CSS v tables

I've designed about a dozen simple websites for my family, friends and small businesses. It's merely a hobby for me and I've enjoyed doing them and they do the job fine. I've always used tables, but recently went on a brushup web design course where tables were said to be completely out of fashion and CSS the only way to go forward.
I'm sure my tutor said that before long browsers will not be able to even see websites made in tables  Sad
Now I know that CSS is what pro web designers use and maybe in time I'll learn the technology (we ended up doing a lot of html on the course, which is fine but I don't really want to spend my life looking at code). I know that CSS is meant to make sites more accessible, faster loading etc.
My questions are:
1) Is it true that the sites I've done so far (using tables) will become invisible or unworkable in modern browsers?
2) Do I have to redo them all - and how to you go about redoing sites for people who've paid you? I mean it's not their fault that the technology is outpacing my design!
3) It seems to be that CSS requires a lot more html tweaking than using tables - ie it does seem more technical. Is that true (NB, I'm not very technical)
4) Is it essential I do any future sites using CSS?
5) Any good and simple CSS resources/tutorials out on the web you'd recommend?
Anyway, any observations would be great. I don't really want to have to redo all my sites right now. Thanks all!
11 REPLIES
Community Veteran
Posts: 3,486
Registered: 02-10-2008

Re: CSS v tables

Well - CSS is certainly used by a large proportion of professionals and many amateurs like myself.
But tables will continue to be viewable in current and forseeable browsers - so no rush to move.
But having said that I would strongly suggest yo take the trouble to learn css layout - it's not that difficult .

Yes thare are lots of websites - which Google will quickly pull up, but I prefer good old fashioned books.
HTML,XHTML & CSS by Elizabeth Castro –
very comprehensive, readable and attractive book explains all  html and css code - ( or most at least )
http://www.cookwood.com/html6ed/contents/index.html
HTML Mastery - Semantics, Standards , and Styling by Paul Haine –
an excellent guide to how to really use html, including a comprehensive guide to styling tables used for data. and make it ueasy to alter with css
http://www.friendsofed.com/book.html?isbn=9781590597651
CSS Mastery - Advance Web Standards Solutions - by Andy Budd –
an excellent companion to HTML Mastery - which really guides you into using CSS correctly with valid code.
http://www.friendsofed.com/book.html?isbn=9781590596142
These two Mastery books compliment each other extremely well.
CSS - The Definitive Guide - by Eric Meyer - an excellent reference - perhaps a little more difficult style to read - but clearly the author is one of the top experts on CSS.
http://oreilly.com/catalog/9780596527334/index.html
newinvention
Grafter
Posts: 139
Registered: 30-07-2007

Re: CSS v tables

Hi Mal - phew, what a relief - thanks!
Thanks too for the references. They look very useful. Much appreciated.
Cliff_Jordan
Grafter
Posts: 228
Registered: 01-08-2007

Re: CSS v tables

...or online
http://www.w3schools.com/css/default.asp
I found quite informative
Cliff
Community Veteran
Posts: 1,576
Thanks: 3
Registered: 13-04-2007

Re: CSS v tables

There are a fair few programs around that will do the job for you. You give it the old page and bang it changes all the old tables for you.
Community Veteran
Posts: 3,486
Registered: 02-10-2008

Re: CSS v tables

Yes but how good and reliable is the code they generate ? -
those I've seen produce horrendous code .
Although I've used Dreamweaver for years now - I think it is far far better to put in the effort to learn the code . That way when the inevitable problem arises you can sort out what is causing the problem.
thejudge
Grafter
Posts: 575
Thanks: 1
Registered: 01-08-2007

Re: CSS v tables

Learning the rudiments of CSS isn't difficult  - even I managed it!
My site was based on tables until a couple of years or so ago, and I switched it to CSS for ease of updating.
One thing you'll need to be aware of is that different browsers render CSS in slightly different ways. For this reason, you may need more than one stylesheet (or set of stylesheets) to handle Firefox and Internet Explorer.
If you look at mine at http://www.thejudge.me.uk/style_main.css and http://www.thejudge.me.uk/style_main_ie.css, you'll see what I mean.
You then have to code your pages to select a different stylesheet depending on the browser, but that's not too difficult.
Community Veteran
Posts: 3,486
Registered: 02-10-2008

Re: CSS v tables

The Judge is right - but it is important to design the pages using a compliant browser such as Firefox / Opera / Safari - but testing that IE still renders ok.
I only have a very small amount of css specifically for IE and it is linked with tis conditional code
<!--[if lt IE 7]>
<link href="/css/main_ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]--> <!-- if less than IE7 - i.e. IE6,5 etc -->
decomplexity
Rising Star
Posts: 493
Thanks: 26
Registered: 30-07-2007

Re: CSS v tables

Hmmmm...
It isn't an all-or-nothing decision though.
It may be heresy but tables do have a legitimate use. Whereas you can if you try hard enough replicate most table structures with <div>s and CSS markup, the rows and columns structure of a table allows packages such as Dreamweaver to present (in Design  mode) a table for updating with shorthand ways to add rows, delete a column and so on. It knows it's a table. The generalised nature of CSS does not allow this.
But you should use CSS to mark up a table instead of using table-specific HTML.
A trivial real example: see http://www.cottesmore-hunt.co.uk/chscshop.html
The two central columns (which cannot be rows of a  single table since the cell heights are variable) are two single column fixed-width  tables held in place centrally by an outer 'container' <div> whose width varies with the screen 'width' .  The LH and RH tables float left and right (i.e. stick to the outer boundary of the container).  The pictures themselves float right in the LH column and left in the RH column so that the text bubbles up alongside the pictures.  Try dragging left the RH side of the window and see how free space is managed by the browser. Everything apart from the two table definitions is managed via CSS.
However, the predecessor to this page didn't use tables: the rows and columns were managed entirely by <div>s. It worked, but was a real pain  to add or delete items: an updatable table display (from Dreamweaver and many other HTML packages) has a lot to commend it!!
Zen from May 17. PN Business account from 2004 - 2017
Community Veteran
Posts: 3,486
Registered: 02-10-2008

Re: CSS v tables

Of course - I still use a fair number of tables - for tabular data - or perhaps for similar structures.
But totally agree that tables should be just have <thead><tfoot>, <tbody>, <caption> tages etc and use minimal other mark up and even classes with in them and control the lot with descendant CSS selectors
DarrenB1707
Newbie
Posts: 4
Registered: 08-07-2009

Re: CSS v tables

I work as a web developer by day and I would encourage everyone serious about doing websites to take the time to learn CSS.  Once you get your head round it, it can be very powerful and the layouts achievable with CSS are often impossible to achieve using tables.
Another reason to use CSS (especially if designing sites for profit) is the implications of who will be viewing the site.  With the passing of the Disability Discrimination Act, accessibility is something that all commercial websites have to be aware of.  Screen readers can often stumble over complex nested table designs.  The context is also difficult for a visually impaired person to pick up when tables are used for layout.  Tables should be for tabular data only.
With the plethora of new internet enabled devices coming on the maket (smartphones etc), it is also important to know that your site will look basically the same no matter what its viewed on.
Another very good resource for the OP is www.sitepoint.com. ; Their books are very good too.  Hope this is helpful.  Grin
mentalist3d
Grafter
Posts: 371
Registered: 20-08-2009

Re: CSS v tables

I went from HTML to CSS a few years ago and although you have to sit and learn, it isn't to hard, and once its done if ever a client needs their site visually updated it can be done usually just in the CSS sheet, so you dont usually have to recode a load of pages, brilliant time saver. It also allows you to be more creative and experimental with your layout and design more.
The easiest way to learn for me was to download free css templates and muck about with the CSS code to see what changes it made, code I couldn't understand I would learn online, as there is loads of resources for free.
A good place to start is:
http://www.free-css.com/free-css-templates/page1.php
http://www.free-css-templates.com/
muck around, have fun and learn something on the way Smiley