表の各セルの高さの設定について

質問

ホームページビルダーV9を使っています。

表を作成してそれぞれのセルに画像を入れようと思っているのですが、
セルの高さ設定が、よくわかりません。

まず、下記の「3列」の表を作り、
■は空欄、「あいうえおか」に画像を入れました。

■あい　
うえお
■か■

次に、表の幅、高さを設定。
一番左側列を縦に3セルとも「結合」しました。
一番右側列の「え」は、上のセルだけ残して、下のセルと「結合」しました。

そこで、
左の列、1セル「う」は、100%の高さ。
真中の列、3セル「あ」「え」「か」は、各33%づつ統一の高さ
右の列、2セルは、上のセル「い」20%、下のセル「お」80%の高さ

にしたいのですが、編集画面も、プレビュー画面も、うまくいきません。
右の列がどうしても真中の33%に合ってしまい、
プレビューでみると、右列一番上セル「い」33%、下セル「お」66%の高さに見えてしまいます。

高さの設定数値を、「%」でなく「数字」で指定しても、うまく反映されません。
教えてください！

回答No.8

crepon133 · ベストアンサー

すみません、一列抜けました。
一番左の列の右側に列を挿入してください。

一番左の列は４つの行の高さを固定するためのものです。
テーブルを複雑に分割するときは、左（右）と上（下）に
高さや幅を固定するために入れます。
一般的には透明な1*1ピクセルの画像を挿入して、
この画像の長さや幅でセルの高さや幅を固定します。

＞TABLE入れ子形式で作るのが一番簡単で良いみたいです
その通りかも知れませんね

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" width="1"></td>
<td rowspan="4" bgcolor="#ffff00" width="40" align="center">か</td>
<td rowspan="2" height="33" width="40" bgcolor="#cccccc" align="center">あ</td>
<td height="20" bgcolor="#ff0000" align="center" width="40">え</td>
</tr>
<tr>
<td height="13" width="1"></td>
<td rowspan="3" height="80" bgcolor="#ffff00" align="center">お</td>
</tr>
<tr>
<td width="1"></td>
<td height="33" bgcolor="#00ffff" align="center">い</td>
</tr>
<tr>
<td width="1"></td>
<td height="34" bgcolor="#00ff00" align="center">う</td>
</tr>
</table>

お礼

ソースを貼り付けてみました。このようなやり方があるんですね。
とってもとっても勉強になりました。
方法もわかりやすいですし、これにTABLE入れ子を応用するといろいろできそうです。
解決できてうれしいです。ありがとうございます。

回答No.9

vista2446

ANo.3です。
「う」と「お」の画像を同じ高さに配置する方法でしたね。右列のセルを分割してみました。
<table border="1">
<tr>
<td width="1" height="36px">&nbsp;</td>
<td width="150" height="36px">&nbsp;</td>
<td width="150" height="60" rowspan="2" valign="top"><img src="あ.jpg" alt="あ" width="150" height="55"></td>
<td width="150" height="36px" valign="top"><img src="い.jpg" alt="い" width="150" height="30"></td>
</tr>
<tr>
<td width="1" height="24px">&nbsp;</td>
<td rowspan="3" valign="top"><img src="う.jpg" alt="う" width="150" height="144"></td>
<td rowspan="3" valign="top"><img src="お.jpg" alt="お" width="150" height="144"></td>
</tr>
<tr>
<td width="1" height="60px">&nbsp;</td>
<td height="60" valign="top"><img src="え.jpg" alt="え" width="150" height="55"></td>
</tr>
<tr><td width="1" height="60px">&nbsp;</td>
<td height="60" valign="top"><img src="か.jpg" alt="か" width="150" height="55"></td>
</tr>
</table>

－－－－－－－－－－－－
crepon133様へ
勉強になりました。ありがとうございました。
tebleでセルを結合する際は、基準となる列（行）を置かなくてはならなかったのですね。知りませんでした。(^人^)感謝♪

Firefoxでは、基準セルがなくても意図した高さを得られたんですが、、、これは、どちらのブラウザが正しいのでしょうね？

お礼

まさにこれです！下の方の応用編で「う」と「お」の画像を同じ高さすることができて、うれしいです。
ありがとうございました。

回答No.7

crepon133

こういうことです

20┐33　　　20
13┘　　　┐
33　　　　│80
34　　　　┘

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" width="1"></td>
<td rowspan="2" height="33" width="40" bgcolor="#cccccc" align="center">あ</td>
<td height="20" bgcolor="#ff0000" align="center" width="40">え</td>
</tr>
<tr>
<td height="13" width="1"></td>
<td rowspan="3" height="80" bgcolor="#ffff00" align="center">お</td>
</tr>
<tr>
<td width="1"></td>
<td height="33" bgcolor="#00ffff" align="center">い</td>
</tr>
<tr>
<td width="1"></td>
<td height="34" bgcolor="#00ff00" align="center">う</td>
</tr>
</table>

補足

記載してさったソースを実際にビルダーに貼り付けてみました。
確かに真中列の均等3等分に対して右列「え」と「お」は自分の希望通りです。
が、一番左列は縦に4つのセルになってしまっているので、1つ分に結合してしまうと、やはり右列「え」「お」も20%、80%が反映されなくなってしまうのですね・・・。
TABLE入れ子形式で作るのが一番簡単で良いみたいです。

たくさん記述してくださり本当にありがとうございました！

回答No.6

crepon133

計算に矛盾がありますね。
テーブルを入れ子にするのが簡単でいいと思います。

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="u.jpg" width="64" height="192" border="0"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="a.gif" width="64" height="64" border="0"></td>
</tr>
<tr>
<td><img src="e.gif" width="64" height="64" border="0"></td>
</tr>
<tr>
<td><img src="ka.gif" width="64" height="64" border="0"></td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="i.gif" width="64" height="38" border="0"></td>
</tr>
<tr>
<td><img src="o.jpg" width="64" height="154" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>

補足

回答ありがとうございます。TABLE入れ子にしたら、なんとかそれらしきものが見えてきました。
でも、TABLEが1つだけですと、TABLEの横幅は比較的割り振りしやすいようですが、縦の割り振りはプレビューに反映しにくいということなのでしょうか・・。まだまだ初心者でむずかしいです。

ありがとうございました。

回答No.5

kappa-pa

table入れ子にしたらいかがでしょうか？方法としては原始的ですがその方がわかりやすいかと思います。

見やすいようにtable border="1"で書いてます。画像属性などは略してます。

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="100%"><IMG src="う.gif"></td>
</tr>
</table></td>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="33%"><IMG src="あ.gif"></td>
</tr>
<tr>
<td height="33%"><IMG src="え.gif"></td>
</tr>
<tr>
<td height="33%"><IMG src="か.gif"></td>
</tr>
</table></td>
<td><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="20%"><IMG src="い.gif"></td>
</tr>
<tr>
<td height="80%"><IMG src="お.gif"></td>
</tr>
</table></td>
</tr>
</table>

中のテーブルで調整すれば大きさの比率は変化つけやすいかと思います。位置も外テーブルのtdで指定が可能です。

補足

表の中に表を入れるという感じですね。「TD」や「TR」がたくさんになって、1つ1つよく考えていかないと、わけ分からなくなりそうですが、やってみます。ありがとうございます。

回答No.4

vista2446

#3です。
テーブルを組んでみました。が、右列上の高さを指定してるんですが、IE7がちゃんと読み込んでくれないようで…Firefox2.0はちゃんとよみこんでるんですけど・・・なんで？
まだ、検証途中ですが、とりあえず、ソースを。。。
<table border="1">
<tr>
<td width="200" height="180" rowspan="4">img・180<br />うtext<br />img</td>
<td width="200" height="60" rowspan="2">あtext・60</td>
<td width="200" height="30">いtext・30</td>
</tr>
<tr>
<td height="150" rowspan="3">おtext・150<br />img</td>
</tr>
<tr>
<td height="60">えtext・60</td>
</tr>
<tr>
<td height="60">かtext・60</td>
</tr>
</table>
どなたかIE6で検証していただけませんか?
IE7はまだ問題が多いのかなぁ？

補足

回答ありがとうございます。
IE6です。右列一番上セルの高さが、微妙に1mmくらい縮んだかな？くらいで、やはり考えているものには少し遠いようなのです。

回答No.3

vista2446

セルの高さ指定に矛盾があります。

＞「あ」「え」「か」は、各33%づつ統一の高さ
＞上のセル「い」20%、下のセル「お」80%の高さ
1行目の真中セルと右セルの高さ指定が違ってます。なので、真中セルの指定が右列にも反映されてます。
ご希望の形にするためには、あと1行追加しないと・・・

セルの高さは「%」指定じゃなくて、数値「px」で指定しましょう。

補足

回答ありがとうございます。
1行の追加は、どこにいれたらよろしいでしょうか。

2番回答の方のサイズ(ピクセル数値）で試しに作ってみて、右列上を「30ピクセル」下を「150ピクセル」でやってみたのですが、やはり真中列の指定が右側にも反映してしまいます。

「右上セルを分割し、下セルをその分割した上セルと結合する」をやっても結局また同じになってしまいます。

回答No.2

expensive

自分もホームページビルダーを持っているのですが、

表を作成する際に全体的な大きさにとらわれてセルの大きさの調整が上手くいかないようです。

ですので、表全体の大きさを、その3つのうちの画像のうち一番大きな画像の3.5倍ぐらいの大きさに設定してみてはいかがでしょうか？

そうすればセルの大きさの調整が効くかもしれません。

１．まず、3×3の表全の外枠の少し外の方をクリックします。
　　表全体が指定されるので、右クリックして「属性の変更」をクリックします。

２．「表」のタブの「表の幅」「表の高さ」とあるので、それを
　　『自分が1つのセルの幅、高さに設定したい大きさの3倍に設定』します。
　　たとえば1つのセルの大きさを幅80ピクセル、高さ60ピクセルにしたい場合は
　　表の幅を240ピクセル、高さを180ピクセルに設定します。
　　入力したらOKをクリックしてください。

３．横幅の調整をします。一番上がわかりやすいかもしれないので、
　　「■あい」のセルをドラッグ＆ドロップで反転させてください。

４．３．で反転させた範囲の上で右クリックで「属性の変更」をクリックしてください。

５．「セル」タブの「セルの幅」に、先ほど「表の幅」に入力した値の3分の1の大きさを入力します。
　　入力したらOKをクリックしてください。

６．ここで多分横幅の調整が上手くいったと思うので、高さの調整をします。
　　一番左がわかりやすいかもしれないので、「■う■」を３．と同様の方法で反転させてください。

７．６．で反転させた範囲の上で右クリックで「属性の変更」をクリックしてください。

８．「セル」タブの「セルの高さ」に、先ほど「表の高さ」に入力した値の3分の1の大きさを入力します。
　　入力したらOKをクリックしてください。

注意点１：セルの幅、高さに入力する大きさは、3の画像のうち最も大きな画像より大きくなければなりません。

注意点２．表全体の大きさは、設定したい1つのセルの大きさ3倍にしなければなりません。

注意点３．3倍というのは、3×3の表であるから通用する値です。
　　　　　4×3だったら幅は4倍にするなど、調整をしてください。

補足

さっそくの回答ありがとうございます。うれしいです。

書いてくださった数値で試しに造ってみたのですが、
右列
「い」
「お」
「■」の3セルの「お」と「■」を結合したあと、
「い」の高さを小さく「お」高さを「大きく」するには、どのようにすればよいでしょうか。たとえば「い」の画像はとっても小さいので、「い」を「20」、残りの高さに「お」を入れるようにしたいのです。

左の列、1セル「う」は、100%の高さ。
真中の列、3セル「あ」「え」「か」は、各統一の高さ
右の列、2セルは、上のセル「い」20%、下のセル「お」80%の高さ
という具合です。（いずれもセルのサイズ）

回答No.1

nyonyon

少々把握しかねていますが、各画像の大きさがバラバラであるため、セルの高さ設定を行われたいのでしょうか？
セルの高さは入れる画像で一番大きな画像に合わせるのが、見栄えもよいと思いますから、
逆に何もセルの高さは設定せずに配置されてみてはどうでしょうか？

ちなみにこういう配列でしょうか？
<TABLE border="1">
<TBODY>
<TR>
<TD rowspan="3"><IMG src="fc008cut.gif" width="64" height="64" border="0"></TD>
<TD><IMG src="a001icn.gif" width="32" height="32" border="0"></TD>
<TD><IMG src="a002icn.gif" width="32" height="32" border="0"></TD>
</TR>
<TR>
<TD><IMG src="a005icn.gif" width="32" height="32" border="0"></TD>
<TD rowspan="2"><IMG src="c3carlo.gif" width="72" height="96" border="0"></TD>
</TR>
<TR>
<TD><IMG src="a007icn.gif" width="32" height="32" border="0"></TD>
</TR>
</TBODY>
</TABLE>

お礼

すみません、、「a001icn.gif」と「a005icn.gif」の間の高さで仕切りたいのです。」書きましたが、『「a001icn.gif」の高さの中で自由な高さに仕切りたい！』の間違いです！
再補足の場所がないようなので、お礼の欄に書かせていただきました。

補足

さっそく回答を頂き、とてもうれしいです。
画像配置は記述していただいた通りなのですが、

この記述ですと、真中列の一番上セル「a001icn.gif」と、
「a002icn.gif」が、横に同じ高さですよね？

そうではなく、「a001icn.gif」と「a005icn.gif」の間の高さで仕切りたいのです。
なぜなら左列と右列の下画像は縦長、真中列の画像は横長3枚で、右列上「a002icn.gif」あたる部分に小さいロゴ画像を入れたいのですが、
左列と右列下の画像を横同じ高さに見えるようにしたいのです。

しかし、右上に小画像のロゴを入れてしまうと、左画像との横高さが会わなくなってしまうので、数値で高さサイズを固定してあわせようかと思ったのですが・・・

3×3の表で全て画像をおさめていくと、とっても縦長になってしまい、PCプレビュー画面をスクロールしなければいけなくなってしまます。
説明が下手ですみません。よろしくお願いします。