Rowspan Images of Variable Height so Text is Always Evenly Spaced

I am creating a display page for Photo Library. The page will have 4 photo attributes - File Name, Title, Date Taken, and Photographer Name, and also a preview thumbnail of the photo itself. I'm trying to achieve a consistent look, but unfortunately the images come in both landscape and portrait, so while the landscape images look consistent, the portrait images stretch out the distance between the attribute rows and therefor mess up the look.

My sample code is below, code on JSFiddle is located here - https://jsfiddle.net/tsmolskow/37hkszbq/61/

HTML Code:

<style>

.right-Padding{
   padding-right: 10px; 
}
img.resize {
   width: 50%;
   height: 50%;
   max-height: 125px;
}

</style>
<table style='font-size:15px'>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='5'><a href='" + href + "'><img class='resize' align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Title</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='6'><a href='" + href + "'><img class='resize' align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

</table>

CSS Code:

.right-Padding{
 padding-right: 10px; 
}
img.resize {
    width: 50%;
    height: 50%;
    max-height: 125px;
}

Solution

First off, your first image had a rowspan of 6, should be 4. Set a max-height for your images, I set it to 90px. Then remove the 25% width and height declarations from the <td> cells with the images. Finally, do you have to use tables? If you need a tabular layout, you really should be using CSS Grid.

table{
   width:100%;
}
td{
   border:solid 1px #000;
}
img{
   max-height:90px;
   
}

<table style='font-size:15px'>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
    <td rowspan='4'>
      <a href='" + href + "'>
        <img  align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'>
      </a>
    </td>
  </tr>
  <tr>
    <td width='50%' style='padding-right: 10px;'>Image Tile</td>
  </tr>
  <tr>
    <td>Image Date Taken</td>
  </tr>
  <tr>
    <td style='padding-right: 10px;'>Image Taken By</td>
  </tr>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
<td rowspan='6'><a href='" + href + "'><img  align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' style='padding-right: 10px;'>Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td style='padding-right: 10px;'>Image Taken By</td></tr>

</table>