table-layoutについてお勉強

まずtable-layoutってなに？

表組みのレイアウトする指定方法。
列の幅を、固定か自動か決められる。
表の高さは自動計算。

固定レイアウトにした場合、表示が早くなるという利点がある。

指定方法は？

① auto（初期値）
テーブルの幅は、セルの内容に合わせて自動。

② fixed
テーブルの幅は、指定して固定する。
指定がない列は、均等に分割される。

適用される要素は？

テーブル要素。

とりあえず、書いてみる

<table class="table1">
    <tr>
        <th>商品名</th>
        <th>在庫数</th>
        <th>価格</th>
    </tr>
    <tr>
	<td>ミネラルウォーター</td>	
	<td>150本</td>
	<td>100円（税抜）</td>
    </tr>
    <tr>
        <td>いろはす 温州みかん味</td>	
        <td>150本</td>
        <td>100円（税抜）</td>
    </tr>
</table>

.table1 {
    width: 500px;
    table-layout: auto;  /* テーブルレイアウト */
}
.table1,td,th{
    border: 1px solid;
}

table-layout: auto;   →   table-layout: fixed;

列幅を数値で指定したい時。

HTML <th>にクラス名を付与

        <th class="product_name">商品名</th>	
	<th class="product_num">在庫数</th>
        <th class="product_price">価格</th>

CSS追加

.table2 .product_name {
	width: 70%;
}

<table class="table1"> <tr> <th class="product_name">商品名</th> <th class="product_num">在庫数</th> <th class="product_price">価格</th> </tr> </table>