- ベストアンサー
テーブルタグの余白
テーブルタグを使って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>
- foam
- お礼率71% (15/21)
- Windows 95・98
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<TD>タグから</TD>タグまでの間を、改行無しで一行で書かないと、セルの上下に隙間が出来ます。 <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> を <Td WIDTH="19" HEIGHT="128"><img src="画像"></Td> に直して下さい。
その他の回答 (1)
- saintandre
- ベストアンサー率31% (194/607)
cellspacing 要素（内枠の太さ）が0になっていないことと 画像の後ろに改行があるのが原因です。 <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" CELLSPACING="0"> <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>
お礼
早速修正してみたところ自分の思ったとおりになって助かりました。ありがとうございます!!
関連するQ&A
- ビルダー9 表の枠（罫線？空白？）を完全になくすには？
会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 （ファイル名は消してあります） 最初は上下にも入っていたのですが、それはどうにか消すことができました。 （どうやったか覚えてないですけど） この線をないものとすることはできますか？ 周りに詳しい人がいなくて、ほんっっとうに困ってます！助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- このテーブルタグの中の色を白にするには
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます（画像<A href="images/001_base_1.gif">１</A>・<A href="images/001_base_2.gif">２</A>・<A href="images/001_base_3.gif">３</A>・<A href="images/001_base_4.gif">４</A>）</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色（背景の色）になっています。 これを透明でなく白にする方法をおしえてください！
- 締切済み
- HTML
- ホームページの表と画像の間の余白をなくしたい
ｈｔｍｌでホームページをつくっています。 表と画像の間に謎のおおきな余白ができます。 <img src="2.jpg" width="600" height="500"> <table height="50%" border="0"> <tr> <td>あああ</td> <td>あああ</td> </tr> </table> 特になにもしていないのですが どうすれば余白をなくすことができますか？ よろしくおねがいします。
- 締切済み
- HTML
- 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
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- 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>
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅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
- テーブルタグについて質問
テーブルを横に二つ並べたのですが 赤い線と中のセルに間に隙間があいてしまいます 上にぴったりつけたいので、TD valign="top"を使いましたが上手くいかず 困っています。 以下、自己流ソースです <TABLE border="3" bordercolor="red" height="60%" cellpadding="0"> <TR> <TD valign="top"> <TABLE border="1" width="100%" cellpadding="0"> <TR> <TD><img src="image/＊＊＊＊.jpg"></TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="1" cellpadding="0"> <TR><TD width="30%" align="right"><B>＊＊＊＊</TD><TD>＊＊＊＊</B></TD> </TR> <TR><TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR></TABLE> </TD> </TR> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
早速のご回答ありがとうございます!!!改行をなくしたところ見事余白がなくなりました。本当にありがとうございました