Positioning Photos in a Grid (HTML)

Question

Hey Everyone,

I've been trying to code this page for a while, but my biggest problem is that I can't seem to get the photos perfectly positioned. For some reason, there is a small bottom padding in each <td>which is messing things up.

Here is the table code:

<table>
    <tr>
        <td rowspan="2" style="height:353px;"><img src="danoconnor/img/photography/farm.jpg" height="353" width="470" alt="Farm" /></td>
        <td><img src="danoconnor/img/photography/paragliding.jpg" height="190" width="254" alt="Paraglider" /></td>
        <td rowspan="2"><img src="danoconnor/img/photography/cristo.jpg" height="353" width="230" alt="Cristo Redentor" /></td>
    </tr>
    <tr>
        <td><img src="danoconnor/img/photography/u2.jpg" height="154" width="254" alt="U2 at Fordham University" /></td>
    </tr>
</table>

My question is: how can I make the photogrid look like this?

Thanks!

Answer 1

If you're not using css, you can still do it by changing the opening table tag to:

<table cellspacing="0" cellpadding="0" border="0">

I'd also add valign="bottom" to the last td tag, to make sure that image doesn't have space underneath it:

<tr>
    <td valign="bottom"><img src="danoconnor/img/photography/u2.jpg" height="154" width="254" alt="U2 at Fordham University" /></td>
</tr>