title: How to set image position inside <td> tag to be on top-left corner while text is on the left-bottom
body: <p>I have two pawns and I want to set them on the top-left corner <strong>while</strong> the text (cell number) is on left-bottom.  </p>
  
  <p>This is what I have:<br>
  <img src="https://i.stack.imgur.com/RekV7.png" alt="enter image description here"></p>
  
  <p>This is what I <strong>want</strong> to have:<br>
  <img src="https://i.stack.imgur.com/gFsQu.png" alt="enter image description here"></p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>td {
      width: 80px;
      height: 80px;
      text-align: left;
      vertical-align: bottom;
      border: 1px solid black;
  }
  
  .soldiers
  {
      width:20px;
      height:20px;
  }
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td class="oddCellBorder" row="0" col="0"&gt;57
  &lt;img src="Resources/images/player_2.png" class="soldiers"&gt;
  &lt;img src="Resources/images/player_1.png" class="soldiers"&gt;
  &lt;/td&gt;
  &lt;td class="evenCellBorder" row="0" col="1"&gt;58&lt;/td&gt;
  &lt;td class="oddCellBorder" row="0" col="2"&gt;59&lt;/td&gt;
  &lt;td class="evenCellBorder" row="0" col="3"&gt;60&lt;/td&gt;
  &lt;td class="oddCellBorder" row="0" col="4"&gt;61&lt;/td&gt;
  &lt;td class="evenCellBorder" row="0" col="5"&gt;62&lt;/td&gt;
  &lt;td class="oddCellBorder" row="0" col="6"&gt;63&lt;/td&gt;
  &lt;td class="evenCellBorder" row="0" col="7"&gt;64&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>