Forum Moderators: not2easy
the challenge of making everything with DIVs
Good for developing a solid understanding of CSS I think.
I find tables restrictive but they were never created for layout.
Tables were never created for layout?
Tables were never created for layout?
Correct - that just happened to be a very useful side effect of them.
I use a mixture of tables for, well tabular data display and css for page layout.
The key advantage is that the css declarations can be dumped into a seperate css file and hence cached by the users browser - that makes the page download much much faster, and clearing out "redundant" html code is a nice help for SEO boosting.
There is definitely a time and a place for tables - there is nothing wrong with them and they'll be around for a long while yet I'm sure.
But the main reasons for using CSS instead of tables for complete page layout are compelling. More control, smaller size (and faster loading time) and the ability to feed the SE spiders with content right where they want to see it.
I've got both - sites with 100% table layouts and sites with 100% CSS layouts. Overall, I prefer the CSS sites for maintenance and basic SEO reasons. I probably wouldn't deliberately use tables for layout again.
TJ
Tables were created for the layout of tabular data and information.
That's the point I was making.
I have noticed that some people refuse to use tables and do everything with CSS and DIVs, is there any particular reason why it is an actual bad practice or is it just for the challenge of making everything with DIVs?
there is definitely a time and a place to use tables.. and that is where they are most useful - for tabular data - divs are much more dynamic and easier to manipulate...
I hated working with tables for layout
I am not trying to say I am a big fan of tables here, just want a really good reason why this is considered a better practice.
Now a question of my own, do Server Side Include (SSI) files make things faster for the user? Say I take my header, sidebar and footer div's (which don't change) and place the content of each into an SSI, that reduces code across all my pages, but does it help reduce load on the client? Do browsers also cache SSI file information?
Not necessarily, but they definitely save the webmaster time. An extra second or two for the user can easily be justified by the hours they can save the webmaster when editting across a large site. It isnt always about the user. Its about ROI, and that includes time invested.
the <div> tag requires alot less markup than <table>
when you give the properties to your div's with id's it is FAR less for the browser to read than those messy tables.
the key is that the css separates presentation from the information. The SE bots have a much easier time finding what it needs from your page, this also means much easier management for the webmaster(changing a pages layout is as simple as an edit to the stylesheet) and you dont have to worry about all that presentational code getting in the way when you're adding/changing content.
I also found that once I got passed the learning curve, I could build a template much faster than I could with tables.
It really simplifies the whole process(once you get used to the browser bugs).
I also have grappled with TABLES vs. CSS layout and have finally switched gears to CSS design.
One of the best examples of the Power of CSS layout [csszengarden.com...] just go there and click through each design. Each design is a different external CSS style sheet applied to the same HTML - I REPEAT THE SAME HTML. The CSS is the driving force for the layout.
Layout becomes much easier to change when you have an external CSS style sheet (do not use inline style or styles in the head if you can help it). Because say you wanted to adjust the margin on graphic you styled or you even move a graphic to a different location. You can do it because now you have full control over the design of you site in a template fashion from the external style sheet. And the next best part is when the style sheet is external it is cached as others have stated which speeds up your pages because your viewer are only pulling down content.
Here is an example of SPEED & SIZE, I used a Speed and Size Checker to compare my old tables to the new CSS design I finished. see post below for checker details
***The NEW CSS Layout are half the size, half the HTTP Request, half the download time.
====================================
Old TABLES Layout-
====================================
=Global Statistics=
Total HTTP Requests:25
Total Size:84447 bytes
=Object Size Totals=
Object typeSize (bytes)
HTML:13069
=Download Times=
Connection Rate- Download Time
14.4K - 65.65 seconds
28.8K -32.93 seconds
33.6K -28.25 seconds
56K -17.03 seconds
ISDN 128K 5.35 seconds
T1 1.44Mbps 0.65 seconds
====================================
NEW CSS Layout-
====================================
=Global Statistics=
Total HTTP Requests:11
Total Size:37798 bytes
=Object Size Totals=
Object typeSize (bytes)
HTML:7864
=Download Times=
Connection RateDownload Time
14.4K 29.50 seconds
28.8K 14.85 seconds
33.6K 12.76 seconds
56K 7.73 seconds
ISDN 128K 2.51 seconds
T1 1.44Mbps 0.40 seconds
===================================
[edited by: SuzyUK at 6:29 pm (utc) on Aug. 18, 2005]
[edit reason] minor tidying [/edit]
Download the latest Firefox version (no Firefox didn't win the BW II - BrowserWar 2, it is just really useful for viewing and understanding CSS).
=============================
Checking your Speed and Size
=============================
Make sure you have the Web Developer toolbar displayed View > Toolbars > Web Developer Toolbar
GO to your site and then from the Web Dev Bar choose the Tools button > View Speed Report - this is a good reviewing tool for your site's size and speed. Make sure to record this for your tabled base layout. Then make your CSS layout and compare the two.
=============================
CSS on / CSS off
=============================
Go to this site (or any CSS Layouted out Site) [csszengarden.com...] then turn on and off the CSS sheet from Firefox with the steps below
From the the web Dev Toolbar again, Disable Button > Disable Styles > All Styles (Crtl+Shift+S)
What this shows is with the CSS off the search engine spiders gooble clearer code and also this is more accessable to disabled views like the blind or visually impaired.
[addons.mozilla.org...]
Fell asleep at the wheel, the Web Developer is bar is excellent for the job. Also for CSS developement
=============================
View your CSS block Elements
=============================
Web Developers Bar > Outline Block Level Elements
This one is good to see where yor floated, absolute postion, etc div and other block elements are landing!
Thanks for the pick up on the WebDev bar extension Tedster!
