table-layoutプロパティは、テーブル(表)の表示方法を指定する際に使用します。
指定できるのは、テーブル(表)の列幅を自動レイアウトにするか(auto)、固定レイアウトにするか(fixed)についてです。いずれの場合も行の高さは自動的に算出されます。
初期値のtable-layout:auto; では、ブラウザはテーブル(表)全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、
table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、
表示が速くなるメリットがあります。
table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列(セル)の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。
<p>table-layout: auto;の場合</p>
<table border=”1″ width=”100%” style=”table-layout: auto;”>
<tr>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>メニュー</font></th>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>説明</font></th>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>豆知識</font></th>
</tr>
<tr>
<td bgcolor=”#99CC00″>ナポリタン</td>
<td bgcolor=”#FFFFFF”>ケチャップ味のパスタ</td>
<td bgcolor=”#FFFFFF”>ナポリタンというメニューは実はイタリアにはない</td>
</tr>
<tr>
<td bgcolor=”#99CC00″>ぺペロンチーノ</td>
<td bgcolor=”#FFFFFF”>ニンニクと唐辛子とオリーブオイルのパスタ</td>
<td bgcolor=”#FFFFFF”>ぺペロンチーノとは唐辛子のこと</td>
</tr>
<tr>
<td bgcolor=”#99CC00″>ボンゴレビアンコ</td>
<td bgcolor=”#FFFFFF”>あさりのパスタ</td>
<td bgcolor=”#FFFFFF”>ボンゴレとはあさり、ビアンコとは白のこと</td>
</tr>
</table>
<p>table-layout: fixed;の場合</p>
<table border=”1″ width=”100%” style=”table-layout: fixed;”>
<tr>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>メニュー</font></th>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>説明</font></th>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>豆知識</font></th>
</tr>
<tr>
<td bgcolor=”#99CC00″>ナポリタン</td>
<td bgcolor=”#FFFFFF”>ケチャップ味のパスタ</td>
<td bgcolor=”#FFFFFF”>ナポリタンというメニューは実はイタリアにはない</td>
</tr>
<tr>
<td bgcolor=”#99CC00″>ぺペロンチーノ</td>
<td bgcolor=”#FFFFFF”>ニンニクと唐辛子とオリーブオイルのパスタ</td>
<td bgcolor=”#FFFFFF”>ぺペロンチーノとは唐辛子のこと</td>
</tr>
<tr>
<td bgcolor=”#99CC00″>ボンゴレビアンコ</td>
<td bgcolor=”#FFFFFF”>あさりのパスタ</td>
<td bgcolor=”#FFFFFF”>ボンゴレとはあさり、ビアンコとは白のこと</td>
</tr>
</table>
table-layout: auto;の場合
メニュー | 説明 | 豆知識 |
---|---|---|
ナポリタン | ケチャップ味のパスタ | ナポリタンというメニューは実はイタリアにはない |
ぺペロンチーノ | ニンニクと唐辛子とオリーブオイルのパスタ | ぺペロンチーノとは唐辛子のこと |
ボンゴレビアンコ | あさりのパスタ | ボンゴレとはあさり、ビアンコとは白のこと |
table-layout: fixed;の場合
メニュー | 説明 | 豆知識 |
---|---|---|
ナポリタン | ケチャップ味のパスタ | ナポリタンというメニューは実はイタリアにはない |
ぺペロンチーノ | ニンニクと唐辛子とオリーブオイルのパスタ | ぺペロンチーノとは唐辛子のこと |
ボンゴレビアンコ | あさりのパスタ | ボンゴレとはあさり、ビアンコとは白のこと |