CSS and table

[Mr.Webman]

Hello,

I am at present learning some basics for simple html coding
I am wondering how a web page made mainly in css can be compared with those that are "traditionally" created with tables. Could you tell me something please ?

Thank you

[PramodsNair]

Dear Mr.Webman,

Welcome to CodeGuru Forums.

The table based designs or a web page, which is designed mainly using tables, follows a grid system - which is created using the table - for layouts. Where as the CSS designed pages depend on style sheets for rendering their layout.

The use of table's goes a long way back in web page designing and they are very easy to implement since almost all rudimentary web editors will help you design a table based layout with minimum effort. But Official web standards recommend using style sheets for lay outing purposes.

Both methods have their advantages and disadvantages. I will list a few of these below.

1. Table based designs doesn’t separate the code part from the content part of a web page and this means much lesser search engine optimization and much difficult page maintenance. Using style sheet all the design elements can be separated from content and this means more lean and well-defined pages.

2. Table based designs define the layout and visual styles with in the page. So there is no way to control or change the look and feel of elements from a single source for an entire website. Editing even simple design elements can become difficult when changes have to be made across multiple numbers of pages. In a CSS based website you can make the needed design changes in a single style sheet file and make the change reflect across the entire website.

3. Table based pages can have large chunks of design elements code with in the page which makes them seem bloated and burning much bandwidth. CSS pages can be made much leaner if used effectively and this makes them bandwidth friendly.

4. Table based pages are easy to create since all the web editors support this very well. But the older versions of almost all major web design tools doesn’t support CSS designs that well in their Design view making it a bit difficult for the user.

5. CSS has a much more steep learning curve when compared to table based designs.

Hope this helps you in your efforts to master web designing.

Pramod S Nair

[Xeel]

I think we are missing the point here comparing tomatoes to cucumbers.

You can compare table-based to div-based layouts or HTML formatting attributes to CSS approach, but not any other way.

First of all, table based layout is against W3C guidelines which states that a table cell should contain data and not be used for layouts. To follow this or not is up to developer though. Also table based layout is somewhat limited since it's based on tables, and this element has many downsides and even bugs.

Div based layout is considered to be more professional approach. It's may look harder in the beginning, but in the end it's more flexible compared to tables.

Now about CSS. CSS is a mean to extend formatting attributes of HTML elements and separate style describing code from pure HTML code. Compared to the old attributes used to give some limited format to elements - it's much cleaner, easier to read and gives more options. More important, only with CSS it is possible to obtain fixed values for certain attributes different web browsers love to put their own default values in. So if you want your web page to look equally well in all popular browsers CSS is the only way to do it.