行の高さが不均一なテーブル

Question

HTMLテーブルでこの問題が発生しました。左の列には3行（私はあなたの下に表示されている画像でちょうど遊んでいた）があります。右は1です。左の列の最初の行の左上隅にテキストを配置します。テキストを配置することはできますが、左上にはありません。

これは私のコードです：

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
     <td style="width: 50%;" rowspan="7"><img src="http://chorix.be/wp-content/uploads/2017/02/Achtergrond.gif" alt="" width="570" height="570" class="alignnone size-full wp-image-378" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p>&nbsp;</p>

誰もがこの上で私を助けてもらえますか？

Answer 1

私はあなたが探しているものはvertical-alignと信じています。デフォルトでは、テーブルのセルのためにmiddleに設定されていますが、topに設定することができます

<td style="vertical-align: top"> ... </td> 

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="width: 50%; vertical-align: top;">a</td> 
 
     <td style="width: 50%;" rowspan="7"><img src="http://chorix.be/wp-content/uploads/2017/02/Achtergrond.gif" alt="" width="570" height="570" class="alignnone size-full wp-image-378" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="width: 50%;">a</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p>&nbsp;</p>