How to set image position inside <td> tag to be on top-left corner while text is on the left-bottom

Question

I have two pawns and I want to set them on the top-left corner while the text (cell number) is on left-bottom.

This is what I have:

This is what I want to have:

CSS:

td {
    width: 80px;
    height: 80px;
    text-align: left;
    vertical-align: bottom;
    border: 1px solid black;
}

.soldiers
{
    width:20px;
    height:20px;
}

HTML:

<tr>
<td class="oddCellBorder" row="0" col="0">57
<img src="Resources/images/player_2.png" class="soldiers">
<img src="Resources/images/player_1.png" class="soldiers">
</td>
<td class="evenCellBorder" row="0" col="1">58</td>
<td class="oddCellBorder" row="0" col="2">59</td>
<td class="evenCellBorder" row="0" col="3">60</td>
<td class="oddCellBorder" row="0" col="4">61</td>
<td class="evenCellBorder" row="0" col="5">62</td>
<td class="oddCellBorder" row="0" col="6">63</td>
<td class="evenCellBorder" row="0" col="7">64</td>
</tr>

Answer 1

Wrap the number in a span and position it at the bottom, and vertical-align: top; everything else.

td {
    position: relative;
    vertical-align: top;
    width: 80px;
    height: 80px;
    text-align: left;        
    border: 1px solid black;        
}

td span {
    position: absolute;
    bottom: 0;
}

<table>
    <tr>
        <td>
            <span>57</span>
            <img src="http://placehold.it/20x20/ff6a00/ff6a00" alt="" />
            <img src="http://placehold.it/20x20/fb235e/fb235e" alt="" />
        </td>
    </tr>
</table>