CSS vs Tables?
 

As far as free sites go, is there any difference between a table-less free site and a traditional free site done with tables?

I, for one, use CSS for the main reason that I just want to advance my skills. But for the others, why choose CSS over tables and vice versa? Are there any long term effects with regards to SE?

The main potential benefit (although you will not see much unless the text is SE optimized) is a lower code to text ratio.

The pages will load slightly faster, but the difference will be very small unless were to do something foolish such as put the whole page in a single table.

Do you mean it's foolish for me to enclose most of the code on my freesites inside a set-width table?
I start every freesite I build with a 740 pixel-wide table.

I do that too, keeps things nice and tight. I hate it when I see pages disintegrate at higher screen resolutions.

I use a combination of CSS and tables on almost everything. In the not-so-grand scheme of things, free site pages are small, insignificant bits of code anyway, so the page load time difference between tables and pure CSS is so minute, it wouldn't be noticeable. On content packed, code heavy pages, CSS could definately provide a more quickly loaded page. And as Jayeff stated, the true benefit [for any page] would be the code:SE content ratio.

The visible difference in loading speed when talking about a typical gallery page is very small: for broadband connections, practically none. But poor coding is poor coding and most webmasters are likely to code other - bigger - pages at some point, continuing to use the coding style with which they are familiar.

As soon as a browser encounters a table, it has to read to the end of the table before it can display any of it. The longer the table is and the more poorly coded, the longer it takes. When you see sites which initially show an empty page and then after a pause, the whole page displays at once, you can about guarantee you are looking at a page with everything enclosed in a single large table.

From the performance point of view in this context, there are degrees of poor coding. The worst is when only the main holder is given a dimension, so browsers not only have to read to the end of the code, but then calculate the layout.

That is the tempting way to go because it saves time when creating the page. It is also easier, if you want to change anything later, than having to change lots of width declarations. Hence its popularity. But at least if you do declare all the cell widths, you spare browsers the need to make calculations and that speeds the display up.

If you must use tables at all, then declare the CSS property table-width:fixed; whenever possible. If you combine this with dimensions for at least the first row of cells, browsers can begin displaying the table immediately and the performance difference is astonishing. Cynical? Then mock up a huge table containing lots of rows of text, stick it on your server and watch it hang then pop. Add table-width:fixed and you will see how the content begins to display immediately. Smaller tables, smaller benefits, but they still exist.

There are - as this page demonstrates - display differences between this property and the default (auto) handling, of which you need to be aware.

I'm unashamedly gung-ho for table-less design for several reasons. I can bang a 1-inch nail into a piece of wood using a 20lb hammer, but that marks me out as an amateur and I take pride in my work. More practically, pages coded with correct, modern code load faster, work better with the search engines, are more future proofed and (yes, despite the few incompatibilities) more cross-browser compliant. If you think all tables display the same way in every browser, you are wrong.

I can take the exact same HTML and by changing a single file, totally change the way my pages look. That is a huge time-saver when it comes to making galleries, TGP's, blogs, etc, repeats of structurally similar pages/sites that I want to look different. That should also suggest how much easier site maintenance becomes when you want or need to make changes in future, particularly if for some reason you cannot change the HTML.

Finally, there are many things I can do with CSS which are simply not available any other way.

Sure there is a learning curve, just as when learning HTML in the first place. But this is business and it moves on. You invest in yourself or get left behind. On a purely pragmatic level, if you don't learn CSS I guarantee that in a single year, you lose more time via poor productivity, than learning CSS would have taken.

that was a nice read, jayeff. thanks! :)

I built a ton of freesites putting everything in tables and noticed almost 100% of the time that google ignored the text that was inside the table.

I have since switched to making everything just about all css and notice that google is picking up the text on the page fine now.

Just something I noticed with my own stuff so I dont know if it will apply to others but something to maybe be aware of.

All modern browsers display tables the same. That is not true for CSS which often requires hacks and often similar amounts of code as tables.

I have had CSS code written by experts that still needed additional tweaks and adjustments where if they used tables it would be the same no matter what.

As far as I'm concerned CSS is still new and it will be years before things shake out clean. That being said, I do try to not use tables for page layouts however I still use tables when laying out information in a table format as it's just easier.

I start all of my pages inside a

Wrong. Although they should not, all browsers include display styling defaults which result in the appearance and/or placement of various page elements - including tables - being handled in a variety of ways. The differences are often small and acceptable, but these defaults are almost always the reason for the "my page looks great in such-and-such a browser, but in..."

Which is why, if you do use CSS, it is a good idea to begin your stylesheet with settings to "zero off" these differences.