Formatting database queries without TABLE tags

Using XHTML/CSS rather than TABLE tags

[coopster]

How do others in this community display dynamic database queries using XHTML and CSS rather than the traditional row/column format using <TABLE> tags in HTML4? For example:

<table> 
 <tr> 
 <td>Column1 Heading Name:&nbsp;</td> 
 <td>column1data</td> 
 </tr> 
 <tr> 
 <td>Column2 Heading Name:&nbsp;</td> 
 <td>column2data</td> 
 </tr> 
<table> 

OK, I've hard-coded two rows read from a table; typically I would run a server side loop to build the structure. I want the columns to remain aligned. Any insight or examples would be deeply appreciated.

[BlobFisk]

In the case where it is data being thrown back, column header with rows of data, then a table is the perfect object to use!

Tabular Data = Perfect use of Table

In the example you give above, trying to use CSS would be overcomplicating the matter. Header and data? Use a table!

[wackybrit]

That said, you don't HAVE to use a table. So I'll answer the initial question.

Create a DIV that's the width and style you want as the overall table.. borders, background color, whatever you want.

Now create a DIV with a class of 'row', associate this CSS with it:

div.row { clear: both; padding-top: 10px; }

So now you have:

<div class="table">
<div class="row">
</div>
</div>

Let's say you want two columns in your table. Let's called them a and b. Put them in spans like this.

<span class="a">Left hand side</span><span class="b">Right hand side</span>

Now associate this CSS:

div.row span.a { float: left; width: 100px; text-align: right; }
div.row span.b { float: right; width: 335px; text-align: left; }

And so your main code now looks like this:

<div class="table">
<div class="row">
<span class="a">Left</span><span class="b">Right</span>
</div>
<div class="row">
<span class="a">Left</span><span class="b">Right</span>
</div>
<div class="row">
<span class="a">Left</span><span class="b">Right</span>
</div>
</div>

And so on.. all properly indented when you do it, of course :-)

This method is taken (stolen?) from an article over at AListApart, although I am weary of linking to things on here as it tends to be frowned upon. You can sticky me for the URL to the page which details this process, however. :)

Of course, the poster above is right. This is probably an opportunity where you should use a TABLE, but this is not true in every case. Sometimes you will need to use CSS/DIVs to remain standards compliant.

[coopster]

OK, I believe I'm starting to understand :o From my research it seemed that <TABLE> tags are frowned upon in XHTML/CSS standards. However, I'm finding that TABLEs are still used, just not for page layout/organization. (Yes, I'm finally pulling my standards up to XHTML/CSS compliance -- applause inserted here).

wackybrit, what standards compliance are you referring to here?
<< Sometimes you will need to use CSS/DIVs to remain
<< standards compliant.