Question

I have a table grid layout that I have styled ready for printing, however I am having an issue trying to align a thumbnail image to the left, and then two rows along side next to the thumbnail.

Not sure how best to align this correctly using tables, as I am used to using div’s.

I have the code below here: –
http://jsfiddle.net/nCTFe/

So basically [FIRST LINE and SECOND LINE] need to be like the first table but alongside the image on the left, at the moment mine keeps sitting underneath it!

Any help would be great, the fiddle demonstrates this better!

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="30%" class="bottom_bdr stocklistItemImage">
                <img height="75" width="100" class="stocklist_thumb" 
                     border="2"  src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" 
                     alt="">
            </td>
        </tr>

        <tr>
            <td width="70%" class="vfeatures bdrBottom">
                <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>

        <tr>
            <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
            </td>
        </tr>
        <tr>
            <td class="" width="70%">&nbsp;</td>
        </tr>
    </tbody>
</table>

Answer 1

You’ll want to get a basic understanding of how HTML tables work. <tr> means “Table Row”, or a horizontal alignment of cells in the table.

So, in order to get the text to the right of the image, you need to put them in the same row. However, it looks like you want two rows (first line and second line) to both be in the same row as the image. You do this by setting rowspan on the first <td> (for the image) to 2, placing the first line in the same <tr> as the image, and then the second line in a new <tr>.

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td width="30%" class="bottom_bdr stocklistItemImage" rowspan="2>
                    <img height="75" width="100" class="stocklist_thumb" border="2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" alt="">
                </td>
                <td width="70%" class="vfeatures bdrBottom">
                    <span style="font-weight:bold">FIRST LINE:</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
            <tr>
                <!--No first cell here; it's already covered by the image td with the rowspan="2" -->
                <td width="70%" class="bottom_bdr a_top stocklistItemDescription">
                    <span style="font-weight:bold">SECOND LINE</span> Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis
                </td>
            </tr>
        </tbody>
    </table>

I’ve updated your fiddle here: http://jsfiddle.net/CjAMc/1/ (I also had to remove the last, blank <td> with the width of 70%.)

Further, the table layout in your fiddle is a mess, and you’re going to run into more problems there. I highly recommend you learn how tables work and start from scratch on this project.