ミニ講座 第4回は、
tableタグ vol.2 です。
前回
vol.1
は、
基本 + 横・縦方向の セルの合体 でした。
今回 vol.2 は、
幅・高さの指定 + 背景色・背景画像 です。
幅・高さ
幅 → 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>
背景色・背景画像
背 景 色 → bgcolor="色コード"
背景画像 → background="画像url"
table tr td 指定。但し、backgroundは tr は 不可。 |
まずは、背景色!
■ 例1 table (全体) に指定
<table
bgcolor="lightyellow" border="1">
<tr>
<td>ワン</td>
<td>ツー</td>
<td>スリ</td></tr>
<tr>
<td>ワワン</td>
<td>ツツー</td>
<td>スリー</td></tr>
</table>
■ 例2 tr (行) に指定
<table border="1">
<
tr bgcolor="lightyellow">
<td>ワン</td>
<td>ツー</td>
<td>スリ</td></tr>
<tr>
<td>ワワン</td>
<td>ツツー</td>
<td>スリー</td></tr>
</table>
■ 例3 td (セル)に指定
<table border="1">
<tr>
<
td bgcolor="lightyellow">ワン</td>
<td>ツー</td>
<td>スリ</td></tr>
<tr>
<td>ワワン</td>
<
td bgcolor="lightyellow">ツツー</td>
<td>スリー</td></tr>
</table>
つぎに、背景画像!
■ 例1 td (セル) に指定 + サイズ指定
<table border="1">
<tr>
<td
background=".gif (.jpg) " width="88" height="31"></td>
<td>ツー</td>
<td>スリ</td>
</tr>
</table>
■ 例2 table (全体) に 指定
タイリングしてしまうので、画像の大きさは テーブルと同じがいいな。
<table
background=".gif (.jpg) " width="300" height="70" border="1">
<tr>
<td></td>
</tr>
</table>
■ 例3 +画像の 繰り返し指定
CSS指定することで、上の例を
画像を 繰り返さない指定 (no-repeat) や
横方向 (repeat-x) 、縦方向 (repeat-y) の指定も できます。
<table
style="background-repeat: repeat-x" width="300" height="70"
background=".gif (.jpg) " border="1">
<tr>
<td></td>
</tr>
</table>
次回
tableタグ編3は、表示位置・文章の回り込みについての予定。
* Windows IE 及び アメブロで検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
*第1回 HTMLとCSSの概要
*第2回 色をつける!
*第3回 → table vol.1 基本 + 横・縦方向の セルの合体
参考になりましたら、クリックしてくださると 嬉しいです。