Is it really worth the effort to learn CSS and ditch table-based layouts?
I’m just learning CSS little by little as I go along, and generally I find it just a much more elegant and satisfying thing (in addition to the convenience of being able to change styles across the board with a linked stylesheet), but when it comes to positioning, some things just make me cry. The difficulty (or impossibility) of centering elements, especially when you want them to be centered in relation to the page, whatever size the page might be in whatever browser window size or resolution it’s rendering in is just awful. It seems that CSS positioning works very well if you give most things absolute widths/heights, but gets to be a real bear if you want your layout to be dynamic in the old html sense. This also seems to me to be a reason that we see so many CSS layouts looking so similar. CSS is great, but it falls down in a few critical areas, and I’m not ready to sacrifice a layout I really like to its limitations just yet.
I think “semantic” in relationship to HTML/CSS relates to the use of the standard HTML 4.0 tags (e.g. P, UL/LI, H1) to define the structure of the page without concern for the display side of things (e.g. worrying about getting pixel-perfect layouts) — that is, defining what each part of the page is, rather than how it looks. The example Zeldman gives in his excellent-ish book is a screen reader (that is, software which reads out a webpage to a blind user), and how it uses these tags which indicate lists and emphasis (which explains why EM is preferable to B, since “bold” means nothing to a non-visual browser) to actually impart an idea of how the page should actually be read. Of course, with “normal” browsers, you’d be able to include a stylesheet that would make H1 text 8pt pink on a red background, but the semantic structure would still be there. The antithesis of this approach, but one that still uses CSS, would be using a bunch of DIV tags — which would make it impossible for a
Most people’s difficulties with CSS are due to either bugs with browsers (which are the browsers’ fault, not CSS), or that the’ve forgotten that table-based layouts can be quirky or illogical too. (Leaving out the closing TD tags does different things in different browsers, some browsers need a nonbreaking space–or a 1-pixel transparent GIF– to display widths correctly.) Adaptive Path’s The Business Value of Web Standards outlines other benefits, including reduced download time and lower bandwidth costs. The difficulty (or impossibility) of centering elements • BlueRobot’s Centering: Auto-width Margins is pretty easy • Max Design (which has some excellent CSS tutorials) CSS Centering – fun for all! • The W3C’s
