• ベストアンサー

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

下記のようなソースを表示させた際に 「ABC」文字列が、10行でも100行で1000行になっても、 あいうえおのテーブルはvalign=topのようにボーダーの上に常に吸着し、かつ img.gifをvalign=bottomのようにボーダーの下に常に吸着させる方法を 教えてください。 <html> <body> <table border="1">   <tr>     <td>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC</td>     <td>       <table border="1">         <tr>           <td>あいうえお</td>         </tr>       </table>       <img src="img.gif">     </td>   </tr> </table> </body> </html>

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • gura_
  • ベストアンサー率44% (749/1683)
回答No.2

 こういうことですか↓ <html> <body> <table border="1"> <tr> <td valign=top>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC</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>

litton101
質問者

お礼

gura_さん、ありがとうございます。 ご提示のソースを本番環境に置き換えて よく考えたら、ご教示の方法で解決しました。 100%を指定する箇所が何箇所か抜けていたわけですね。 ずっと格闘していたので大変助かりました。 ありがとうございました。

その他の回答 (2)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

table一つでも可能かと。 <table border="1"> <tr> <td rowspan=2>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC</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>

litton101
質問者

お礼

goldfoxさん、ありがとうございました。 なるほどなるほど、 rowspan=2と切って しまう発想は私にはまったく検討つきませんでした。 タグ数はご教示の方法が少なくすみそうですね。 大変勉強になりました。ありがとうございました。

回答No.1

ぜんぶテーブルで行なうならば、 右のセル内にもうひとつ、ボーダーも余白もない1列2行、高さ100%のテーブルをつくり、上下のセルにそれぞれ「あいうえお」の入ったテーブルと画像を入れます。 valignの使い方はおわかりですね。 ほかに、スタイルシートを使うならば、画像を右のセルの背景とし、スタイルシートで下に配置するという方法もあります。

litton101
質問者

お礼

mesoplodonさん、ありがとうございます。 前者の方法ですが、わたしも試したのですが 「ボーダーも余白もない1列2行、高さ100%」の 100%がなぜだか効かないんです。 <table height="100%" だと機能せず、height="1000"だと機能し、とても不思議です。 (<table style="height:100%" でも効きません) 後者の方法は画像にハイパーリンクが埋まっているので ここでは使え無そうです。 ともかく、まずはありがとうございました。

関連するQ&A

  • IE セル間に隙間が・・・

    HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか?よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td>        ------3 <td valign="top" >*** <br> </td>

    • ベストアンサー
    • HTML
  • <td> 内のテーブルを上寄せにするには?

    すみません教えていただけますか? 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか? よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> &nbsp; </td> </tr> </table>

    • ベストアンサー
    • HTML
  • tableの背景を毎月変更したい

    お世話になります、初心者です。 ホームページの最上段にtableを置き、table内に背景画像を設定しています。画像を月毎に12枚(img_1.gif~img_12.gif)用意して、カレンダーが変わる毎に表示される背景画像も変更されるようにしたいと考えています。 [現在の記述] <TABLE border="0" width="800"> <TBODY><TR> <TD align="right" valign="bottom" width="800" background="img_1.gif" nowrap> <FONT>TEXT_1</FONT><BR> <FONT>TEXT_2</FONT><BR> <FONT>TEXT_3</FONT><BR> <BR> <FONT>TEXT_4</FONT></TD> </TR></TBODY></TABLE> 具体的に、これをどのようにしたらできるでしょうか? どうか教えてください。

  • テーブルの大きさを揃えたい

    各ページの大きさ=高さが揃わないのですが原因がわかりません。 1.文字の高さが指定した高さより大きい?(普通の文字の高さは決まっているのでしょうか。) 2.入れ子にしているテーブルで2行の所が指定した高さより大きい? 3.CSSスタイルの背景の高さが関係している? 4.全体の大きさがずれている? 参考にHTML(高さのみ)抜き出しますので教えていただけませんか。 【ページ1】 <table width="700" height="55" border="0"> <tr> <td><img.gif height="40"> welcome homepage(見た目は2行)</td> <td> </td> <td align="right" valign="bottom"> <img.gif" height="20" ></td></tr></table> <table height="15"></table> <table height="430"> <tr><td height="375"><flash.swf height="360"></td></tr> <tr><td height="25"></td></tr> <tr><td height="15"></td></tr></table> 【ページ2】 <table width="700" height="55" border="0"> <tr> <td height="40"> <img.gif height="40"></td> <td height="40"> </td> <td height="40"></td></tr> <tr><meta http-equiv="Content-Style-Type" content="text/css"> <td height="15"> welcome homepage </td> <td height="15"></td> <td align="right" height="15">|HOME|MAP|MAIL|</td></tr></table> <table height="15"></table> <table height="430"> <tr><td> <table height="10"> <tr><td height="15"></td></tr> <tr><td><IFRAME height="380"></IFRAME></td></tr> </table></td></tr> <tr><td height="15"></td></tr></table>

  • CSSで下揃えにするには

    下のような、画像をテキストに合わせて下付きにするようなレイアウトをCSSで作りたいと思っています。どなたかアドバイスを頂けないでしょうか? <html> <table width=100%> <tr> <td>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br>ほげほげほげ<br><br></td> <td valign="bottom"><img src="hoge.gif"></td> </tr> </table> </html>

    • ベストアンサー
    • HTML
  • テーブルの線について

    下記のようなHPをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか? ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Top</font></td> </tr> <tr> <td><a class="menu" href="">News</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Shopping</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>

    • ベストアンサー
    • HTML
  • tableのあるセルに無駄な空間が出来てしまいます。

    tableのあるセルに無駄な空間が出来てしまい、全くの足踏み状態で困っています。 3兼4列目(あるセル)の中身が終わるとすぐに3列目、4列目がくっついてくるようにしたいです。 <TABLE border=1> <TBODY> <TR> <TD colSpan=3>あああああああああ</TD> <TD>いいいいい</TD></TR> <TR> <TD rowSpan=2 valign="top">1列目</TD> <TD rowSpan=2 valign="top">2列目<br> 2列目<br>2列目<br>2列目<br>2列目<br>2列目<br>2列目<br> 2列目<br>2列目<br>2列目<br>2列目<br>2列目<br>2列目<br> <br><br><br> </TD> <TD colSpan=2 valign="top"> 3兼4列目 <br> このセルと下の3列目、4列目を近づけさせたいです。<br> ↓この空間をなくす方法を教えてください。 </TD></TR> <TR> <TD valign="top">3列目</TD> <TD valign="top">4列目</TD></TR></TBODY></TABLE> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • ホームページビルダーで右端のセルが狭くなります。

    ホームページビルダーで右端のセルが狭くなります。 現在ホームページビルダーの教科書を見ながら勉強しているのですが、教科書が用意しているファイルをビルダーで開くと右端のセルだけが狭くなります。 ちなみにブラウザ(IE)で開くと問題ありません。 これは何が原因でしょうか?編集しにくいので教えてください。 ちなみにソースは以下の感じです。(BODY以下) 念のため画像も添付します。 <BODY text=#000000 vLink=#808080 aLink=#ff8040 link=#ff3535 bgColor=#333333> <CENTER> <TABLE cellPadding=3 width=650 bgColor=#ffffff> <COLGROUP> <COL> <COL width=220> <TBODY> <TR> <TD vAlign=top rowSpan=11><IMG height="400" alt="代替テキスト1" src="xxx.gif" width="120" border="0"></TD> <TD colSpan=2><IMG height="150" alt="代替テキスト2" src="xxx.jpg" width="520" border="0"></TD></TR> <TR> <TD colSpan=2> <UL> <LI></LI> </UL> </TD></TR> <TR> <TD colSpan=2><IMG alt="代替テキスト" src="ixxx.gif" border="0"></TD></TR> <TR> <TD><IMG height="180" alt="代替テキスト" src="xxxx.jpg" width="140" border="0"></TD> <TD vAlign=top><FONT size=-1>長いテキスト文<BR><BR>このページの先頭へ</FONT></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD colSpan=2></TD></TR> <TR> <TD></TD> <TD vAlign=top></TD></TR> <TR> <TD align="center" colSpan=2></TD></TR></TBODY></TABLE></CENTER></BODY></HTML> ちなみにCOLGROUPとCOLの使い方もよくわかりません。 よろしくお願い致します。

  • テーブルの中の複数行テキスト欄の下に書き込めない

    またもスペースお借りします。 TOPページで使う予定の更新履歴を残す 複数行テキスト欄の下にバナーやボタンを貼りたいのですが、 なぜが外テーブルからはじき出されてしまうのです。 複数行テキスト欄の上には書き込めるのですが、 下に書き込むようにするには、どのようなタグを入力すれば良いでしょうか? 具体的に教えてくださると助かります。 これがコピペです↓ <html> <head> <title>top</title> </head> <body background="http://背景URL"> <Basefont Size="2"> <br> <br> <table align="center"border="0" width="700" height="500" style="border:3px double #999999;" cellpadding="5" cellspacing="0"bgcolor="#ffffff"> <Tr> <Td> <br> <Td Align="left" Valign="top"> <B>●更新履歴</B> <div style="width:230px;height:130px;overflow-y:scroll"style="border:3px double #000000;" cellpadding="5" bgcolor="#ffffff"Td Align="left"Valign="bottom"> ああああ<br> ああああ<br> ああああ<br> </table> </div> <br> あああああああああ </Td> </Tr> </Table> </body> </html>

    • ベストアンサー
    • HTML
  • 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。

    どちらも<table align="center">を用いています。 ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ2のセルの中身は、中央ぞろえになってしまいます。 タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ1------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10">&nbsp;</td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ2------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td>&nbsp;</td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。

    • ベストアンサー
    • HTML