Strange tables

[goody11]

Hey guys. I'm trying to get an idea on how to code a certain table. The table has 6 cells: 3 columns and 2 rows.
Each cell needs to be filled with information from a MySQL database. The columns are completely even. However, the second row is very uneven depending on how much information is in each cell of the first row. Could anyone give me an outline of how I be able to code this? Thanks.

[blocblue]

I'm not sure I understand the problem. Are you talking about creating an HTML table?

If so, you can ensure even columns by explicitly setting a column width. And if you omit a row height, the row will automatically expand to enclose the cell content.

[rotten69]

However, the second row is very uneven depending on how much information is in each cell of the first row

How is the second row dependent on the data stored in the first?

Could anyone give me an outline of how I be able to code this?

Definetley. Before we explain anything, we need to understand exactly what you're trying to do. As far as the problem is concerned, you're getting the data from MySQL database and echoing it to your users in a browswer. Is that right? My solution at this stage is to make a static HTML table with all the data you want in it because it is only one small table. Unless, you're trying to do something different.

cheers,

[goody11]

Ok, I was writing the file in php because there's much more to the site than this table; I just wasn't thinking and probably should've posted this on the HTML portion of daniweb. Anyways, I'm going to try to explain this table in great description:
The table has 3 columns each with an even spacing; that I have no issue with. The table also has 2 rows. Each cell pulls a random amount of data from the MySQL database. Pulling the data is not an issue for me either. Here is my problem: Each cell in the first row of each of the 3 columns will fill with data. Each cell of that first row will contain differnt amounts of data. Actually, all the cells in this table contain different amounts of data pulled from that MySQL database.Therefore, the length of data in each column is different in the first row. As for the the second row, when each of the cells gets filled with data, I want it to start printing that data nearly right below the data that's in the cell above it. With each cell in the first row having different amounts of data, the starting places of the cells within the second row will vary (or at least that's the effect that I'm trying to create). Here are 2 example pictures of what I mean (each cell is assumed to be filled with data).

Sorry that it doesn't look the best, but hopefully you understand now. Each line is the borders. Also, ignore the third row, as I already know how to do that. I'm sorry that I wasn't very clear in my first post. Hopefully this one cleared up exactly what I want to do.

[blocblue]

That does help to clarify your problem.

The obvious thing to point out is if you want the content blocks in each column to flow immediately one after the other, then a table will likely only complicate your problem given the fixed nature of the relationship between rows and cells.

Have you considered using divs to build your layout? For example and using Lorem Ipsum for the variable length content:

<div class="data-container">
    <div class="column column-1">
        <div class="cell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh felis, bibendum ut aliquet sed, dapibus eget ligula.</p>
        </div>

        <div class="cell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh felis, bibendum ut aliquet sed, dapibus eget ligula.</p>
        </div>
    </div>

    <div class="column column-2">
        <div class="cell">
            <p> Mauris eu consectetur magna. Donec id nulla in massa ornare egestas ut non nibh. Fusce varius pellentesque adipiscing. Etiam erat leo, adipiscing a gravida at, molestie vitae ligula. Maecenas a euismod dolor. Vestibulum molestie placerat diam, et tincidunt ante egestas ac. Vivamus quis enim at massa suscipit interdum. Donec ac neque urna, rutrum ullamcorper lorem. Duis semper vulputate libero, eget elementum diam accumsan sed.</p>
        </div>

        <div class="cell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh felis, bibendum ut aliquet sed, dapibus eget ligula.</p>
        </div>
    </div>

    <div class="column column-3">
        <div class="cell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh felis, bibendum ut aliquet sed, dapibus eget ligula.</p>
        </div>

        <div class="cell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh felis, bibendum ut aliquet sed, dapibus eget ligula.</p>
        </div>
    </div>
</div>

<style type="text/css">
.data-container {border:1px solid #333; display:block; float:left; width:902px;}
.data-container .column {display:block; float:left; width:300px;}
.data-container .column-2 {border-left:1px solid #333; border-right:1px solid #333;}
.data-container .column .cell {border-bottom:1px solid #333; display:block; float:left; padding:5px 10px; width:280px;}
.data-container .column .cell:last-child {border:none;}
</style>

[goody11]

That's exactly what I wanted (and rather silly of me for totally forgetting that I could use divs). Thanks for your help. But I am just wondering as a hypothetical situation, what if lets say I'm using Microsoft Excel Web Querie to import HTML tables, so in other words, my above situation would've had to be a table. Would've it had been possible?

[blocblue]

I wouldn't think it'd be possible to achieve that layout using tables, without a lot of hassle - i.e. more hassle than it would be worth.

One option, bastardising the use of tables would be to insert multiple div containers within a single table cell. Thus, you only use a table to create a three columns, single row layout.

<table>
    <tr>
        <td>
            <div class="cell"></div>
            <div class="cell"></div>
        </td>

        <td>
            <div class="cell"></div>
            <div class="cell"></div>
        </td>

        <td>
            <div class="cell"></div>
            <div class="cell"></div>
        </td>
    </tr>
</table>

[rotten69]

Oh Okay. That is what you want. The question wasn't clear enough.

[goody11]

Yea, I guess in theory that you could do that. Anyways, thanks for the help :)

[diafol]

I'm not sure this is php, but it can help with a 'template'.
Have your skeleton HTML template with divs. Above the doctype declaration or with your include files, get all the various data for the sections into variables, then have something like:

<div id="wrapper">
    <div id="left">
        <div id="left_top"><?php echo $left_top;?></div>
        <div id="left_bottom"><?php echo $left_bottom;?></div>
    </div>
    <div id="main">
        <div id="main_top"><?php echo $main_top;?></div>
        <div id="main_bottom"><?php echo $main_bottom;?></div>
    </div>
    <div id="right">
        <div id="right_top"><?php echo $right_top;?></div>
        <div id="right_bottom"><?php echo $right_bottom;?></div>
    </div>
    <div id="footer"><?php echo $footer;?></div>
</div>

I know you say there's no prob with getting data out of the DB. If column heights are your problem, you could look at the new CSS3 multicolumns (one example of a tut here: http://www.quirksmode.org/css/multicolumn.html). Alternatively, look at js solutions for culumn heights (one example here: http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/).

//EDIT

darn - I just noticed - my view of this thread was a couple of hours old - missed the intervening posts - apologies one and all. (shakes own head)