Topic: Tables or CSS?

This is an age old question, but one I would like to know.
Do you still use tables to design your sites layout, or do you use complete 100% CSS?

Is there any advantage to using complete CSS?

Re: Tables or CSS?

100% CSS using divs to break up the page. You should never ever use tables for page layout.

The only time you should use tables is to layout certain elements in a page in a descending, logical, orderly fashion.

For example let's say you were writing a website for a company, and the company had products, and on the products page, you would create a table to list out all the products along with their names, descriptions, links for product details, etc...

Re: Tables or CSS?

I agree with jmbrink26,
Also there are more advantages like CSS works better for SEO since pages load faster with CSS Layouts, search engines can more easily crawl through the site. Also CSS separates the design elements from the content, it is easier for search engines to determine what a page is about and to index it appropriately.

Last edited by mickeyy (2010-02-13 07:38:58)

Re: Tables or CSS?

As I threw out in another thread, CSS and tables are not mutually exclusive. You can add CSS styling to tables, and there are instances (like the one jmbrink26 mentioned) where tables are the perfect tool for the job.

Re: Tables or CSS?

When I first learned how to develop a website I learned to build them with tables like so many others. Then I had to make changes to one site and thought there had to be a better way.
Enter css and I’ve never looked back. To me it seems so obvious that using divs over tables is the better approach that I have a hard time understanding how someone would argue otherwise.
But clearly there are many people who support using tables. If you click through on some of the links in the post or just do a search for css vs tables you’ll come across a lot of the reasoning why some prefer tables. I don’t agree with their reasoning, but it is there.

Re: Tables or CSS?

Tables should never be used for layout purposes, they exist to display tabular data only. The purpose of html is to create a structure to the data. If you disable stylesheets on a page that is marked up with semantically correct markup it should degrade nicely and be in a logical order. CSS is used to style these elements and JS is used to control behavior on the page.

I highly recommend anyone starting off in web design or looking to move away from table layouts to read the web standards bible aka "Designing with Web Standards" by Jeffery Zeldman. Some other good reads are Bulletproof Web Design and Handcrafted CSS by Dan Cederholm.

Best of luck. It can be daunting at first but once you get the hang of it you will never look back and you will be creating a much higher quality product.

Re: Tables or CSS?

I often use div element for the layout but it depence for the circumstances, any way div element is more lightweight than table element.

Re: Tables or CSS?

In Web site designing, table is widely used. While css is used for validation and some part of designing.  CSS is used to control the style and layout of multiple Web pages all at once. Use Dream weaver for creating web site because it is very flexible, fast and more effective. CSS and table both things are different. Without css, your web site is useless. Because there is no validation and security.

Re: Tables or CSS?

Several designers have taken Jeffrey Zeldman’s lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and archived at Eric Costello’s glish and Rob Chandanais' Blue Robot.

Re: Tables or CSS?

jmbrink26 wrote:

100% CSS using divs to break up the page. You should never ever use tables for page layout.

The only time you should use tables is to layout certain elements in a page in a descending, logical, orderly fashion.

For example let's say you were writing a website for a company, and the company had products, and on the products page, you would create a table to list out all the products along with their names, descriptions, links for product details, etc...

yeah you are right.. but i am just new to css.. i am a newbie we developer and  i have a little idea on css and more on HTML.. so i am using tables.. haaii so sad,, someday i will use css too..

Re: Tables or CSS?

just because you don't know it, doesn't mean it's a good idea to forget about it for now... now is the time to learn!!!

I would under NO circumstance use tables for a page layout, use tables for tiny sections of data that you want displayed in certain parts on your page, but NOT for page layout.

CSS is not that hard to learn, you just need some tutorials and to take sometime to learn. You will get it sooner than later and be able to incorporate it into your page.

don't just say, 'ohh I don't know it so I'm not going to use it', take the time to learn the basics and use them. Learning the basics won't take long, besides a page with tables would have to be very basic anyways, so you might as well just learn it.

- Ben

Re: Tables or CSS?

Being new to web development, and trying to lean RoR, I have to ask. Are you guy's using  Haml/Sass to do your CSS? I will be attempting to use the same Sass in some forms using Formtastic to give the site a uniform look.

Re: Tables or CSS?

danabrit wrote:

As I threw out in another thread, CSS and tables are not mutually exclusive. You can add CSS styling to tables, and there are instances (like the one jmbrink26 mentioned) where tables are the perfect tool for the job.

you are right there.. although most of the time i used pure css but sometimes i incorporate the two.. so, they could also come both..

Re: Tables or CSS?

RailsRhino wrote:

just because you don't know it, doesn't mean it's a good idea to forget about it for now... now is the time to learn!!!

I would under NO circumstance use tables for a page layout, use tables for tiny sections of data that you want displayed in certain parts on your page, but NOT for page layout.

CSS is not that hard to learn, you just need some tutorials and to take sometime to learn. You will get it sooner than later and be able to incorporate it into your page.

don't just say, 'ohh I don't know it so I'm not going to use it', take the time to learn the basics and use them. Learning the basics won't take long, besides a page with tables would have to be very basic anyways, so you might as well just learn it.

you are right there. you have a point.. css is not that hard to learn as long as you know the basics of HTML.. .. there are a lot of online tutorial sites to learn from..

Re: Tables or CSS?

Tables should never be used for layout intentions, they subsist to exhibit planar data only. The function of html is to produce a construction to the data.

Last edited by cyresjones (2010-09-29 01:23:25)

Re: Tables or CSS?

Tables:
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

CSS:
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Web Design Company India

Last edited by KevinAnderson (2011-01-06 03:54:46)

Re: Tables or CSS?

CSS, no tables!

We should not have to discuss it, but if you want to then:

* html doesn't describe the way your data will display, it only describe the structure of a document. <table> represent tabular data, period.
* css is precisely here to describe how your document will display on wich media.

When you do something like:

<!-- header top, menu left, footer bottom -->
<html>
  <body>
    <table id="layout">
      <tr><td colspan="2" id="header"> ... </td></tr>
      <tr>
        <td id="menu"></td>
        <td id="content"></td>
      </tr>
      <tr><td colspan="2" id="footer"> ... </td></tr>
    </table>
  </body>
</html>

* you'll never have a solution to position menu on the right without rewriting html.
* complexity of html is growing with complexity of design

By doing this

<html>
  <body>
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </body>
</html>
#menu {
  width: 20%;
}

#content {
  width: 80%;
}

#footer {
  clear: both;
}

/* want your menu on the left? */
#menu, #content {
  float: left;
}

/* want your menu on the right? */
#menu, #content {
  float: right;
}

* you can position elements where you want without rewriting html
* your html nodes hierarchy is bound to semantic
* you have no crappy informations like "colspan" that you'll have to find and change when you'll add a "column" in your design
* someone or something who reads your html do not have to deal with your display policy

Because C in CSS stands for "cascading", you can split your design to gain some productivity.

For example, you can split your design in 2 css, one for the structure (width, height, float, clear ...) and one for the theme (font color, background images etc...).
By doing this, you can rewrite the position of elements on your screen without duplicate informations about theme, and you won't have to duplicate fix or changes in the future.

You can also include your screen stylesheet for printers and include another one who will hide menu, footer and header to your printer.

Finally, all "display stuff" is separated into one or many files. Your browser will cache it. It won't download it each time you're visiting the page. With tables, all the "display stuff" about positioning is directly in the page (table / tr / td tags) and your browser will have to download it each time you're seeing the page.
CSS will help you to save bandwitch. This is the same policy than not keeping behavior (javascript) into the html file.

That's why css are magic and why you shouldn't use tables.

Regards

Last edited by Mulasse (2011-01-07 07:16:10)

Re: Tables or CSS?

NICE Post,  thanks.

I still use tables on occasion,  just out of haste or laziness, little things, simple layout stuff on static 'brochureware' type pages.

I used to use tables a lot more,  fortunately through a custom form builder, it was easy to change out tables for divs & css.   The biggest thing I noticed once I had done so was IE vs. other browser issues seem to occur less frequently.  Could of been just eliminating some improper TABLE related HTML?  It seems a little too easy to go astray when using TABLES,  not only are they improper, they're dangerous!

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: Tables or CSS?

I believe tables and frames are out of question ... big_smile
they're only for school exercises  big_smile

If you read new standards html5/css3 you will see that there is not an option! It is improper use for layout .
Although there is a backward compatibility from browsers

Re: Tables or CSS?

Tables are easy to implement but they are not a good choice. You must use CSS for web page designing as they are much better than tables in many aspects.