実録！ホームページ制作者の声

HTMLサンプル =========================================
<table>
   <tr>
     <th>見出しテキスト</th>
     <th>見出しテキスト</th>
     <th>見出しテキスト</th>
   </tr>
   <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
   </tr>
</table>

<table>
   <tr>
     <th>見出しテキスト</th>
     <th>見出しテキスト</th>
     <th>見出しテキスト</th>
   </tr>
   <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
   </tr>
</table>

CSSサンプル =========================================
table{
width:100%;
table-layout:fixed;
}

このようにセル数が同じの二つのテーブルが表示される場合、table-layout:fixed;を指定しないと、テキスト量によってセル幅は変わってしまい、上下のテーブルに統一感がなくなってしまいます。このとき、table-layout:fixed;を記述することで、セルごとにwidth指定をしなくても等分されて表示されます。その結果、上下テーブルのセル幅はきれいに揃います。

上段に見出しセル、下段から通常セルといったように、セルが均等幅になった方がきれいに見える場合にtable-layout:fixed;は効果を発揮します。また、colspan属性を使っても整った表組みが可能です。

HTMLサンプル =========================================
<table>
   <tr>
     <th>見出しテキスト</th>
     <td>テキスト</td>
     <td>テキスト</td>
   </tr>
</table>

<table>
   <tr>
     <th>見出しテキスト</th>
     <td colspan="2">見出しテキスト</td>
   </tr>
</table>

上のサンプルのような表にtable-layout:fixed;を適用すれば、やはり、上下のテーブルはきれいにそろいます。セルごとに幅の指定などすることもなく、colspan属性だけで表組みをしても面白いかもしれませんね。このように均等幅の表組みや、複数の表のセル幅を完全に統一させたい時などに有効なtable-layout:fixed;を是非使ってみてください。

最後に注意する点として、テーブルの幅指定は必ずしたほうがいいでしょう。IEなどでは自動的に最大幅になりますが、Safariなどのブラウザでは表示テキストの最小値に合わせた幅になってしまいます。

この点にさえ気をつければ、後はあなたの工夫次第で見やすい表の出来上がりですよ。