17 replies [Last post]
homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why are people so set against using tables. I have used them Almost to an extent, then I found CSS and am changing my usage, but I still see somewhat of a need for them, or shall I say they serve a purpose.

However do pages load faster with out tables?
What are the advantages that outweight the CSS layout issues?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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

homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why No Tables

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Why No Tables

Hi homchz,
The magic of floats Smile
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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 31 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Why No Tables

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

homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why No Tables

Thanks again guys,

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

homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why No Tables

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?

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 16 years 41 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Why No Tables

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!

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why No Tables

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.

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 51 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Why No Tables

Quote:
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%?

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 Sad

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.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Why No Tables

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.

Verschwindende wrote:
  • CSS doesn't make pies

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 51 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Why No Tables

thepineapplehead wrote:
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 Laughing out loud ). Also everytime you do something complicated, or use a float, I find it's best to check.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 16 years 41 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Why No Tables

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)

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

homchz
Offline
Enthusiast
Last seen: 14 years 18 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Why No Tables

OPTAdmin wrote:
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)

Thats very good reason Laughing out loud

Beanboy
Offline
newbie
Last seen: 16 years 32 weeks ago
Joined: 2004-10-01
Posts: 2
Points: 0

Why No Tables

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

steelsolid
Offline
newbie
Last seen: 16 years 32 weeks ago
Joined: 2004-10-03
Posts: 3
Points: 0

I'm trying to go to a tableless design, but...

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

Quote:

------------------------
| Headers
------------------------
| M |
| E | Content
| N |
| U |
------------------------

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.

Daniel
Daniel's picture
Offline
Enthusiast
Last seen: 1 year 21 weeks ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 76
Points: 0

Re: I'm trying to go to a tableless design, but...

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

Quote:

------------------------
| Headers
------------------------
| M |
| E | Content
| N |
| U |
------------------------

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!

seb
Offline
Enthusiast
Last seen: 14 years 15 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Why No Tables

Tony wrote:
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

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!