mamohoのＨＰ作成講座

表の大きさを指定してみよう

●　表の大きさを指定しよう！

テーブルの幅を指定してみましょうその前に　前回の復習からです

横の行のセルは3つ　縦の列は２列でテーブルを作ってみます

すると　このようになります

横の行のセルは３つですので　<td>　</td>　が３つあります縦の列は2つですので　<tr>　</tr>は　2つあります

ではこのテーブルの　横の幅を指定してみましょう
横の幅は　 witdh="数値" で指定します
数値は　％で指定する方法と　ピクセルで指定する方法があります

○　幅を　％で指定した場合は
　　　　ブラウザのウィンドウサイズに対する割合になり　ウィンドウサイズを変えると
　　　　テーブルの幅もかわります

<table width="50%" border="1">
<tr>
<td>テーブル1</td><td>テーブル2</td><td>テーブル3</td>
</tr>
<tr>
<td>テーブル4</td><td>テーブル5</td><td>テーブル6</td>
</tr>
</table>

すると　下のようになります　ウィンドウサイズを変えてみて　表の幅が変化するのを確認してみましょう

○　幅をピクセルで指定した場合は
　　　　テーブルの幅は固定されます　ブラウザのウィンドウサイズを変えても
　　　　幅は変化しません

<table width="350" border="1">
<tr>
<td>テーブル1</td><td>テーブル2</td><td>テーブル3</td>
</tr>
<tr>
<td>テーブル4</td><td>テーブル5</td><td>テーブル6</td>
</tr>
</table>

すると　下のようになりますウィンドウサイズを変更してみても　幅が固定されていることを確認してみましょう

今度は　高さを指定してみましょう高さは　height="数値">　で指定することで　テーブル全体の高さを指定できます

<table width="350" height="100" border="1">
<tr>
<td>テーブル1</td><td>テーブル2</td><td>テーブル3</td>
</tr>
<tr>
<td>テーブル4</td><td>テーブル5</td><td>テーブル6</td>
</tr>
</table>

すると　下のようになります

ところがHTML4.01の仕様には　tableのタグに　height　の属性がないので
高さを指定したい場合には　スタイルシートを利用するか　<td>や<th>の属性で
height　を指定するほうがいいと思います
実際　HP作成ソフトで表の高さを指定すると　<td height="数値">で書き込まれている
ようです