Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

CSS vs Tables


  • Please log in to reply
44 replies to this topic

#1 SlipStream

SlipStream

    Whirl Wind Member

  • Members
  • 77 posts

Posted 25 April 2006 - 04:44 PM

I've been researching a ton and finding a lot of contradictory tutorials as to; which is better than this, that's better than these and don't use this use that. Quandry? that's an understatement! I now recognize that xhtml is the way to go as I have a basic understanding of its predecessor. The latest target practice is tables vs CSS. I have been checking the source on quite a few sites and I see that tables are in use everywhere. However, not being well versed in CSS, I am not sure if these are tables as I learned years ago in HTML, or, if they're CSS using table elements and attributes. What is the proper structure for a table, so to speak, in CSS? Maybe one of you can illuminate this for me. And, for a person just starting to get back into this, am I correct that xhtml is the best way to go with my limited knowledge. I would hate to spend another week practicing web page construction only to find that the sun is coming up from the south, not the east.

#2 Wit

Wit

    Sonic Boom Member

  • 1000 Post Club
  • 1599 posts

Posted 25 April 2006 - 05:42 PM

For SEO, it doesn't really matter (yet) if you use tables or css (or xhtml or html for that matter).

With tables it's easier to make dynamically resizing columns and stuff, but css-only code (using divs) is often cleaner and easier to maintain. Often, that code is a bit more compact (and the css file can be separate and cached so it doesn't have to be reloaded every time).

Same with xhtml. It has no direct SEO advantages over classic html, but the stricter your language of choice, the less likely you'll make a coding error that can choke some bots. A page does not NEED to be "valid" code, but you should at least TRY to validate it, to see if there's something terribly wrong with it....

#3 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 25 April 2006 - 07:11 PM

Howdy SlipStream, nice ta meetcha !

Since you seem to have had a gut full of theories allow me to use a simple analogy which I hope will serve to clarify some of the key concepts involved in the whole html / xhtml /css malarkey

Pretend you are a greengrocer and you sell apples, pears, and oranges.
You could simply chuck them all on a table in a disorganised mess, and save yourself some time. However this would not be appealing or convenient to your potential customers, for obvious reasons.

In reality you would separate the apples, pears, and oranges into separate boxes or containers. You might want to use different coloured containers of differing sizes to display your wares to the best effect.

Using my analogy
- The fruit is your content
- You use the html or xhtml to create your boxes or containers
- You would use CSS to specify how the containers would be presented, eg colour size, background image etc.

There is no debate on css v tables

To use my analogy, it’s about the type of containers you display your apples, pears and pears in, eg tables or divs

Don’t worry about the leap from html to xhtml; since you are familiar with html you just need to be aware of the differences. You can check out the differences here:

http://www.w3schools.../xhtml_html.asp

Hope this helps,
TreV

#4 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 25 April 2006 - 08:02 PM

I have to disagree that CSS doesn't help SEO.
The code is cleaner and it makes crawling your site easier and puts the content higher in the page, which search engines value, as far as I know.

Most importantly, CSS helps you and your visitors.
CSS makes it possible to design user-friendly websites that load fast and are easy to maintain.

Here is a brief shot at why one needs to use CSS (there also is a link to how one can convert his site from tables to CSS, too)

As far as using tables and CSS together.
Clearly, you can move inline styles (<table align=right bgcolor=#ffffff>) to an external CSS style sheet (text-align:right;background:#fff;). This will reduce the webpage site a lot and will make it easy for you to adjust the site appearance. As it was said earlier, a website on CSS is much easier to edit just because the inside structure is much leaner.

Here is an example of how a properly structured table with CSS may look like:
<style>
.maintable {border:1px solid black;}
.row1 {background:#6cf;}
.row2 {background: #90f;}
.row1, .row2 {text-align:center;}
</style>

<table class="maintable">
<tr class="row1">
<td>John has</td>
<td>5 apples</td>
</tr>
<tr class="row2">
<td>Jane has</td>
<td>3 oranges</td>
</tr>
</table>

Disclaimer: this table lacks tags that are important for accessibility, like <caption>, <th>, etc. Just showing how tables are used with CSS here.

By the way. There is no debate 'tables vs CSS'. It is a matter of education, knowledge and skill. Of course there are sites that are on tables - they were designed years ago. Some of them may have been designed recently by designers who don't know how to write CSS. Of course, tables are to be used for tabular data (charts, etc) but not for the layout.

Edited by A.N.Onym, 25 April 2006 - 08:09 PM.


#5 stinhambo

stinhambo

    Gravity Master Member

  • Members
  • 142 posts

Posted 26 April 2006 - 06:44 AM

Oh CSS all the way. The only reason you see a lot of sites built with tables is either because the developers are too lazy to learn or (and this is most likely) the cost and time to retrain their staff is too high.

Learn CSS and you will be future proofing your skills.

#6 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 26 April 2006 - 07:07 AM

I don't think that "CSS vs tables" is the right path for discussion. CSS and tables are by no means exclusive! What needs to be looked at is the semantics of HTML code. That is, what the code you are using says about the content it surrounds.

A table says to a parser that "the data here is tabular data". This means that it is expected to have columns and rows, with a specific relationship between the data in the columns and the data in rows. When tables are used to design a site ("Layout tables") that correspondence between the meaning of the tag and its content is lost.

CSS is purely a design language - it has no bearing in and of itself on the meaning of the code it is effecting. But the choice of tags to surround your content should be given thought. If you consistently use "blockquote" to surround quoted blocks of text, for example, you can be confident that non-visual browsers can identify this as a quote (if necessary or relevant) and also that you can change the style of the blockquote without accidently changing some completely unrelated piece of the site where you just happened to use a blockquote. The same is true of tables or any other semantically designed code.

HTML should be used for the structure of the site, CSS for design. Tables, although perfectly valid for structuring tabular data, should not be used for design.

#7 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 26 April 2006 - 07:58 AM

Right, I'm typing this before reading the previous replies, so apologies if I go over something already mentioned :)

CSS Vs Tables.

What this is actually about, is positioning elements like <div>'s with CSS, or using tables for structure.

The tables re the same tables you learnt in HTML years ago, they haven't changed one bit.
CSS layout doesn't generally use tables, 'pure' CSS sites will use <Div>'s and things as the main containers, positioned and styled with CSS.
You do get a lot of 'hybrid' sites though, using an overall table or 2 for the main structure, possibly with CSS being applied to them for main styles, sometimes some HTML code for overall structure, then everything inside those couple of tables is styled and positioned with CSS.

An example of a hybrid I coded recently is http://blog.pcplus.co.uk
The template had to be relatively flexible, as it's to be used on other sites too, in this case, I decided to use one overall table for the main structure for consistancy, then all internal areas are styled with CSS.

Technically, using tables for layout is wrong, it's not what they were meant for, but lacking workable ways of creating anything other than a very plain design, they got used for laying pages in the grid like frameworks.

They work.

To a degree....

Most sites currenlty use tables, regardless of what any CSS advocate might say about CSS gaining popularity (and it is), tables are still far and away the most used method of page structure.

There are problems with both CSS layouts and table layouts. A badly coded CSS layout is not better than a well coded tbale layout. Argueably, a well coded CSS layout, is better than a well coded table layout though. Why? well, lets analyse the problems with tables...

Usually(bearing in mind how table sites are often coded, compared to a generally well coded CSS layout), table are more trouble to maintain and make alterations later on. They are generally less flexible, less accessible, and cause more code bloat.

I am not joking when I say I've striped out tables from code and turned 400 lines of into 40 by doing it with CSS.

I've been doing alterations to some older sites recently and I'm finding filtering through the table code a bit of a nightmare at times. On the other hand, I helped code a site at the start of the year, which we did in all CSS (not as nice SS as I would've liked...) and going back and making changes to that has been a lot easier.
Someone could argue that as I was involved in the build, I was just more familiar with the code :) I think there's more to it though ;)

The thing with learning CSS is, and I see from elsewhere you've already picked up on it, is that you need to pretty much unlearn the HTML table approach, and look at it from a completely different point of view.
I've been doing that for a few years now, so it's become fairly 2nd nature, believe me, when you get used to it, it's a hell of a lot easier.

You have to forget how you might achieve soemthing in tables, and do it differently. I think a lot of peoples problems and frustrations with CSS invovle them trying to do exactly what they do in tables, in CSS. It just doesn't work like that.

On the side, I tend to think that learnign CSS and coding that way encourages better coding. Tables for layout is a hack in it's very essence, it gets the job done, that's about all.

Some people still argue CSS support is not good enough in browsers to rely on it.

That's rubbish. There is a hell of a lot you can do with CSS now in the real world, and has been for a few years. Yeah there are some fructrations, beware of implimenting lots of CSS hacks to get round quirks, as we've seen with IE7, they can come back and bite you in the donkey. there are going to be some hacks that people have used that will break in IE7. If you can avoid using hacks, all the better.

I'd certainly recommend you get to grips with CSS.
You'll end up with less code, that is lighter in terms of bandwidth, is easier to come back and update later, and is generally more accessible and performs better across different browsing devices.

#8 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 26 April 2006 - 04:01 PM

xhtml + css.

thats how i do all my sites.

#9 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 26 April 2006 - 04:12 PM

I think Slipstream was after some reasoning, rather than a simple vote eron....

#10 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 26 April 2006 - 04:24 PM

Adrian,

Maybe like you, eron19 simply, typed his reply without reading the contributions of others.

Sorry but I thought that was rude, and I am glad you apologised, and yes you did repeat a lot of stuff.

TreV

#11 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 26 April 2006 - 04:29 PM

use xhtml + css....

it promotes seperation of content and design...and plus...its xml compatible...

its newer and cleaner...

a table is for laying out tabular data....not for formating a web site.

ever seen a css web site with the styles off? well usually it lays out real nice...and is very readable. can you do that with your tables? i dont think so.

trust me when i tell ya...css+xhtml is the only way to go. thats why...like i said...i use it for all my sites.

Edited by eron19, 26 April 2006 - 04:30 PM.


#12 DaveChild

DaveChild

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3446 posts

Posted 26 April 2006 - 06:02 PM

CSS vs Tables ... ahh, the old argument.

Look at it like this. One technique involves building a house, using bricks for the outside, tiles for the roof, glass for the windows and paint to decorate. The other technique involves using mud and straw for everything. Both create a house of sorts, but one technique is going to create something more stable and sustainable.

What you've started with is a misunderstanding however, and that's what needs addressing first. You can't build a website "in css". It doesn't work like that. CSS is decorative - styling only. It's coats of paint, fancy trinkets and nice paintings. The question you are asking is - semantic markup vs hacked markup. Do you want to use the right material for the right job, or use the same material for everything. Use tables and font tags and next time you need to rebuild you'll need to tear everything down and start again. Building a site using HTML properly, and using CSS to style it, will give you great control and power, and will give structural meaning to the parts of your site.

As far as SEO goes - one technique or the other isn't going to get you to a top spot for a competitive keyword. Using HTML properly might just help a spider make more sense of your site, and that may help your positioning slightly, but the benefits in terms of accessibility and maintenance costs are far more important.

#13 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 27 April 2006 - 04:56 AM

Sorry but I thought that was rude, and I am glad you apologised, and yes you did repeat a lot of stuff.


I didn't have time during in my lunch break to read all the responses and then think about repsonding to Slipstream's intial questions, and addressing the resposnes, as it was I only just fit it in. And having gone over this topic many times before, I find it a lot easier to just state my case, and sum up the things I've learnt as a whole.
Skimming over the thread now, there's quite a lot I expanded on and explained in more detail, though from the sounds of it, you feel I added about as much value as eron's 1st posts.....

Coming back to the SEO aspect of using CSS, and whether it is of benefit or not....

Personally I don't think that a page built using CSS for positioning is any better than one built with tables generally. If you've got sloppy table code that is invalid, it could be possible that code is parsed incorrectly, but that's about it. The same could happen if you have badly coded div's all nciely styled in CSS....

If you use table layouts relatively semantically (I tend to think of semantics as using the right tag for the right job, so using tables for layout is never very semantic) by using hx tags well etc... then you could out perform a site positioned with CSS that's using CSS styles to make normal text look like headings (i.e. no using hx tags).

Let me repeat something I've said many times before, CSS positioned sites can be coded badly.
CSS positioned sites do not necessarily have good code that is better than something done in tables.

When people talk about advantages of CSS in SEO terms, they tend to say things like less/cleaner code, ability to have content first in a page, and other arguements that are mroe about HTML semantics than CSS.

Less/cleaner code: I just don't see that this makes much of a difference. The SE's will strip out a lot of if the HTML anyway. It may mean they can parse the code a bit quicker, but that has no bearing on whether your page is more relevant for a query or not.

The quality of the underlying code has no bearing on how relevant the content is to a particular query. As long as the engines can parse it and read it, it likely doesn't make much difference.

Ability to have content first in the code:
I'm still not convinced this has much bearing, I've seen a lot of comments about it, and if someone can point me to some proper tests and their results supporting it, I'll go along with it, but I've not seen it. I tend to think this is one of those SEO myths, something that sounds good, and makes acertain amount of sense, but perhaps isn't actually in effect.

Other arguements more about semantics:
People who get into using CSS fully, also tend to start looking into writing more semantic code in my experience. More semantic CAN have an effect, if code was previously fairly unsemantic.

That is, if before you weren't using things like h tags, and you change the code to start using things like that, it could well have an effect (how much is up for debate). But that's little to do with moving from tables for layout, to CSS for layout.

#14 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9019 posts

Posted 27 April 2006 - 07:51 AM

Just picking up the XHTML side of the equation, I would thoroughly recommend going for coding according to XHTML Strict. I wish I did. :) However I now have a legacy of web pages that validate according to HTML 4.01 Transitional. It would be quite a spring-cleaning job to make all the changes.

One reason why I'm so emphatic is that I think Microsoft is now smelling the coffee. IE version 7 now in Beta renders XHMTL Strict according to standards. That we can all understand. Everything else will be rendered in the IE Quirks mode. What that is precisely probably noone knows in its entirety, although a few Microsoft types may be pretty good at that. The IE Quirks mode is what you've been trying to fit in the past. So your web pages will probably look the same. How long that will last is anyone's guess.

#15 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 27 April 2006 - 08:00 AM

I've not seen anything about IE7 and quriks mode specifically, but I thought they only went into quirks mode if you didn't have a full and valid DTD? Irrespective of what DTD that is.

I don't even use XHTML1.0 strict much. And besides which, I don't think IE7 is going to support serving XHTML as application/xml still? SO part of the reason for using XHTML is out of the window anyway....

#16 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9019 posts

Posted 27 April 2006 - 08:30 AM

You may be right, Adrian. I thought I had read recently what I wrote but the best I can find from the IEBlog is the following:

To find a balance we introduced a strict mode in IE6 that lets authors opt in into the more standards compliant rendering (and, if you’re putting in a modern DOCTYPE declaration, you’re being opted in automatically). Pages authored under non-strict mode (or “quirks mode”) will not change behavior in IE7 – so the fixes we’ve done to be more CSS compliant won’t appear under quirks mode.

I'm not clear whether that only means that Strict versions of standards will be applied or that they will strictly handle even Transitional standards. Does anyone else have any more precision on this?

#17 DaveChild

DaveChild

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 3446 posts

Posted 27 April 2006 - 08:42 AM

By "Strict", they mean simply adhering to standards and using a DTD, rather than "STRICT" as in DOCTYPEs. Transitional with a proper DTD, for the purposes of the above, comes under the strict heading.

#18 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9019 posts

Posted 27 April 2006 - 09:11 AM

Thanks, ILJD, that's a relief - I think. :)

#19 bearmugs

bearmugs

    Mach 1 Member

  • Members
  • 261 posts

Posted 27 April 2006 - 09:54 AM

Pretend you are a greengrocer and you sell apples, pears, and oranges.


I'm shocked that TreV would discriminate this way. LOL
To mention apples, and not Windoze is pretty naughty.
Of course, it should go as follows.

Pretend you are a greengrocer and you sell apples, pears, oranges, and Windows.
You put all the stuff at the back of the room, reduce the price on the windows to an affordable price, and set them up so people trip over them when they walk in. "YOU BROKE IT YOU BOUGHT IT" policy is prominently displayed however, and the apples rot away at the back of the store. And by the way, did you notice this "greengrocer" doesn't sell anything green. The green reference is to money.


The way I see it anyway.
John EH!

Edited by bearmugs, 27 April 2006 - 09:57 AM.


#20 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 27 April 2006 - 11:37 AM

Oops Sorry Adrian !
I usually start off by writing down my true reactions and thoughts, then "tone them down" before posting. I made the mistake of hitting the Add reply button; instead of the preview post button, then I was too tired to edit my post, no offence intended.

I'm shocked that TreV would discriminate this way. LOL

I often discriminate against Chaff and Goats, in favour Wheat and Sheep. Thanks for your comments bearmugs :D

TreV

#21 Tangaroa

Tangaroa

    Light Speed Member

  • Members
  • 513 posts

Posted 27 April 2006 - 04:11 PM

just to reply to the initial question. CSS vs tables.

Well when I started creating websites as a hobby I learned HTML myself and in those days tables were the only thing I knew I could use to position object within a page. As time passed my knowledge of website development grew and I got in touch with more and more new techniques. And then came CSS. A whole new world opened to me! After learning the CSS basics and starting to use CSS more and more it started feeling like it was natural. The code looked much better, I no longer had to fidle aroung with table and column widths and the pages were loaded much faster.

Some people say when you are displaying dynamic data on you pages you "should" use tables to position your data. But then again a table has to be completely loaded before it is shown. This is not a problem when you have text based only data. When using data that involves loading images this is a completely different story. I have used both, text based and image based data, which was completely positioned with CSS. If dynamic tables can expand you can also write code that is expanding (or repeating) CSS styled parts of the pages that contain dynamic data.

So I'm going for CSS instead of tables because it feels right, the code is much cleaner which gives me a better overview of what I'm doing and when I need to make adjustments it's done much quicker.

Rgds

T.

#22 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 28 April 2006 - 02:38 AM

just to reply to the initial question. CSS vs tables.

Good Idea T, here’s My straight answer:

Q: CSS V TABLES Which is Better, Nowadays?

A: The question suggests that there is a choice to be made between the two. CSS can, and is used to style tables.

So I'm going for CSS instead of tables because it feels right

Q: What does that mean ?

TreV

Edited by manager, 28 April 2006 - 02:44 AM.


#23 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 28 April 2006 - 08:40 AM

You conscious tells you to use css instead of tables!

What if you want to rearrange your page? You got all these tr and td and table tags you have to look thru...

Its just not logical to use tables when you have css. Thats what I think.

Its like...wearing khakis to play in a backetball game...YOU CAN DO IT...AND...IT WILL WORK...AND YOU CAN WIN THE GAME...but...heh...

#24 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13613 posts

Posted 28 April 2006 - 11:06 AM

Yes, Eron, I agree with the Ra Ra cheer that we can do it, but as I turned a friend's site into table-less, I discovered that I ran into rendering problems in all browsers for some of the things I wanted to do.

Not only that, I realized I LIKE tables! It's like playing an instrument or riding a bike. My fingers naturally just start doing it and I hate stopping what to me, is fun.

That said, I decided to keep learning and at least incorporating them into pages. Using them makes pages more standards compliant in some instances and that's a worthy goal, esp. if it increases usage by special needs visitors.

#25 RisaBB

RisaBB

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 1437 posts

Posted 28 April 2006 - 01:56 PM

OK, now that I'm convinced that I should not design the site I am re-designing in tables, is there a beginner's tuturial for creating the table-look in CSS? I've used CSS for all other things - fonts, colors, margins, but not this and I feel a bit intimidated.

I got the book, "The CSS Anthology - 101 Essential Tips, Tricks & Hacks" by Rachel Andrew, which I haven't cracked open yet. Maybe I'll take a look this weekend, since it seems that tables are so obsolete.

Is it as simple as assigning positions to where the columns should go? How many hours will it take me to get the hang of it? 20 hours?

I feel the same as Kim - I am so comfortable with tables. I can set them up so quickly, and they seem so logical to me and playing with the cell padding and spacing and backgrounds is so easy, but I will learn, and I'm sure I'll be wondering why I ever designed in tables.

Thanks.

Risa

#26 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 28 April 2006 - 03:12 PM

^ Moving to CSS aint easy...

It was like HELL at times...

Certain things you CANT use because of browser compat and there are design patterns you need to worry about...For example IE and FF deals with padding and margin differently.

Anyway, Im not here to discourage you...but

It wont be easy...the hardest thing is browser compatability and positioning. Knowing how to set up your classes is also important too.

Look for a book on CSS design patterns. I dont even know if one exisits.




No its not that simple either...well actually it could be...if you use absolute positioning. I believe its ok to use abs pos now...and the latest browsers all support it well. However...I usually try to float to position my elements.

Youre going to run into some problems guaranteed. :) When you do...just come here and Ill see if I can help you out.

http://faq.css-stand.../wiki/Main_Page

#27 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 28 April 2006 - 04:13 PM

Risa, have you ever tried using CSS before? If not, I wouldn't suggest diving straight into positioning. Use for some standard formatting first, stil doing your layouts in tables. What you may start to find is that you don't need so many tables, because of what you can do with some relatively basic CSS (using things like padding and margin on elements instead of spacer gifs or extra tables cells etc...).
It will also get you used to the way CSS is applied without having to deal with the of the bigger headaches of getting used to the switch.

Check out the CSS resource sticky http://www.cre8asite...showtopic=26996 for links to all sorts of sites. The top one may of some use :)
I've also got a few small CSS articles on my site at http://www.camaban.co.uk/css-articles/ aimed more at the beginner end of the spectrum which may help you to :)

Give it a go, and don't forget, if you get stuck, you can always ask here, we seem to have a good few members with at least intermediate skill in CSS these days, and some who are pretty hot on it :)

#28 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 29 April 2006 - 01:29 AM

I'll second Adrian's advice not to speed on the CSS highway.
I learned CSS at W3 Schools.

Here is an instruction on how to manually switch to CSS from tables (good after you learn CSS).

Edited by A.N.Onym, 29 April 2006 - 01:30 AM.


#29 manager

manager

    Time Traveler Member

  • 1000 Post Club
  • 1331 posts

Posted 29 April 2006 - 06:23 AM

The move from nested table layouts can be difficult. In my experience, the difficulty is magnified when ones learning is based on a distorted view of the fundamental concepts involved.

Like others, I started to use nested table layouts years ago; because I viewed them as a “lesser evil” when compared to frames.

Tables were intended for the display of tabular data, not webpage layout. That’s why many people have said that using nested tables for web page layout is a "hack".

If the original question was: nested Tables V Divs for webpage page layout. Then the answer’s going to be divs.

Tables still have a place in web design, for the display of tabular data, and properly coded they will validate to xhtml strict. I would mischievously suggest, many people who berate the use of tables, don’t fully understand what they are talking about. In many cases, they are really just saying, “look at me ! -- Aren’t I clever ?”

A major source of frustration is that you can code well-structured webpages in xhtml using css for styling, and still have cross browser compatibility issues.

In their last posts, Adrian and A.N.Onym made good suggestions on learning CSS. I agree with their suggestions. Once you grasp the basics, there is much to be learned much from analysing the xhtml /html and CSS code from webpages that have no "cross browser problems", or invalid code.

TreV

#30 Eddie

Eddie

    Mach 1 Member

  • Members
  • 404 posts

Posted 29 April 2006 - 08:31 AM

I'd agree with most of the lat post. RisaBB, don't let anyone persuade you that tables are in some way "evil", or even bad programming. They are not.

For some strange reason, just about every form of programming has it's fans, and some of them take it to extemes. I've been hearing arguments like this for years ( programming in basic is bad - using a for next loop is bad programming - using if statements are bad........... )

The sensible coder picks and chooses the best tool for the job. Just spend an hour browsing the most succesful sites on the web and you will certainly see tables being used. CSS has many advantages, but it isn't the holy grail.

#31 SlipStream

SlipStream

    Whirl Wind Member

  • Members
  • 77 posts

Posted 29 April 2006 - 02:05 PM

I feel like I just threw a match in dry grass here! ;-) Having taken a day off and read some different tutorials on CSS I have seen the light and managed to understand the syntax of the basic CSS. What I thought was poetic license has turned out to be, thanks to all of you, legitimate codes that I was merely unaware of. Can you believe that? Me, unaware.............. :) At any rate, I am now starting to reset my pages with xhtml strict and dabbling in the stylish CSS. So far so good.... And here I thought everything had remained static siince '95. You folks should have emailed me of the changes! :)

On a serious note, though, I am amazed at the knowledge of so many of you and the willingness to share your knowledge. Go down to your local pub and tell them I said to give you a beer on me. :cheers:

#32 TheManBehindTheCurtain

TheManBehindTheCurtain

    Time Traveler Member

  • 1000 Post Club
  • 1035 posts

Posted 29 April 2006 - 10:00 PM

Some random observations in no particular order:

-- Ease of Transition to CSS. I spent, well, OK, I'll date myself, a few decades doing print layout. Did actual pasteups with typeset galleys, hot wax, X-acto knifes, and lots of pencil work and math to work out columns widths and placement. Then I switched to Quark, FrameMaker, inDesign, Illustrator, etc., and that required lots of pixel-perfect placement. I had still done a lot of table-based web page layout before I switched to CSS. But for me the leap to CSS was not that hard given that previous layout background. The concepts were all pretty easy to translate. I think a lot of it depends on where you've started. If you've spent years doing table-based web page layout, you're just used to that and CSS seems foreign. I have some idea that if you're just starting in web design and you have any sort of previous design experience, it won't be any more frustrating than dealing with nested tables.

-- Where Newbies Should Start. As professionals, a certain amount of distance and dispassionate analysis helps. Here's what you need to know: As the official standards body, the W3C has defined the use and future course for these technologies: XHTML for semantic markup of content; CSS1 for styling and CSS2 for structural layout (generalizing just a bit). I for one don't fault anyone for using tables for layout, but just be clear that this isn't the purpose for which they are designed. In particular, as your site moves onto other platforms such as mobile devices with CSS3, all that table-based layout just won't work. If you're just getting started, do yourself a favor and start with the skills that will match where the industry is heading. You'll see lots of job postings for people who know CSS and XHTML. I can't remember the last time I saw an interesting job for a new site asking for a wizard at table-based layout.

-- You Can't Get There from Here. I really do sympathize when someone laments that you can't achieve a certain effect with CSS. But it has the ring of the familiar. We all said the same thing about web design and layout in general circa 1995. And what did that lead to? Font tags and pages that had more table markup than actual content. I'd love to have more interactivity in pages, but there's only so much you can do with client-side scripting. Point being, there is always something you can't do. Heck, if we could do it all, what would be the fun in that? There's a good deal you can do with CSS; some CSS sites are stunning. What would be a graphic effect that is so compelling and so essential to the site that it would cause you to make such a fundamental design (tables versus CSS)? Personally, I think genius is mastering the art of the possible with what you have to work with.

-- Pain. Web design and development are difficult and complex. That's one reason I love it. Learning CSS? Sure, it ain't easy. Why should it be? If you're looking for easy, run a cash register at the local video story. No, I'm not trying to be insulting or rude. Just giving realistic career advice. If you let something like "there's a steep learning curve" put you off, high tech will be just one long frustration for you. The fact there are always challenging and interesting things to learn is one of its chief appeals for me personally. And, hey, I think those of us who started doing table-based design in the mid-90s forget how utterly miserable that was in the days of 3.x and 4.x browsers. How many hours we spent debugging nested tables and unclosed TRs. Remember the old "blank window" in Netscape 3.x? The good old days. May they never come again.

If you're just getting started, or if you're designing a new site, CSS is just the right choice because those are the professional standards as our industry defines them. You can do otherwise, and I for one won't fault you, because we all must be pragmatic at times when we have X number of hours to achieve a result. Personally, I still use tables now and then within a layout to drop in content within a larger CSS structure, but I can't say I've had to make any compromises at all.

Just one opinion among many ....

#33 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 30 April 2006 - 03:19 AM

It's always good to hear a point of view from a different perspective.

Those were also some good points about why and how to work with CSS, too, FrankElley.
It is just a relief to see the Web slowly switching to CSS. Now let's watch how it starts applying usability and ethical and efficient SEM :)

#34 SlipStream

SlipStream

    Whirl Wind Member

  • Members
  • 77 posts

Posted 30 April 2006 - 12:13 PM

Having read through all your posts I wonder who you folks do your work for. Sounds like a fair amount of business types. The site I am attempting to learn to do is comparatively simple in theory. I wonder how simple it will be in actuality. What I want is a dark gray background with a center column roughly 1/2 page width and two columns ( 1 on either side of center) in corresponding subtle shades. (Something like a reddish gray or the like) I haven't gotten so far as to know exactly what I want per column other than navigation and some links, email etc. My main concern is to keep it simple, not just for myself, but, for potential guests. The site will consist of 3 photo galleries and another gallery for my cartoons and my sons art work. a lot to be trying to throw together, considering my limited knowledge, yet, something I really want to get done. I also want to place a PayPal system of some type on it for purchases. ( I know, some have had probs with PP)

So far as I can tell, CSS seems to work well for what I want to do. I guess that's half a question.

And, to be clear, I am just doing this for my own use. Something I have wanted to do for a long while. As I said in my intro post on this forum, I have no delusions of $ signs or immortality, I just want to have the satisfaction of getting this done and not having to tear it apart and do it over because I have used what I knew in the past and not something that might work now, but, not in the future.

Edited by SlipStream, 30 April 2006 - 01:18 PM.


#35 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 30 April 2006 - 07:06 PM

Well, whatever you are doing, CSS and proper HTML is the way to go.

The layout you described can be created with this CSS "Holy Grail" (3-column liquid layout) from AListApart.

However, you may want to make sure there is enough contrast between the font and background colors. Also, black text on white (or bright) backgrounds is easier to read than visa versa. Now, how does dark gray background collide with your galleries and son's section? Will it be suitable there?

You may even try creating galleries in CSS, if you want. It seems to me this may give you extra flexibility how the gallery is laid out. However, you may want to use tables specifically for galleries, if you want.

I, for one, work for a software and web development company. No really, it is hard to expect for a marketer to work for a non-profit organization. Non-profits rarely get their sites redesigned and contact usability tests, too. That pretty much answers some part of your question, eh?

#36 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 03 May 2006 - 04:59 PM

@Slip

I dont do work for anybody. I do work for myself. And I have a fulltime web app development position too.

#37 eferg

eferg

    Ready To Fly Member

  • Members
  • 12 posts

Posted 03 July 2006 - 05:25 PM

Most CSS based sites I see are designed as fixed-width with lost of wasted space. My table based site works well from 800 pixel-wide monitors on up.

I've started slowly incorporating CSS into my site and want to eliminate the tables. Does anyone have examples of tableless sites that take advantage of the full screen, yet work for visitors with 800 pixel wide settings?

Ed

#38 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 03 July 2006 - 06:16 PM

Any site that has fluid width (width in fluid measurements, such as %, em, pt, etc) spreads to full (or any) width for any resolution.

If you want examples of sites on CSS, you can check:

http://www.stylegala.com
http://www.cssvault.com
http://www.cssbeauty.com

#39 Ruud

Ruud

    Hall of Fame

  • Hall Of Fame
  • 4887 posts

Posted 03 July 2006 - 06:35 PM

Yup, so much so that I've encountered the need to set a max-width on some designs. Otherwise at very wide displays there is no correlation with the layout anymore, I find.

My favorite CSS designs are fluid up to 1024 (around 1007 in a browser) and then stop resizing.

#40 paranoidandroid

paranoidandroid

    Light Speed Member

  • Members
  • 821 posts

Posted 04 July 2006 - 07:01 PM

Does anyone have examples of tableless sites that take advantage of the full screen, yet work for visitors with 800 pixel wide settings?

Liquid Designs is a showcase for liquid and elastic CSS based websites.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users