テーブルのセル内で、あるものは上辺寄せあるものは下辺寄せにしたい

解決済

質問者：litton101
質問日時：2006/03/15 14:25
回答数：3件

下記のようなソースを表示させた際に

「ＡＢＣ」文字列が、10行でも100行で1000行になっても、
あいうえおのテーブルはvalign=topのようにボーダーの上に常に吸着し、かつ
img.gifをvalign=bottomのようにボーダーの下に常に吸着させる方法を
教えてください。

<html>
<body>
<table border="1">
　　<tr>
　　　　<td>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ</td>
　　　　<td>
　　　　　　<table border="1">
　　　　　　　　<tr>
　　　　　　　　　　<td>あいうえお</td>
　　　　　　　　</tr>
　　　　　　</table>
　　　　　　<img src="img.gif">
　　　　</td>
　　</tr>
</table>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： gura_
回答日時：2006/03/15 17:03

　こういうことですか↓

<html>
<body>
<table border="1">
<tr>
<td valign=top>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ</td>
<td height="100%">
<table border="1" height="100%">
<tr>
<td valign=top height="100%">あいうえお</td>
</tr>
<tr>
<td><img src="img.gif"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

gura_さん、ありがとうございます。
ご提示のソースを本番環境に置き換えて
よく考えたら、ご教示の方法で解決しました。

100%を指定する箇所が何箇所か抜けていたわけですね。

ずっと格闘していたので大変助かりました。
ありがとうございました。

通報する

お礼日時：2006/03/15 17:37

No.3

回答者： goldfox
回答日時：2006/03/15 17:23

table一つでも可能かと。

<table border="1">
<tr>
<td rowspan=2>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ<br>ＡＢＣ</td>
<td valign="top">
<div style="border:solid 2px #000000;">
<p>あいうえお</p>
</div>
</td>
</tr>
<tr>
<td align="center" valign="bottom">
<img src="img.gif" alt="alt属性はつけましょう">
</td>
</tr>
</table>

- 0
- 件

通報する

この回答へのお礼

goldfoxさん、ありがとうございました。

なるほどなるほど、 rowspan=2と切って
しまう発想は私にはまったく検討つきませんでした。

タグ数はご教示の方法が少なくすみそうですね。

大変勉強になりました。ありがとうございました。

通報する

お礼日時：2006/03/15 17:38

No.1

回答者： mesoplodon
回答日時：2006/03/15 15:53

ぜんぶテーブルで行なうならば、

右のセル内にもうひとつ、ボーダーも余白もない1列2行、高さ100％のテーブルをつくり、上下のセルにそれぞれ「あいうえお」の入ったテーブルと画像を入れます。
valignの使い方はおわかりですね。

ほかに、スタイルシートを使うならば、画像を右のセルの背景とし、スタイルシートで下に配置するという方法もあります。

- 0
- 件

通報する

この回答へのお礼

mesoplodonさん、ありがとうございます。
前者の方法ですが、わたしも試したのですが
「ボーダーも余白もない1列2行、高さ100％」の
100％がなぜだか効かないんです。
<table height="100%" だと機能せず、height="1000"だと機能し、とても不思議です。
(<table style="height:100%" でも効きません)

後者の方法は画像にハイパーリンクが埋まっているので
ここでは使え無そうです。

ともかく、まずはありがとうございました。

通報する

お礼日時：2006/03/15 16:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！