2009年06月12日

『table-layout』を使おう! その1

こんにちは。
溝上です。

今回は『table-layout』というプロパティを紹介したいと思います。

実は先日まで

先輩:「溝上君。今度のブログはtable-layoutについて書いてみなよ」
溝上:「え? 何ですかそれ?」


『table-layout』というプロパティがあることを知りませんでした・・・

そこで調べてみるとなかなか面白いプロパティだとわかりました。

私なりに簡単に説明するとこうなります。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdの幅が指定されていない場合、同じ幅になる
2.1行目のth,tdの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼tableの幅が指定されており、th,tdの幅が指定してない場合同じ幅になる


今回は『th,tdの幅が指定されていない場合、同じ幅になる』について紹介したいと思います。
それでは早速サンプルを紹介したいと思います。
(cssサンプル)
body {
  padding:15px;
}
.section {
  width:400px;
  padding-bottom:30px;
}
table {
  table-layout:auto;
  width:100%;
}
table.fixed {
  table-layout:fixed;
}
table th,
table td {
  padding:10px;
  border:1px solid #000000;
}
htmlコーディング例
<table>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>

<table class="fixed">
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>

それでは早速スクリーンショットを見ていただきましょう。
まずはtable-layoutにデフォルトであるautoを指定した場合です。

▼スクリーンショット(table-layout:auto)

※スクリーンショットは、windows Firefox3.0のものです。

いたって普通ですね。
列の幅がテキストの長さによって変わっています。
次はtable-layoutにfixedを指定した場合です。

▼スクリーンショット(table-layout:fixed)

※スクリーンショットは、windows Firefox3.0のものです。

すべての列の幅が同じ幅になりました。
ちなみにtableのwidthが指定されていないと同じ幅にはなりません。

table-layout:fixedを指定すると、tableのwidthからth,tdで指定されたwidthを引いた残りをwidthが指定されていないものに均等に割り振っているようです。

口ではうまく説明できませんので、サンプルをどうぞ。
(cssサンプル)
table .w50 {
  width:50px;
}
htmlコーディング例
<table class="fixed">
<tr>
<td class="w50">短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>
▼スクリーンショット(table-layout:fixed)

※スクリーンショットは、windows Firefox3.0のものです。

1つめのtdにwidth:50pxを指定したため、残り2つのwidthを指定していないtdに対して余った幅を均等に割り振っています。
thだけ幅を決めて、残りのtdの幅を同じにしたい・・・なんて状況は結構多いですよね。
そんな時、table-layoutを使えば便利だと思います。


次回は『1行目のth,tdの幅が2行目以降に適用される』『ページの表示速度がUPする』について紹介したいと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 18:04 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。