Welcome to WebmasterWorld Guest from 18.208.159.25

Forum Moderators: not2easy

Message Too Old, No Replies

What's so bad about tables?

DIVS instead of tables

     
2:47 am on Aug 17, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0



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?
3:18 am on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts:1676
votes: 0


That question has sparked many debates. This is the CSS forum, and CSS allows freedom from tables. That doesn't mean that tables are bad. They have their place. Sometimes I will avoid a table when I should use a table. My own hard lessons, and I'm not quite so bad that about now.

the challenge of making everything with DIVs

Good for developing a solid understanding of CSS I think.

4:45 am on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


I don't consider making everything with divs a challenge. I find it a more free way to create web pages. I find tables restrictive but they were never created for layout. I have yet to create a website using tables.
9:34 am on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member beedeedubbleu is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 3, 2004
posts:6141
votes: 24


I find tables restrictive but they were never created for layout.

Tables were never created for layout?

9:48 am on Aug 17, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 1, 2005
posts:158
votes: 0


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.

9:56 am on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 15, 2003
posts:7256
votes: 3


Tables were created for the layout of tabular data and information.

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

10:01 am on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member beedeedubbleu is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 3, 2004
posts:6141
votes: 24


Tables were created for the layout of tabular data and information.

That's the point I was making.

1:53 pm on Aug 17, 2005 (gmt 0)

Full Member

10+ Year Member

joined:July 30, 2003
posts:322
votes: 0


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?

Two reasons, mainly. First divs generally takes less markup then tables, especially where one cell or one column tables are concerned--and less markup means less time to download the page. Second, browsers can render divs much faster then tables. What it all boils down to is efficiency.
2:57 pm on Aug 17, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 24, 2005
posts:21
votes: 0


I agree with trillianjedi...

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

3:38 pm on Aug 17, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0


So divs take less mark up than a table, but they still need a lot of properties for formating and positioning in CSS, doesn't that take just as much to download?

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.

4:21 pm on Aug 17, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 17, 2005
posts:11
votes: 0


They can take less markup, cellularnews hit the answer when he mentioned your browser can cache the CSS file. Instead of a user having to download the tables and their presentational markup each time you hit a page, they only have to download the CSS once and then worry about getting only the structural div for each page.

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?

5:49 pm on Aug 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 1, 2003
posts:1206
votes: 2


>Server Side Include (SSI) files make things faster for the user

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.

9:43 pm on Aug 17, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:160
votes: 0


hexdj,

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).

3:13 pm on Aug 18, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 4, 2004
posts:6
votes: 0


LAYOUT, SPEED & SIZE

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]

3:23 pm on Aug 18, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 4, 2004
posts:6
votes: 0


Some tips for CSS design using Firefox

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.

7:24 am on Aug 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member beedeedubbleu is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 3, 2004
posts:6141
votes: 24


Deaconmpg I don't get offered the web developer toolbar in Firefox. Is it an extension?
7:29 am on Aug 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Yes, it is an extension - the average user would not have any use for most or all of what it offers.

[addons.mozilla.org...]

9:31 am on Aug 19, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member beedeedubbleu is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 3, 2004
posts:6141
votes: 24


Off Topic but thanks Tedster. I have installed it and it looks as though it may be quite useful :)
3:25 pm on Aug 19, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 4, 2004
posts:6
votes: 0


Soory BeeDeeDubbleU,

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!