- ベストアンサー
HTMLの画像の貼り方について質問です。
はじめまして。OHANA_Sといいます。 よろしくお願いします。 早速ですが、HTMLについて質問させて下さい。 HTMLでTABLEを組んで 画像を隙間なく貼り合わせたいのですが、 「CELLSPACING="0" CELPADDING="0" BORDER="0"」 を記入しても画像の間に少し隙間が出てキレイに組めません。 何か対処法がありましたら教えてください。 今、手こずってるのがこのTABLEです。 1段目：画像1枚（縦200px、横525px） 2段目：画像7枚（縦15px、横75px（×7=合計525px)） <table WIDTH="525" CELLSPACING="0" CELPADDING="0" BORDER="0"> <td colspan=7> <img src="1段目画像.gif" WIDTH="525" height="200" BORDER="0"> </td><tr> <td> <img src="2段目画像.gif" WIDTH="75" height="15" BORDER="0"> </td> （中略） </TABLE> 長文になってしまい申し訳ありませんが、よろしくお願いします。
- ホームページ作成ソフト
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
×CELPADDING ○CELLPADDING
その他の回答 (2)
- chimaki-t
- ベストアンサー率41% (108/261)
<img>の前後に改行やタブやスペースがあると、そこにスペースが１コ入ってしまいます。 <td><img></td> の様にすればいいのではないかと思います。
補足
素早い対応ありがとうございます。 早速実行してみたところ、 画像の隙間がスッキリなくなりました☆ ありがとうございます
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 <td colspan=7> <img src="1段目画像.gif" WIDTH="525" height="200" BORDER="0"> </td><tr> <td> <img src="2段目画像.gif" WIDTH="75" height="15" BORDER="0"> </td> ここのタグの部分ですが、<td><img・・・・></td> と<td>～</td>まで改行を入れないで記述すればいけると思います。
補足
素早い対応ありがとうございます。 早速実行してみたところ、 画像の隙間がスッキリなくなりました☆ ありがとうございます
関連するQ&A
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- カウンタとその左右につける画像の隙間をなくしたいのですが
カウンタの左右に画像をつけて かわいらしいカウンタにしたいのですが どうしてもカウンタの数字の左右の画像との間に 隙間ができてしまいます。 今は下記のようにテーブルタグでつなげているのですが 完全に隙間をなくすことができません。 どうしたら完全に隙間をなくせますか？ <TABLE Border="0" CellSpacing="0"CellPadding="1"> <TR> <TD> <IMG Src="material/counter_r.gif" Border="0" Width="22" Height="25"></TD><TD><img src="cgi-bin/・・・/count.cgi?gif" Border="0"> </TD> <TD> <IMG Src="material/counter_l.gif" Border="0" Width="22" Height="25"> </TD> </TR> </TABLE> お忙しいところ申し訳ありませんが 教えていただけるとうれしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- 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を入れるだけとなっていましたが 入れ方を教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
- Webの表で画像を並べたい
テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル（今後増やす予定です）を作り、画像を並べたいと思っています。 が、左の画像と右下（2つ）の画像、右下（2つ）の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか？どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>
- ベストアンサー
- 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
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- HTMLチェックでこんな警告が出ます。
(1) <tr> <td bgcolor="#DA4600"> <table summary="0" width="743" height="26" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <TABLE> に Mozilla または MSIE 用の属性 `HEIGHT` が指定されています。 (2) <td width="19" class="back1"><img src="img/common/spacer.gif" width="19" height="1"></td> <td width="741" valign="top" bgcolor="#FFFFFF"> <IMG> には ALT 属性が必要です。 HTMLチェッカーで文法をチェックするとこんな警告が出ます。 どのように修正すれば良いでしょうか。よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- Tableの記述兵方法について、質問をさせて頂きます。よろしくお願いし
Tableの記述兵方法について、質問をさせて頂きます。よろしくお願いします。 まず、以下のようなtableを作成しました。 <table border="1"summary="お知らせ"> <tr> <th><img src="img/aaa.gif" alt="画像1" width="199" height="64" /></th> <td><img src="img/bbb.gif" alt="画像2" width="547" height="60" /></td> </tr> <tr> <th><img src="img/ccc.gif" alt="画像3" width="199" height="364" /></th> <td><img src="img/ddd.gif" alt="画像4" width="547" height="60" /></td> </tr> </table> よろしければ、画像を拝見してみてください。 画像1と画像2は問題無いのですが、次の画像3と画像4を入れると、画像3のheightが364に設定しているために画像2と画像4の間に隙間が出来てしまいます。 このような場合は、隙間を無くしたいのですが、このような場合はどのようにすれば良いものでしょうか？ 画像4の<td>に右記のclass名を付けて、<td class="1"> cssにtd.1{padding-top:-30px;}としてみたところ、画像3のthまで上がってしまいます。 全く分からずに困っております。 どなた様か、ご指導の程よろしくお願い致します。
- ベストアンサー
- HTML
- 画像のNetscapeでの表示
Netscapeで下記のようにテーブルを組むと画像の表示がされません。 IEではうまく表示してくれるのですが・・・。 <table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%' style='position:absolute;bottom:0px;left:0px;'> <tr> <td><img src="xxx.gif"></td> </tr> </table> Netscapeで使用できないタグなどがふくまれているのでしょうか？ Netscapeのバージョンは、7.02です。
- 締切済み
- HTML
補足
素早い対応ありがとうございます。 早速実行してみたところ、 画像の隙間がスッキリなくなりました☆ ありがとうございます