How to display database query results using tableless tech?

[ramirovarandas]

Hello to everyone!

I'm a web programmer since 1996 and always used table for display anything on sites that I've made. But now recently, I've been reading a lot of websites that says: "Tableless makes your design easier and more practical..."

I've been searching the web for many days looking for a tutorial or a simple code just to give me an idea of how to display database query results using tableless.

For what I've understood until now is that a DIV element can't have the same ID, right? So let's say that I want to display the results of my personal cd collection, how can I do that?

- Example -

With table I would use this (using PHP):

for($i = 0; $i < 10; $i++) {

  print "<table>";
  print "<tr><td>[img]cd_cover.gif[/img]</td></tr>";
  print "<tr><td>CD Title</td></tr>";
  print "<tr><td>CD Band Name</td></tr>";
  print "</table>";
  print "
";

}

If anyone can give me hint on how to do this, I would appreciate a lot.

Thanks,
Ramiro

[speed]

A table can be the correct way of displaying results, it's just tables should not be used for layout of the page.

You are right a <div> can't share ids but you can use class instead:

The CSS:

.myclass { font-size: 20px; color: #f00; }

The HTML:

<div class="myclass">This is line 1</div>
<div class="myclass">This is line 2</div>

You can have a look at http://www.artweblinks.com and http://www.worldsiteindex.com both of which generate pages from a database and are tableless.

With these I defined the CSS to create a single entry and then repeated the CSS for each result replacing the image and words.

If I was displaying data in the format you described (3 columns) I'd probably use a table.

[redcircle]

Tables were designed for tablular data. Using tables for database query results WOULD be the appropriate use of tables. I don't know why you want to not use them here.

[ramirovarandas]

Thanks for the replies!
I was wondering about the use of this technology to display data results for these reasons:

1. The results shows they're created, instead of waiting the close of the table or it's parent table.

2. Compare the size of a table and a tableless file for a database query result... it's almost half of the size... would be much more better.

But you have showed me things that I were searching for: answers! So now, I'll take a look at those websites and try to rearrange my designs using tableless and the data results using table with more CSS class.

Thanks for everything!