CSS v tables
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Other forums
- :
- Tech Help - Software/Hardware etc
- :
- Re: CSS v tables
CSS v tables
05-06-2009 8:29 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
I'm sure my tutor said that before long browsers will not be able to even see websites made in tables
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!
Re: CSS v tables
05-06-2009 9:05 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
Re: CSS v tables
05-06-2009 9:31 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Thanks too for the references. They look very useful. Much appreciated.
Re: CSS v tables
05-06-2009 11:17 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Re: CSS v tables
06-06-2009 1:15 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Re: CSS v tables
06-06-2009 12:00 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: CSS v tables
06-06-2009 10:10 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: CSS v tables
07-06-2009 9:34 AM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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 -->
Re: CSS v tables
27-06-2009 1:54 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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!!
Re: CSS v tables
27-06-2009 8:00 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
Re: CSS v tables
08-07-2009 9:25 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: CSS v tables
20-08-2009 10:19 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page