tableタグでtdタグ間が離れてしまいます

2011/09/04 01:15

このQ&Aのポイント

tableタグのtdタグ間の間隔が離れてしまう原因とは？
tdタグの間隔が離れてしまうことの解決方法は？
tdタグ間の間隔が離れる現象について詳しく解説します

winwin333
お礼率100% (1/1)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

einn
ベストアンサー率37% (671/1802)

2011/09/04 01:44 回答No.1

離れる、というのは白く空白ができる、という事ですか？複数のブラウザで検証しましたがそんなことにはならないですが。もし、TDとTDが白くあいているわけではなく、単にテキストボックスとボタンが離れすぎていることを言っておられるなら、横幅の指定も行揃えの指定もしてないからですよ。そういう仕様なんです、としか言いようが無いです。以下にコードを書いておきますね。 <html> <head> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td width="300"><input type="text" name="serch" size="50"></td> <td width="200" align="left"><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> </body> </html> まず、画面全体に伸ばされるのが個人的にイヤなので、 Tableの幅をCSSで500ピクセルで指定しました。 tdも同様に、一つ目を300、二つ目を200にしています。で、二つ目のtdに左揃えをかけてます。以上終了です。もし画面全体に伸ばしつつ左揃えにしたいなら、以下のコードです。 <html> <head> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td width="300"><input type="text" name="serch" size="50"></td> <td align="left"><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> </body> </html> 単に、一つ目のtdに300ピクセル、二つ目のtdに左揃えを指定しただけのものです。上記では面倒だったのでtableタグに装飾のwidthやalignを直接つけましたが、 classやIDでも出来ることですし、そのほうが本当はスマートです。もちろんCSSは外部ファイルにしたほうが美しいですね。ただ、CSSやdivをせっかく使っていらっしゃるのですから、どうせならtableタグを使わないようがよりスマートだと思いますよ。