Table cell and block image

by audetwebdesign

HTML

<h3>Display image as an inline element</h3>
<table id="Table">
    <tr>
        <td id="td1">
             <h2>~ Curling ~</h2>
        </td>
        <td id="td2">
            <img src="http://placehold.it/200x200" width="100%" height="100%" border="2" alt="" />
        </td>
        <td id="td1">
             <h2>~ Curling ~</h2>
        </td>
    </tr>
</table>

<h3>Display image as a block element</h3>
<table id="Table" class="image-format">
    <tr>
        <td id="td1">
             <h2>~ Curling ~</h2>
        </td>
        <td id="td2">
            <img src="http://placehold.it/200x200" width="100%" height="100%" border="2" alt="" />
        </td>
        <td id="td1">
             <h2>~ Curling ~</h2>
        </td>
    </tr>
</table>

CSS

#td1 {
    width: 32%;
    vertical-align: text-top;
}
#td2 {
    padding-right: 15px; 
    padding-top: 15px; 
    background-color: pink; /* Optional - to visualize padding and line leading... */
}

.image-format #td2 img {
    display: block;
    /* alternatively: vertical-align: bottom; */
}