[SOLVED] If html tables are "bad" how to output data ?

[lonewolf217]

Sorry if this is in the wrong forum, but I have heard there may be some better way to display data using CSS than using HTML tables if I am outputting data via PHP from a database.

 

Any suggestions on where I can start looking ?

 

I dont particularly have problems with using tables on my site but I am always looking to try new things

[TheFilmGod]

It took me about one year to fully master the art of css. If you are willing to commit yourself, then you need to go to barnes and nobles and buy a good css book. Read it all the way through and then read it a second time through while coding stuff on the computer. It really isn't easy and there is no "secret do this and that, and you're done." It is extremely complicated.

[lonewolf217]

well I understand the concepts of CSS, I just am a little confused on the theory of the topic. 

 

I often hear that css is better than html tables, but then they go ahead and use tables anyway, just with CSS classes defined to style them so I am a little confused about it

[bronzemonkey]

Don't use tables for layout...use them to display tabular data.

 

You use css to style html...any type of html.

[lonewolf217]

thanks, that explains the concept a little better

[haku]

CSS can be used to both style things, and to position things. You have obviously learned how to style things using CSS, setting the widths of tables, the sizes of fonts, or background images etc. Where it gets difficult is using CSS to position things. It's not easy, which is why there is this whole section of the forum on it!

 

There is nothing wrong with tables for tabular data - a calendar, or a cross-referencing of data types etc. But for positioning things on a page, CSS is a much better option, and will leave your code much easier to read, and keep it separated into style, and content, which is a very important distinction.

[JasonLewis]

It also becomes extremely painful when most major browsers have different ways of parsing the CSS (although they are getting better, except for IE).

[haku]

Of the major browsers, it's really only IE that parses CSS in its own way. The others are generally pretty standard across the board. But IE really screws things up.

[TheFilmGod]

I think IE7 is up to par. Sure, it would be nice for it to have display setting such as "display: table-cell;" etc. but overall it isn't too bad. It's IE6 and any lower version that is the major pain in the neck. - fortune for me, I have stopped supporting ie6 altogether.

[JasonLewis]

I haven't, because there are loads of people out there that still use it. Unfortunately.

[bronzemonkey]

I haven't, because there are loads of people out there that still use it. Unfortunately.

 

And this is exactly why anyone who does client work has to support IE6. To not do so is unacceptable I'm afraid.

[TheFilmGod]

I haven't, because there are loads of people out there that still use it. Unfortunately.

 

And this is exactly why anyone who does client work has to support IE6. To not do so is unacceptable I'm afraid.

 

I don't do clients, I just do websites for myself.

[haku]

Then you have no worries! But for client based sites, IE6 needs to be supported. I don't support it on my own personal site (actually, I don't even support IE7), but for client sites I make sure that they are viewable in IE6, and if the client is willing to pay, I will even add javascript to emulate CSS techniques I use that work in FF and IE7.

[JasonLewis]

If a site is being built for a client then you should also make the site function without the use of javascript. You need to satisfy the majority, and unfortunately a lot of people are using IE6 and a few still have javascript disabled. It's a tough world us web designers live in, I just hope that IE8 will be an improvement and everyone will upgrade to it (or everyone upgrades to firefox, which would be a perfect world. )

[haku]

I don't know if that comment was directed at me, but if it was, the site functions fine without javascript, but IE6 being what it is, many of the CSS rollovers etc don't work in IE6, and require javascript solutions to mimic what can be done entirely in CSS in other browsers. If the client doesn't care about that, then they don't have to pay for it, the site still works fine, it just doesn't look as good as in IE7, FF and Safari.

[JasonLewis]

Yeah little things like that I suppose. I usually don't worry about IE6 and it's inability to support the pseudo-class on things like lists, etc.

I was basically saying that it's good practice to have a site that doesn't need javascript to operate properly, because trust me... I've seen a lot of site's where they are using javascript to much, and for things like error detection with forms, then not checking for errors server-side.

Very silly. Lol.

[haku]

I couldn't agree more. I ensure everything works without javascript before adding it.

 

The only exception would be flash files.

[efficacious]

the only difference between so called "css layouts" and "table layouts" isn't what most of you are percieving it to be...

 

 

the so called "css layout" is simply a layout "Structured" with css meaning you will be using css commands to create the actual sctructure of the layout.. instead of the old "table layout" where you use the HTML table tags to create the layout..

 

both ways are effcient but the whole controversy is over standards.. HTML is sposed to be just a "markup" language.. and css the beefy stylist behind it..

 

the problem is that html came along long before css and programmers required something to style their pages..

 

so they started implementing other commands to the table tags.. such as color features ect...

 

In all reality you could very well use tables and still create a tabless layout..

 

I say that because... all you doing for "css layout" is using a different tag for you html pages.. such as DIV tags and definition list tags..

 

so if you really think about it.. the new "awesome" "better" css layouts are actually just html hacks.

Your using css to hack about def list tags and division tags..

 

But because of the whole browsers not conforming to standards problem that has plagued the internet for so long.. the "css layouts" have proven to allow more functionality and allow more creativity in web pages..

 

simply by "hacking" the browsers to respond the same way to code.

 

so in conclusion.. "css layouts" are html hacks that are a desperate step towards getting some sort of conformity from browsers.

 

tables:

<table>
<tr>
  <td>THIS IS A TABLE LAYOUT</td>
</tr>
</table>

 

css:

<div>
<ul>
  THIS IS A CSS LAYOUT
</ul>
</div>

<style>
EXTRA CODE TO STRUCTURE THE DIV AND DEF TAGS
</style>

[JasonLewis]

I disagree with you 100%, but I don't have time right now to argue. I'll write something tomorrow when I wake up, because I am tired. But seriously, I don't agree with you at all. Sorry.

[efficacious]

hey thats your opinion.. :-\

[haku]

And that of a lot of other people.

[DarkWater]

I disagree with you 100%, but I don't have time right now to argue. I'll write something tomorrow when I wake up, because I am tired. But seriously, I don't agree with you at all. Sorry.

 

I agree with you, ProjectFear.  CSS is not a replacement for table layouts, nor is an "html hack" to just make layouts conform to w3 standards.  CSS allows COMPLETE control over every element over your page, but that kind of precision comes with a pretty decent learning curve.  It's certainly more appealing to create table layouts because of the simplicity, but that forever condemns web pages to the boxy layouts that have become the cause of the monotony of the pages on the Internet.  (That and pre-made PHP scripts and other scripts that people have no idea how to use, making their site look the same as everyone else's.  Funny, from the perspective of people who actually know what they're doing, like all of us.  Most of us, at least, lol.) >_<  Where CSS truly shows it power is in the unique layouts that break the mold and diverge from standard table layouts.

[TheFilmGod]

Hey, Efficacious - how many years of experience do you bring to the table? 1, 2 years? Well, I have been coding websites for over 3 years and I will tell you that css is amazing. The key difference between the two coding techniques is how you organize tags. You gave an example how writing a paragraph in css isn't any more efficient than tables. That's true, but you are forgetting that dynamic websites grow in complexity. You don't JUST have a paragraph. You have heading tags, list, pictures, navigational menus... the list grows on.

 

So I take the simpliest example of a complex model:

 

When you want to create a separate subset in another div, it is necessary to nest tables in tabular layouts.

 

<table>
<tbody>
<tr>
 <td>
      <table>
       <tbody>
          <tr>
             <td>HELLO!</td>
          </tr>
       </tbody>
       </table>
 </td>
</tr>
</tbody>
</table>

 

CSS is amazing because all that jazz in tables translates to this in css:

 

<div class="blah">
  <div class="foo">Hello</div>
</div>

 

People who argue that tables are better than css are either inexperienced or in denial.

[haku]

I find as often as not, it's the old school guys who actually have been coding for a long time, but have never actually taken the time to learn to do CSS based layouts. I've never heard anyone who has taken the time to learn to layout with CSS argue that tables are better.

[DarkWater]

I find as often as not, it's the old school guys who actually have been coding for a long time, but have never actually taken the time to learn to do CSS based layouts. I've never heard anyone who has taken the time to learn to layout with CSS argue that tables are better.

 

I honestly have no idea how someone can say that tables are even remotely better. CSS is so great. >_<