The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Why go tableless???

Hi,

I'm fairly new to CSS and I'm trying to learn more so eventually I can update my page with CSS. I've read several articles and topics over going tabless using CSS and I tried to use this techique. After playing around with some CSS, I was able to recreate part of my page using CSS and no tables, however I don't really see the benefit of doing this (plus there might be browser inconsistencies?).
Here is the code that it takes to create the top menu using CSS. I'm including both the style sheet and the HTML code below and you can see the page http://www.fotbal.net/includes/test/header.html
.top {
position: absolute;
width: 600px;
top: 0px;
left: 0px;
height: 75px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px ;
background: #00639C;
}
.topleft {
position: absolute;
left: 0px;
width: 265px;
z-index:1;
}

It seems that just by using HTML and tables there is less work than if i use HTML and CSS to avoid using tables. So why is it considered better to use CSS rather than use tables? Or this is just a rare instance where using tables is actually shorter?

but well i wouldn't encourage it as the css part is not much readable this way (for the gain in size it brings), though this kind of technique can be useful if your css is big.

Advantages, to name a few:
- if you put your css in an external file, it will be downloaded once and cached by client's browser, and he'll only have to download the content part for all your other pages (when he as to download the table every single time.
- file size is still smaller, even with the css.
- on file allows you to manage all your page display, and the html pages only hold content.
- i'm sure if you read a few posts in this forum you'll get many other reasons.

Disadvantage: creating the css layout is a pain in the *** compared with the relative easiness of a table-layout. But well it's probably only a matter of getting used to it.

CSS is much more friendly with regards to accessibility, whereas screenreaders etc have a very hard time with tables.

As you may have read there have been lawsuits in America where sites have not been accessible as it is considered to be discriminating to part of the audience. With CSS the mark up is mainly text and can be accessed easily by screen readers and the like. Also users can choose their own user defined stylesheets which will allow them to view your site in a style that suits them. Basically your design should fit the user and not make the user fit your design

I think the point is that you should not be trying to recreate yout tables with CSS but design your site to be as fluid and accomodating as possible using the features of css. CSS can do things that are impossible with tables.

Even with your example you can see that the code is much lighter than those complicated tables and if you put your css in an external file as described above you have nearly half the page size.

Browser compatability is an issue at the moment but if you code according to the standards (i.e. correct doctype) eventually your code will become more compatible as browsers improve. Therefore making your site future-proof as opposed to past-proof with tables.

CSS is a bit harder to grasp at the start, but also remember there is nothing worse than trying to update a site that has deeply nested tables. With CSS you update one file and can change the look of the whole site. In fact you can build in a variety of styles and browsers such as Mozilla will let the user choose which style sheet they require.

Well they are just a few of my thoughts but I'm sure that bodies such as W3C wouldn't advise not to use tables for layout if there were no good reason. After all the W3C was founded by Tim Berners Lee who has been credited with creating the world wide web, so I think he has some idea.

I think I will eventually have to go to start using CSS more and perhaps eventually replace all the tables (I'd really like not to have to deal with tables).
But for now I think I'm gonna stick with the tables a couple of reasons:

- My page is split into files, so the header(top part of hte page) is loaded from one file for all pages (so if I change the header once, it is changed on the entire site). This is similar to having one stylesheet as far as ease of maintenance.
- There are still some inconsistencies between the broswers (i.e. you can see some differences in the example that I showed between Netscape and IE)
- I need to get a lot more familiar with CSS so I can be able to fully utilize it.

Regardless, I will have to start using more CSS because as you mentioned there are many benefits that it brings, but I will probably wait until the browsers provide better support (especially the older ones).

BTW, how do you center CSS on a page? For instance if I want an area of 600px in the middle of the screen (regardles of the screen size). I've only seen ways to center text but not an entire area.

Originally posted by testmonkey I think I will eventually have to go to start using CSS more and perhaps eventually replace all the tables (I'd really like not to have to deal with tables).
But for now I think I'm gonna stick with the tables a couple of reasons:

- My page is split into files, so the header(top part of hte page) is loaded from one file for all pages (so if I change the header once, it is changed on the entire site). This is similar to having one stylesheet as far as ease of maintenance.

You can still use a include file with DIVs. I use them on my XHTML site for the header, footer and navigation and it works just like tables, only MUCH easier to maintain.

- There are still some inconsistencies between the broswers (i.e. you can see some differences in the example that I showed between Netscape and IE)

Yes there are some inconsistencies with regards to how browsers will render your markup (esp. with IE's box model problem), but let me ask you this: how many hacks and workarounds have to had to write to make your site design consistent in IE and Netscape? Probably a lot, with a lot of non-standard features/markup.

I also think you're not getting the point of XHTML. The point is to allow for flexible designs, not a pixel-perfect layout. If that's what you want then by all means stick with HTML 4.0 and don't bother with XHTML for the site you're trying to redesign.

If/when you redo your site in XHTML, keep in mind that your markup doesn't HAVE to be pixel-perfect, and that other devices besides visual browsers on computers can look at your page.

- I need to get a lot more familiar with CSS so I can be able to fully utilize it.

Well, what better way to start then by creating a site with CSS?

Regardless, I will have to start using more CSS because as you mentioned there are many benefits that it brings, but I will probably wait until the browsers provide better support (especially the older ones).

How can older browsers provide better support when they are not being updated? Netscape 4 will never support XHTML, as it is a browser from 1997 and barely got specs from 1995 and 1996 right, much less the XHTML spec from 1999/2000.

BTW, how do you center CSS on a page? For instance if I want an area of 600px in the middle of the screen (regardles of the screen size). I've only seen ways to center text but not an entire area.

Try this:
CSS

Code:

/*
note: will only work with an
XHTML DOCTYPE. HTML 4.0 will not
center with margin:auto
*/
#frame {
width:600px;
margin:auto;
}

I'll try to center the page when I get home using your recommandations

I also think you're not getting the point of XHTML. The point is to allow for flexible designs, not a pixel-perfect layout. If that's what you want then by all means stick with HTML 4.0 and don't bother with XHTML for the site you're trying to redesign.

vgarcia...are you saying that in general it's not a good idea to specify the size of the blocks(i.e. 600px)? In other words let the page fill the entire window?

by the way, what kind of differences do you have between browsers for this layout ? maybe we can help .

Quentin...The differences that I'm talking about in the example that I used are in the middle part where I have a button and a search box. In IE, it looks as expected, nicely aligned, but in Netscape the Serach button is in the middle of the area and the seach box is a stlightly below.
Try this linke in IE and Netscape: http://www.fotbal.net/includes/test/header.html

Originally posted by testmonkey
vgarcia...are you saying that in general it's not a good idea to specify the size of the blocks(i.e. 600px)? In other words let the page fill the entire window?

I am not saying that specifying the size is bad, per se. I am just saying that with XHTML the screen is only one possible medium that your site will be viewed in. There's also screen readers for the visually impaired, print, handheld devices, refigerators that go online, etc. XHTML is about separating style from content, so your content can be seen anywhere, and your stylesheet dictates how the content is displayed. For the record though, my personal XHTML site is 100% width. I see uses and downsides to both fixed-position and liquid layouts, so I use whichever is appropriate.