- ベストアンサー
Webの表で画像を並べたい
karoyoの回答
- karoyo
- ベストアンサー率45% (9/20)
ほかの人の意見にプラスしまして・・、 ブラウザによってはTABLE内のタグは 改行を入れると空白ができちゃうみたいです。 <TABLE>から</TABLE>まで改行入れないでやってみると いいかもしれないですね。
関連するQ&A
- 背景画像に任意の位置でテキストを配置する
CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>
- ベストアンサー
- CSS
- 画像枠テーブルについて
画像を使ってテーブルを作ってます。 しかし、上と右の画像が繰り返してしまいます。 ここで調べてCSSでやってみましたが余計崩れてしまいました。 右下の部分と右の部分の結合もおかしくなります。 どうしたらいいんでしょうか？ http://blog-imgs-19.fc2.com/x/a/n/xandinosqu/table_temple.png 紫で囲まれた部分です。 ソースは <TABLE border="0" cellpadding="0" cellspacing="0" width="60%"> <TBODY> <TR> <TD><IMG src="左上の画像" width="15" height="15"></TD> <TD background="上の画像" width="100%"> </TD> <TD><IMG src="右上の画像" width="15" height="15"></TD> </TR> <TR> <TD height="50" background="左の画像"> </TD> <TD bgcolor="#ff577f"> <TABLE border="0" cellpadding="20" cellspacing="2" width="100%" height="100%" align="CENTER"> <TBODY> <TR> <TD>*中身*</TD> </TR> </TBODY> </TABLE> </TD> <TD background="右の画像"> </TD> </TR> <TR> <TD><IMG src="左下の画像" width="15" height="15"></TD> <TD background="下の画像"> </TD> <TD><IMG src="右下の画像" width="15" height="15"></TD> </TR> </TBODY> </TABLE> です。 ビルダーで編集してます。 横幅は60%でいいんです。 画像サイズは、左上・右上・右下・左下・右・左・上・下全て15×15です。 中途半端な説明かと思いますがご教授お願いします。 えーっと、それとなるべくなら小学生でも分かりやすい説明をお願いします。小学生じゃないですけど。
- ベストアンサー
- HTML
- テーブルタグの余白
テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています！！ <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>
- ベストアンサー
- Windows 95・98
- 表が崩れるんです。
他の質問に出ていたのですが、それでも解決しないので、 わかる方いたら、教えてください。 他で出ていたソースです。 <HTML> <BODY> <table width="100" border=1> <tr height="1"><td width="50"><img src="clear.gif" width="50" height="1"></td><td width="50"><img src="clear.gif" width="50" height="1"></td></tr> <tr><td width="50">abc</td><td width="50">ABC</td></tr> <tr><td width="50">abcde</td><td width="50">AB</td></tr> </table> </BODY> </HTML> これは、abcやabcdeぐらいならきれいに表示されるのですが、 abcをaaaaaaaaaaaaa・・・aaaと長くしたときに（width="50"で納まらない時に） aaaaaaaaaaaaa・・・aaaを改行させてでも「width="50"」で納めたいのですが どのようにすればよろしいでしょうか？
- 締切済み
- HTML
- ハーボットのフレーム。
某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか？ 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
- tableがずれる理由がわかりません
上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう？？ 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブル内に画像表示するとき。
自サイトでレイアウトにテーブルを使っています（邪道って言わないで……）。 で、サイトロゴをセル内に表示させてネスケで確認したところ、 画像が半分テーブルの外にはみ出したようになってしまいました。 ちなみにはみ出した部分は少ししか表示されず、 つまり絵がぱっつんと途中で切れてしまった状態です。 普段はIE派ですが、こちらでは問題なく表示されます。 ネスケは4.7なのですが、まさかそういうバグがあるのでしょうか。 タグ手書きでいつも何かしらミスがあるので、今回も探したのですが、 何故か何が悪いのかわかりません。 以下にソースを載せますので、一緒に考えてくださると嬉しいです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table bgcolor="#ffffff" width="580" height="210"> <tr> <td width="210" height="210" rowspan="5"> <img src="×××.gif" width="210" height="210" alt="コメント"> </td> <td width="370" height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> <tr> <td align="right" height="15" class="orange2"> 文章文章文章文章 </td> </tr> <tr> <td height="166"> 文章文章文章文章 </td> </tr> <tr> <td height="15" align="right"> 文章文章文章文章 </td> </tr> <tr> <td height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 問題の画像は4行目の「×××.gif」。 ちなみに1.gifはこれまたレイアウトの強い味方、 1ピクセル四方の透明画像になっております(笑)。 どうぞ宜しくお願いします。
- 締切済み
- HTML
- オブジェクトを指定してください、のエラーについて
HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif"> </td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>
- 締切済み
- HTML
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- WEB制作に関する質問です。コンテンツをスライドに
ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが なかなか、うまくいきません。 こんな感じかなと思って、つくったのですが、まったく作動しません。 何をどうすればいいか分かりません。 どなたか、教えて下さい。 javascriptは少し分かるぐらいです。 よろしくお願いします。 コードは↓ 下のクリック画像だけ指定してあります。 html <div id="main_left"> <h2>見出し</h2> <img src="image/cicletop.jpg" width="33" height="33" /><!-- 上のクリックボタン --> <div id="shuraider"> <table name="shuraid1" id="shuraid1"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid2" id="shuraid2"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid3" id="shuraid3"> <tr><td colspan="3">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid4" id="shuraid4"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> </div><!-- end shuraider --> <img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido ()" /><!-- 下のクッリックボタンでここをクリックするとtableを切り替えたい --> </div><!-- end main_left --> ここからcss #main_left{ width: 339px; } #main_left h2{ font-size: 18px; font-weight: bold; color: #ffffff; width: 339px; line-height: 2em; letter-spacing: 1em; background-image: url(../image/h2.jpg); background-color: #0F9; margin: 0; } #shuraider{ width: 337px; height: 120px; overflow: hidden; } ここからjavascript var i=1; function shuraido(){ if(i==1){ document.src="shuraid2"; i=2; } else if(i==2){ document.src="shuraid3"; i=3; } else if(i==3){ document.src="shuraid4"; i=4; } else{ document.src="shuraid1"; i=1; } } </script>
- ベストアンサー
- JavaScript
お礼
これははじめて聞きました。 結構びっくりです。 それにしても、一つも改行しないと汚らしくなって 少しいや～な感じですね。