HTMLネストされたテーブルのレイアウト

Question

ここでは、HTMLレイアウトに関する簡単な質問があります。下のコードはそれを示しています。 トップテーブルの各セルには、サブテーブルがあります。私は、使用している（トップテーブルの）セル内の全体のスペースを取るように各サブテーブルをしたいと思います。しかし、これは起こっていることではありません。実際、各サブテーブルは、それ自身のコンテンツを表示するために必要なスペースのみを使用しています。私が望む結果を得るためにコードを修正するにはどうすればよいですか？

<table> 
 
    <tr><td> 
 
     <table bgcolor=#334433> 
 
      <tr><td> 
 
       Al 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
    <tr><td> 
 
     <table bgcolor=#334433> 
 
      <tr><td> 
 
       Peter Wells 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
    <tr><td> 
 
     <table bgcolor=#334433> 
 
      <tr><td> 
 
       World Champions in the 20th century 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
</table>

Answer 1

幅を指定します。ここでは

<table> 
    <tr><td> 
     <table bgcolor=#334433 style="width:100%"> 
      <tr><td> 
       Al 
      </td></tr> 
     </table> 
    </td></tr> 
    <tr><td> 
     <table bgcolor=#334433 style="width:100%"> 
      <tr><td> 
       Peter Wells 
      </td></tr> 
     </table> 
    </td></tr> 
    <tr><td> 
     <table bgcolor=#334433 style="width:100%"> 
      <tr><td> 
       World Champions in the 20th century 
      </td></tr> 
     </table> 
    </td></tr> 
</table> 

Answer 2

.tbl{ 
 
\t width:100%; 
 
}

<table> 
 
    <tr><td> 
 
     <table class="tbl" bgcolor=#334433 > 
 
      <tr><td> 
 
       Al 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
    <tr><td> 
 
     <table class="tbl" bgcolor=#334433> 
 
      <tr><td> 
 
       Peter Wells 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
    <tr><td> 
 
     <table class="tbl" bgcolor=#334433> 
 
      <tr><td> 
 
       World Champions in the 20th century 
 
      </td></tr> 
 
     </table> 
 
    </td></tr> 
 
</table>

はコードです：