Question

I need help with a HTML layout.

I need to show 3 columns for each table row

Column#1 just has some text in it

Column#2 Has a inner table, with either 1 or 2 rows depending on the contents of Column#3

Column#3 Has x number of rows, each word in the row has a name of a food item. Healthy items are listed first, and (if any) unhealthy items are listed.
If there are ONLY healthy items, column#2 will have 1 row with the word “HEALTHY” in it.
Otherwise, it will display HEALTHY, and the 2nd row will have UNHEALTHY (and it has to lineup with column#3)

So it would look like:

Column#2        Column#3
HEATHLY         Apple
                Pear

Or it may look like:

Column#2        Column#3
HEATHLY         Apple
                Pear
UNHEALTHY       Coffee crispt
                Chocolate milk

And each row in column #2 and column#3 should have grids (border top/bottom) for each row.

How can I do this?

Note: The row border in column#2 should lineup with the row borders in column#3.

I hope I explained this clear enough.

Answer 1

I’m not sure what you’re asking for in particular so here goes:

<table cellspacing="0">
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td rowspan="4">Col 1 text goes here</td>
        <td rowspan="2">HEALTHY</td>
        <td>Apple</td>
    </tr>
    <tr>
        <td>Pear</td>
    </tr>
    <tr>
        <td rowspan="2">UNHEALTHY</td>
        <td>Toffee crisp</td>
    </tr>
    <tr>
        <td>Chocolate milk</td>
    </tr>
</table>

And some pseudo code to generate it:

foreach c2 in col-2-items
{
    foreach c3 in c2.col-3-items
    {
        <tr>
            if c3 is first in c2.col-3-items
            {
                if c2 is first in col-2-items
                {
                    <td rowspan="all-items.count">Col 1 text goes here</td>
                }
                <td rowspan="c2.col-3-items.count">c2.text</td>
            }
            <td>c3.text</td>
        </tr>
    }
}

Apply top and bottom borders with css. Note also the cellspacing=”0″ on the table.

<style>
table
{
    border-collapse: collapse;
}
td
{
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
</style>