table講座 「幅・高さの指定」 です。
幅・高さ
幅 → width="" 高さ → height="" 指定できる タグは、table と td に対して。 "" に入るのは、数値(px)、% など。 tdに % 指定すると、tableの幅に 対する割合と なります。 widthは table指定、heightは td指定が、優先されます。 |
■ 例1 px 指定
表全体に、
幅 300px、高さ 50pxを 指定。
+左端セルの幅 150px。
残り2つのセルは、残った150pxで 等分されていますね。
(但し、入れる内容で、可変します。)
今回も、わかりやすくするため、枠線入りです。
<table border="1">
<table border="1"
width="300" height="50">
<tr>
<
td width="150">トコトコ</td>
<td>テクテク</td>
<td>ハラハラ</td>
</tr>
</table>
■ 例2 %指定 + 優先順位
次に、上と同じ表を %指定 します。
左端のセルの幅を 70%
全体に対して、左端のセルが 7割になってるかな。
+さらに、
左端セルの 高さ 70px に指定。
tableに 高さ50px 入れていますが、tdの高さ 70pxになりました。
幅 widthは table指定、高さ heightは td指定が 優先です。
<table border="1"
width="300" height="50">
<tr>
<
td width="70%" height="70">トコトコ</td>
<td>テクテク</td>
<td>ハラハラ</td>
</tr>
</table>
次回
table講座 vol.3は、
背景色・背景画像について です。
* Windows IE 及び JUGEMで検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
現在、コメント承認制を 取り入れています。
発見次第 すぐ公開にしますので、少々お待ち下さいませ。
宣伝や 不適切なコメントは ご遠慮下さい。
サックリ 削除しちゃいます。