How to Layout Pages with CSS
Monday April 24, 2006
I think that most Web developers would agree now that tables should be used only for tabular data, and to get precision layout on your Web pages you should use CSS. But once you know that, do you know how to do it? Of course, you can use layout templates, but that's no fun. Understanding how to write CSS so that your page displays how you want it to be is a more interesting way to go (and, I suppose, more why you'd be reading this site in the first place).
Comments
What rubbish!
Tables are perfectly valid as layout devices - indeed this is what they were invented for.
Think TABs on typewriters.
HTML Tables are still the most robust, fastest rendering and smallest code in many situations. The volume of hacks that are required to make div based layouts viable across different browsers - when they work correctly at all, makes them worse than useless in many situations.
It’s all about dividing content and layout ‘J’. Editting stylesheets is a lot quicker than editting table layouts. Tables weren’t ment for layout, they were ment to display clean data in, well, a table. Not for the complete layout.
It’s about time that content and layout were seperated! As a graphic designer/dtp, I’m really excited that things are falling back in place again. The time when so called webdesigners were messing around with type and layout is changing. Great news for the designers, I would believe so!
I have been developing web sites for years (8+) and I see nothing wrong with tables for layout. Everyone says CSS is quicker and cleaner? No it isn’t, its just different! CSS is great, very nice and gives you allot of options but like everything there is a fine line. Tables are good for one thing above all else, they are compatible without any changes on virtually every browser out there today; and if for no other reason that is why I still use them today.
I’ve been doing web pages for 10 years now, but still consider myself unexperienced (I was using FP2000; recently switched to Dreamweaver
. As I learn more about CSS, I see many benefits to separating style and content. My favorite site to browse is the http://www.csszengarden.com/ — awesome what can be done & I can only dream of doing such beautiful sites! I’ve tried a bit of CSS layout, but am still more comfortable with tables. I don’t like the fact that CSS isn’t as cross-browser friendly as tables and there are fewer “work-around” for tables than there are for CSS.
I have been designed web pages for only
two years a go,and i can say that css is more comfortable than using tables for layout,specially if you use the positioning,you can completley control your web pages,and in additional to this,you will save a lot of time work.I tried by myself to design a page using tables,and the same page using css,I discovered that with css
positioning I can put the images and the logo of the site exactly in the position that I wanted to be in,and
this save a lot of time .
And we must know the fact that,the latest technology must go on,and we cant stand behiend tables forever.
Actually J, you’re entirely mistaken. Table tags existed before graphical interface browsers like Mosaic, and were used solely for purposes of displaying tabular data. It was only when Mosaic-based browsers appeared, and page designers realized pages could be formatted using table tags, that tables were ever thought of as a layout device. CSS & XML were developed as a way to restore the division of content and presentation originally envisioned by the SGML (standard generalized markup language) specification.
sorry to be so new at this.
What is a —
navigation block,
pull-quote block,
and an information block?
Thank you
J
navigation block = the section of the page devoted to navigation, usually a block or rectangular area
pull-quote block = again a section of the content that is separated out as a “pull quote” or a quotation pulled from within the content and given more prominence
information block = a block of content that is information
What you are impressed by when you look at CSS Zen Garden it is the VISUAL DESIGN, the look not the CSS themselves and the design was done in Photoshop or Illustrator.
Then after that OK, CSS allows you to switch between different designs at the speed of light but are not to be credited for the design.
Then it may change with the massive adoption of the forthcoming IE7, but until CSS is fully supported, what can beat:
Step 1 - Designing into Photoshop or Image reading
Step 2- Slicing the image in small parts in the same tools
Step 3- Exporting it as a table layout…??
With this you can produce visual design as impressive as CSS zen garden in minutes whereas doing it with CSS will take you a lot more time….
While I am no vast expert on web design, I get by. I feel I’m using the tools I have efectively for the time I have to devote to them.
I used to use tables to layout my web pages, and even though the layout was relatively simple (3 or 4 sections of layout) when I wished to CHANGE anything across all the pages in the site, it would take a long time. With CSS, I change one file, and all the pages that use that CSS file change with it. It saves loads of time and effort, and reduces mistakes made when I accidentally miss a tag or something in tables.
A pure css layout will take much longer to set up than a table layout, however, once that is set up I no longer have to look at that file unless I need to change something.
I would like to see those who are pro-table layout edit the sometimes several hundred pages of a large site while the pro-css people change sometimes one line, in one file, to achieve the same effect.
It is all a matter of when you want to spend your time, now, or later, I would rather spend my time now and have less of a chance of missing something that could cause me to lose my job.
All the above comments are interesting, but my view about the merite of CSS v tables is a combination of the above.
I think most web sites have fewer than say, 15 pages. In which case I see no great benefit in using either format for layout. Where CSS comes into its own is for larger sites. My web site has over 1,500 pages and I had the same mistake on every page!
I therefore had to change 1,500 pages where had I used CSS I would have had to change 1 page.
I am now trying to learn CSS with some difficulty. For example I produced a style sheet, font colour black. However,
on the page in question I had some headings that were coded maroon, but displayed as black. If I understand correctly, this on-page coding should override the external style sheet - it does not.
Pete Clowes.
so, I do both css and tables, and by far tables are more compatible. I try when I can to use pure css, but sometimes its just faster to go with the tables — even with sites that have thousands of pages. YES here is the pro table response to a multitude of pages!
The key is to build templates with a scripting language. I use php and my the method that I use to do layouts allows me to control the layout of any number of pages with a single file, table or css. Really though, at the end of the day, I find that I use style sheets for styling (fonts, rounded corners on content blocks, and such) and then I use whatever works best for the layout itself while pulling the content from a database when appropriate.