幅の指定

表全体の幅

表全体の幅は、ブラウザがデータの長さをみて適当に決めます。（だから表は全体が読み込まれるまで表示されません）　必要ならば、これを指示することができます。

例えば次のようになります。

table {
   margin: 1% 5% 1.5% 10%;
   width: 80%;
}

ただし、指示に無理があるときは適当に指示を無視するようになっています。これはブラウザの設計により異なります。

列の幅

各列の幅も、ブラウザがデータの長さをみて適当に決めますが、必要ならば指示することができます。

td{
   width: 33%;
}

この場合の割合は table の時と異なり、表全体の幅を100%とした値になります。全部を33%とすると、全部の列をを同じ幅にするということになります。

これを実現するためには、スタイルシートに、

td.namae{width:10%;}
td.koe  {width:45%;}
td.koubutsu{width:45%;}

実は足して100%になる必要はありませんが、100%と大きく異なる場合にどのようになるかはブラウザの設計によるので、おおよそ100%になるようにしておいた方が無難でしょう。

bodyには class を指定しますが、最初の td だけでうまくいきます。

<table>
<tr>
<td class="namae">動物</td>
<td class="koe">鳴き声</td>
<td class="koubutsu">好物</td>
</tr>
<tr>
<td>いぬ</td>
<td>わんわん</td>
<td>ほね</td>
</tr>
................................

合計が100を超える場合は最後の列を減らしてあわせることが多いようです。

table タグの％指定はウインドウの幅を１００％としたもので、td th タグの％指定は table の横幅を１００％とするものです。

％の他に px(ピクセル)や emなども使えます。画像など幅が決まっているものを入れる場合はピクセル指定（width:400px; など）をする方がいいでしょう。