html - 表内のテキストと画像の位置合わせ

Question

画像がテキストの下部に配置されるように、画像をテーブル内のテキストに配置しようとしています。

テーブルの現在のコードは次のとおりです。

<table class="table table-striped">
    <thead>  
      <tr>  
        <th><h4><img src="image.png" />Title1</h4></th>  
        <th><h4><img src="image2.png" />Title2</h4></th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr>  
        <td>Subtitle1</td>
        <td>Subtitle2</td>
      </tr>  
      <tr>  
        <td>Subtitle1</td>
        <td>Subtitle2</td>
      </tr>
    </tbody>
</table>

現在、次のようになっています。

画像をテキストの下部に揃えるにはどうすればよいですか?

Answer 1

たぶんこれでいける…

<table class="table table-striped">
  <thead>  
    <tr>  
      <th><h4><img src="image.png" style="vertical-align: text-bottom;" />Title1</h4></th>  
      <th><h4><img src="image2.png" style="vertical-align: text-bottom;" />Title2</h4></th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>Subtitle1</td>
      <td>Subtitle2</td>
    </tr>  
    <tr>  
      <td>Subtitle1</td>
      <td>Subtitle2</td>
    </tr>
  </tbody>
</table>

スタイル属性 -VERTICAL-ALIGN を使用し、値 TEXT-BOTTOM を割り当てます。