Substituting tables for DIVs?

[pathfinder74]

Thought this might get a little more attention in the CSS discussions....


Is this possible?

I have this long ASP that renders looped information in, as far as I can see, one big table.

Reading all of this code is making me dizzy, trying to figure out where the break points are and at what point the information would execute a "loop" that would basically create additional DIV containers.

It's like this. You do a search for a name. The next screen shows the results. You click on a link in those results to narrow it down further.

Once you do that you get this page with tables nested within one big table.

What I want to do is create a container div to replace the big table, and for each additional table that gets nested inside the I want those to be DIVs as well.

So basically, once I have that control I can position them in order to create something a little cooler looking. I'll try to post an example in a few.

This is how it normally renders (http://www.mattandpamazon.com/inforMed/EnrollVerification.JPG)

I made this sample layout in Photoshop of how it potentially could look using CSS. (http://www.mattandpamazon.com/inforMed/enrollment_ver_results_2.jpg)

I've been going through the ASP page for the last hour or three trying to bust everything up so I have control of each individual section by putting it in a div container with it's own class name.

The person's name would be one div
The person's sex would be a div
The person's address would be a div.

Once I could get each one into a DIV I can position it to look like the concept layout.

What I'm concerned about is that the first one will output but each additional one won't.

I have each script in it's own DIV... not sure if that's how you would do it or not.

This is brutal.

------------------------------------------------------------------------

Right now I've replaces every <TR> and <TD> tag with an individual DIV and class.

I'm rendering it out now and putting colored borders to everything to I can see the divs that aren't filled with anything.

A few things have been replicated like I was hoping as a result of the loop code.... but the things that are aren't contained in their own div containers... they're just kind of free floating.

My plan was once I can get one div container with all of the information in it, and it reproduces itself except with the different information filling each div then I could go in, position the first one, and then I guess float them all so each additional on is to the right of the first one. Once they go so far to the right they'll just get knocked down to the next level.

Makes sense in my head.... just not sure if my head knows where all of this is even possible.

--------------------------------------------------------------------------

I think the problem I might run into is that unless each table of data gets put into it's own container.... the positioning for each individual DIV is going to mean that each addtional one that is rendered is going to try to occupy that same position.

If I can get them to render in their own container divs then the container divs will just bump each one over, but the position of the child divs will contained within the big one... if that makes an ounce of sense.

[Declan1991]

You should use a table for that. Tables are for tabular data, and that is tabular data.

[Centauri]

You should use a table for that. Tables are for tabular data, and that is tabular data.

This is interesting. The data itself would be tabular in the sense that each person would be a "row" (tr), and all of the information for that person would be "columns" (td's). As the information is not being presented in this manner, but more as information blocks, the question of using a table is a little blurred. To be marked up as a table, it would probably have to be presented as I indicated above which would provide numerous styling difficulties, and may well be impossible to display as required - I would suspect that the current table implementation is purely for layout and probably does not make much sense semantically in the context of tabular data.

Using separate divs for each bit of data would make no semantic sense to non-visual readers, being just a collection of numbers and words.

Possibly the best compromise might be nested lists - an unordered list of definition lists, where the definition term is the person's name and the definition description is an unorderd list of information. This may be the easiest way to style the information in the required format, but whether it is valid semantically may be open to question.

[pathfinder74]

So does that mean that the conceptual; version of what I did up in Photoshop wouldn't even be possible?

I started to get things to fill in to the DIV containers... the problem I was having was figuring out which code/scripting generated what information into what would normally be filled into the TR's and TD's.

My thought process was that whatever information is put into each individual the table cell could easily be filled into a DIV instead. I figured a table cell is essentially a locked down container that can't be moved but the data that fills it can be displayed anywhere onto a page.

The biggest problem I was expecting to run into is that where when you're using tables, the script is written to generate each additional row of results into it's own separate table.

My thoughts were that by having it fill a named DIV container instead it would only allow the information normally filled into one table would not allow it to be filled into additional DIV container since the DIv container has a specific name/class. If it didn't have a class name then I wouldn't have enough control to position it.

Does my thought process make sense or did I pretty much do a mockup that is more or less impossible to achieve without using tables?

When I was working on it yesterday I was able to get some of the information to fill into the classed div containers, just not everything. I figured this way because I wasn't putting the code into the right containers.

And if tables are a must could that concept image be achieved by constructing the table so everything fills in that way?

I could post the asp page with all the code in it but it probably wouldn't make any sense without being able to run it through visual a server that can render it into html, right? Here's the pages after it's been rendered in HTML. (http://www.mattandpamazon.com/inforMed/emp_ver_srch_HTML%20rendered.html).
You can kind of see the information that's been put into DIV containers... the same information that's shown in the table but repeated outside...

Best viewed in MS IE7... I wasn't laying it out for FF because they said the majority of people working with this are IE users.

[Centauri]

There isn't really a problem with your concept at all, and visually it should not be much of an issue. It's just deciding what the most appropriate html structure should be so that the information makes sense, especially to non-visual browsers. Putting the information into tables the correct way would make it very difficult to display the way you want.

The asp script should just be pulling the information from a database, so for someone who is familiar with asp (definitely not me - I have no desire to incorporate Microsoft technologies), outputting this data to any html structure should be straightforward.

[pathfinder74]

Here's what I was thinking for positioning it all in the tables. (http://www.mattandpamazon.com/inforMed/emp_ver_disp_tables.html)

I made the BG image the concept layout to put it in perspective