- ベストアンサー
テーブルのセル内で、あるものは上辺寄せあるものは下辺寄せにしたい
下記のようなソースを表示させた際に 「ＡＢＣ」文字列が、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）
- 専門家の回答
質問者が選んだベストアンサー
こういうことですか↓ <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>
その他の回答 (2)
- goldfox
- ベストアンサー率49% (123/249)
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>
お礼
goldfoxさん、ありがとうございました。 なるほどなるほど、 rowspan=2と切って しまう発想は私にはまったく検討つきませんでした。 タグ数はご教示の方法が少なくすみそうですね。 大変勉強になりました。ありがとうございました。
- mesoplodon
- ベストアンサー率28% (48/166)
ぜんぶテーブルで行なうならば、 右のセル内にもうひとつ、ボーダーも余白もない1列2行、高さ100％のテーブルをつくり、上下のセルにそれぞれ「あいうえお」の入ったテーブルと画像を入れます。 valignの使い方はおわかりですね。 ほかに、スタイルシートを使うならば、画像を右のセルの背景とし、スタイルシートで下に配置するという方法もあります。
お礼
mesoplodonさん、ありがとうございます。 前者の方法ですが、わたしも試したのですが 「ボーダーも余白もない1列2行、高さ100％」の 100％がなぜだか効かないんです。 <table height="100%" だと機能せず、height="1000"だと機能し、とても不思議です。 (<table style="height:100%" でも効きません) 後者の方法は画像にハイパーリンクが埋まっているので ここでは使え無そうです。 ともかく、まずはありがとうございました。
お礼
gura_さん、ありがとうございます。 ご提示のソースを本番環境に置き換えて よく考えたら、ご教示の方法で解決しました。 100%を指定する箇所が何箇所か抜けていたわけですね。 ずっと格闘していたので大変助かりました。 ありがとうございました。