Why No Tables

Hi homchz,
Let me start by saying that tables are fine for tabular data, and although they can make layouts easier that's not what they were meant for.

Here are some of the benefits of tableless design:
- Pages load faster.
- Maintenance of the site becomes easier.
- Accessibility is improved.

Initially there is a steep learning curve when designing without tables.
Once you get over the hurdles you will start to see the flexibility that tableless designs give.

Hope that helps

Excellent information thanks,

I do have one question though if you do not mine helping. How do you work horizontally with out tables. By this I mean, have a Nav bar on the left while diplay info on the right.

I can always go look at some other sites, but I have not caught on to this yet. I am in the mind set right now of

<div id="blah blah>
<div id="blah"> whatever inside</div></div>

It all seems to work down, not across.

I have alot to learn, and it is all very facinating. But I took a web site class a few years ago, and the instructor was selling tables in design like it was the only way (though I know it is not) saying what is in a table loads faster, though I know things change rapidly in a few years, I am wondering if he was just not a CSS guy.

Hi homchz,
The magic of floats
There are really cool tutorials in the Useful CSS Links page that should help a lot.
Position is everything have good tips on overcoming the problems associated with floating.

Hope that helps

homchz;
regarding working horizontally.. use floats to accomplish this.. google for css layouts or try the generator on this site
http://www.csscreator.com/version2/pagelayout.php
it will create a layout for you and then you can pick apart the code to see what it does...
use tables for tabular data as Tony said... once you start using css for your layouts you'll be amazed at how small your html files can become versus using tables

Thanks again guys,

MOre sleepless night of practicing this stuff ahead I am sure.

In viewing some resources I found the following

<h1>"float: left" element against another floated box</h1>
<div class="containingbox">
<div class="floatleft2"></div>
<div class="floatleft"></div>
</div>
</body>
</html>

and

<h1>"float: left" element shifted down</h1>
<div class="containingbox">
<div class="floatleft2"></div>
<div class="floatleft"></div>
</div>
</body>
</html>

They are coded the extact same but they are two diffrent things for me to get a float to work under another I have to <br> the height of the first float and thereis always space between them.

What am I missing?

With the horizontal positioning, I found it easier to just set the position as absolute and give the placement of the div itself.

An example of mine:

http://www.ohiopreptalk.com/football/schedules.shtml

The three columns in the rightcontent div are all separate divs. You can read the CSS at...

http://www.ohiopreptalk.com/STYLE/CSS/STYLE.CSS

Hope it helps!

That helps alot thanks, it gives me a good visual.

BTW:
I know you did not ask for a critique but have you looked at your site in Mozilla?

One of the reasons I have avoided leaving tables is the multiple browser probelms.

With that being said do you find it beter to design for a target audience to or try to apease the masses. If 98% of your viewers are viewing in IE is there a reason to worry yourself with the other 2%?

But I guess that is an opinion question.

Well, if you are doing a redesign, then you know exactly what your demographic is, In which case you can decide whether it is advisable to ignore a particular browser.

However, if you are designing a new site, you cannot know who will be visiting and in what browser. In addition, with any site, you cannot know if the demographic will change in the next year or so.

If you are designing proffessionally then you should be designing for as many browsers as possible, else IMO you are ripping off the customer with shoddy mechandise. ATM I test for compatibility with:
IE5.0 / 5.5 /6.0
Mozilla / Netscape / Firefox (latest versions)
NSN6
Opera (latest Version)

I want to start testing for macs but the "buy richard a powerbook" appeal doesn't seem to be going too well ATM

The browser bugs are not as bad as people would have you believe. I find that with CSS, there is always more than one way to do things, so if the first method doesn't work, I try another until I get there. I only hack as a last resort.

As a final note, if you're site designs are not working with netscape and similar browsers, then you are probably not coding to the standards which may very well give you problems for forward compatibility.

If you design for Firefox (the most compatible, apparently'), then test in IE and tweak the design, then do a final check in Netscape and Opera, everything should be fine. At least, that's the way I work.

Yeah, that works for me too, although I would advise you do a quick check through all browsers at regular intervals (don't wanna get to the end and find you've gotta go back and redo half of it ). Also everytime you do something complicated, or use a float, I find it's best to check.

Actually, I tailor mine for Internet Explorer, because my usage statistics look like this:

MS Internet Explorer - 94%
Unknown - 3.4%
Netscape - 1.8%
Mozilla - 0.3%
Safari - 0.2%
Firebird, Opera, WebTV Browswer, Konqueror - 0% (but they have hits)

MS Internet Explorer - 94%
Unknown - 3.4%
Netscape - 1.8%
Mozilla - 0.3%
Safari - 0.2%
Firebird, Opera, WebTV Browswer, Konqueror - 0% (but they have hits)

Thats very good reason

Greetings... Was looking forward to diving into a redesign with CSS, then I saw the site stats:

Internet Explorer 6.x 60.85%
Netscape 4.x 10.02%
Internet Explorer 5.x 8.65%
Netscape 6.x 6.67%
Netscape 7.x 3.50%

Getting 16K+ visitors and 80K+ hits a month with Netscape 4.x users.

Got the whole header/footer three column thing working in CSS w/hacks, but the color and font issues... Booo!

-B

Just starting with css and it definately different. I have 4 areas:

first thing I'm trying to figure out is how to add the links (preferable rollover images) with will of course be in the Menu column. The 4th column is to the right of content, but won't be used.

first thing I'm trying to figure out is how to add the links (preferable rollover images) with will of course be in the Menu column. The 4th column is to the right of content, but won't be used.

Well, to get your basic layout, you can't go past Tony's CSS Layout Generator.

For the menus it's well worth reading the Taming Lists article over at A List Apart.

Hope this helps!

On the other hand though, look how simple a 3-column layout with a header and footer is in a table, and at 5 cells it's hardly heavy on markup, AND guaranteed to work in every browser....

I'm certainly tempted to start taking this approach, until CSS levels out a bit. Use one table for basic site layout, but avoid nesting any tables inside that. Tables aren't the problem with most websites - it's 4 levels of nested tables that are!