- 締切済み
ホームページの表と画像の間の余白をなくしたい
htmlでホームページをつくっています。 表と画像の間に謎のおおきな余白ができます。 <img src="2.jpg" width="600" height="500"> <table height="50%" border="0"> <tr> <td>あああ</td> <td>あああ</td> </tr> </table> 特になにもしていないのですが どうすれば余白をなくすことができますか? よろしくおねがいします。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <img border="1"> <table border="1"> としてみてください 普通でしたらそのボーダーラインの隙間は1mm程度かと思います ボーダーライン間に隙間ができる原因として考えられるのは </td>~<td>間 </tr>~</tr>間 でスペースキーを押していませんか? 例えば <img>(リターン) <table>(リターン) <tr>(リターン) <td>あ</td>(全角スペース)(リターン) </tr>(リターン) </table>(リターン) とすると画像と表との間に1行分空白ができます(半角スペースの場合はできません) そうではなく tableのボーダーラインとテキストとの間に空白があるのであればNo.1の方の言われるように『height="50%"』に問題があります こちらは<body height="1000px">などのようにbodyに高さ指定してないと意味はないのですが・・・ tableの中身がその高さより短いと<tr>幅が自動調整される為空白ができます(デフォルトではテキストの高さ配置がmiddleに設定される為) 長いとテーブルの高さ指定は無視されます 中身が短いのであればheight="50%"を消去してもいいと思います 中身が2行以上になると(<tr><td></td></tr><tr><td></td></tr>)今度はテキスト間で空白ができてしまいます もしくは高さ指定した<table>の中にさらに<table>を作ってやるとか・・・ 中身が高さ指定より長くそれでも高さ指定したいのであればテーブルスクロールなどの方法もあります
こんにちは。 まずは表の外枠を表示してみると一目瞭然です。 <table height="50%" border="0"> の「border="0"」を「border="1"」にしてみてください。 すると外枠が表示され、問題の余白は表の縦の長さが内容よりかなり大きく指定されているためにできているとわかります。 表と画像の間には実際には余白は一切ないわけです。 解決法としては二通りあると思います。 ●縦の長さの指定をなくす <table height="50%" border="0"> の「height="50%"」の記述を削除し <table border="0"> とする方法。 ●表の大きさはそのままで中身を上に詰める ---------------------------------- <table height="50%" border="0"> <tr> ---------------------------------- の<tr>の中に「valign="top"」という「上に詰めて表示してください」という記述を加え、以下のようにする方法。 ---------------------------------- <table height="50%" border="0"> <tr valign="top"> ---------------------------------- どちらの問題は解決するかと思いますが、表の大きさの扱いが異なります。 質問者様の用途にあった方法を試されてはいかがでしょうか。
お礼
スペースがはいっていました。 ありがとうございました。