テーブルの大きさ変えてみよう！
Google
テーブルの大きさはテーブルの中身の大きさにより、自動で決められるけど、予め大きさを指定しておけば、テーブルの中身の大きさに左右される事なく自分好みの大きさに変える事ができます。
言葉で説明するより、実際見てみた方が分かりやすいかも・・・

通常のテーブル
１２３
４５６
 大きさを指定したテーブル
１２３
４５６
このように、テーブルの中身とは関係なくテーブルの大きさを指定できます。

横方向にテーブルを広げたい場合→　WIDTH="数字"

縦方向にテーブルを広げたい場合→　HEIGHT="数字"

この"数字"の部分は、％やピクセルで表します。
（ピクセル数が分かりづらい場合、パーセンテージの方が簡単！画面の大きさを１００％と考えて何％にするか決めれば良いわけだし。
でも縦方向に広げたい場合はピクセルの方が良いよ～）
WIDTH="数字" HEIGHT="数字"を何処につけるのかというと

テーブル全体の大きさを指定したい場合→　<TABLE BORDER WIDTH="数字" HEIGHT="数字">

１列だけの大きさを指定したい場合→　<TR HEIGHT="数字">

１マスだけの大きさを指定したい場合→　<TD WIDTH="数字">

横方向に広げる
<TABLE BORDER WIDTH="300">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
</TABLE>
テーブル全体の横幅を300ピクセルで指定してみました。
左のように書いたのを表示させるとこうなります。

１２３
<TABLE BORDER>
<TR>
<TD>１</TD>
<TD WIDTH="250">２</TD>
<TD>３</TD>
</TR>
<TR>
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>
１マスの横幅を２５０ピクセルに指定してみました。
左のように書いたのを表示させるとこうなります。

１２３
４５６
<TABLE BORDER>
<TR>
<TD WIDTH="100">①</TD>
<TD>②</TD>
<TD WIDTH="200">③</TD>
</TR>
</TABLE>
①の横幅を１００ピクセルに、
③の横幅を２００ピクセルに指定してみました。
左のように書いたのを表示させるとこうなります。

①②③

縦方向に広げる
<TABLE BORDER HEIGHT="100">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
</TABLE>
テーブル全体の高さを１００ピクセルで指定してみました。
左のように書いたのを表示させるとこうなります。

１２３
<TABLE BORDER>
<TR HEIGHT="70">
<TD>１</TD>
<TD>２</TD>
</TR>
<TR>
<TD>３</TD>
<TD>４</TD>
</TR>
<TR HEIGHT="50">
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>
１段目の高さを７０ピクセルに。
３段目の高さを５０ピクセルに指定してみました。
左のように書いたのを表示させるとこうなります。

１２
３４
５６

縦と横方向に広げる
<TABLE BORDER HEIGHT="100" WIDTH="150">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
<TR>
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>
テーブル全体の高さを１００ピクセルに
テーブル全体の幅を１５０ピクセルにしました。
左のように書いたのを表示させるとこうなります。

１２３
４５６
<TABLE BORDER WIDTH="100">
<TR HEIGHT="70">
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
<TR>
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>
テーブル全体の幅を１００ピクセルに
１段目の高さを７０ピクセルにしました。
左のように書いたのを表示させるとこうなります。

１２３
４５６

私は高さの指定ってあんまりやった事ないけど、横幅の指定は割とよく使ってる。
今、この文章を書いてる部分も、実は透明のテーブルで横幅を80％に指定してるの。
だから、左右にスペース開いてるでしょ？

テーブル作成の目次に戻る　　　TOP