- 締切済み
表組みで上下のセルの間をあけたくない
ホームページをHTMLで作成しているのですが、 tableで以下のような2行2列の表を作り、各行1列目それぞれのセルに同じ大きさの写真を挿入しました。 □□ □□ 完成したものをIEで開くと上下の写真はくっついているのですが、 Firefoxで開くと、上下の写真がわずかに離れてしまいます。 Firefoxでも隙間なく見れるようにしたいのですが、スタイルシート等、よい方法がありましたら教えてください。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML4.01strictで書き直して、スタイルシートで設定。 ★非推奨要素はすべて削除★ ★summaryは推奨なのでとりあえず入れておく★ ☆画像のリストだとすると、ユーザビリティの観点から、間隔はあけるべきです。特にリンクなどが関わるときは・・・ ★以下サンプルにて、インデントを示すタブは全角スペースに変換されているので、実際に使用するときは[全角スペース]--置換-->[タブ]とすること★ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>画像の配置</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- table.image{ border-collapse: collapse; /* 結合ボーダーモデルで描画 */ } table.image td{ padding: 0px; /* ブロック内余白を0px */ text-align: center; /* テキストはセンター配置 */ line-height: 0em; /* 行の高さを0とする */ } table.image td img{ border: none; /* ボーダーなし */ } table.image td + td{ /* 隣接セレクタ */ padding-left: 0.5em; /* 余白をとる。*/ vertical-align: center; /* 文字縦方向は中心 */ text-align: left; /* 左寄せ */ line-height: 1.4em; /* 行間は広げる。 */ } --> </style> </head> <body> <h1>画像の配置</h1> <table summary="**の表" class="image"> <tr> <td> <img src="./photo/p_1.jpg" width="60" height="45" alt="画像１の説明"> </td> <td>文字1</td> </tr> <tr> <td> <img src="./photo/p_2.jpg" width="60" height="45" alt="画像2の説明"> </td> <td>文字2</td> </tr> </table></body> </html>
- zxcv0000
- ベストアンサー率56% (111/196)
各 IMG タグに、 vspace=0 を追加するとどうでしょう？ TD, TH タグの style の padding とか、IMGタグの style の margin は、略さずに ゼロを指定していますか？ <img src=...... ......> の直前や直後に空白や改行等があれば、消してみたらどうでしょう？ HTML を見ずに思い当るのはこの程度です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
え～と、そもそも出発から間違っているような?HTML仕様書にわざわざ例を挙げて書かれている 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 略 # テキストを画像に置き換えて表現する。 # 余白制御のために画像を用いる。 # ページレイアウトの目的で表を用いる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より そのものような気がしますが。 一枚の画像を一つに連結して配置したいということ?? 目的と該当するHTMLソース部分を提示していただければ、アドバイスが得られるかと・・
補足
ご回答ありがとうございます。 わかりずらい質問ですみません。 HTMLは以下のようにしております。 ここで、画像1と画像2が上下に配置されるのですが、 Firefoxでは隙間があいてしまいます。 <table cellpadding="0" cellspacing="0" width="202" height="0%"> <tr> <td><p align="center"><img src="画像1.jpg" border="0" width="60" height="45"></p> </td> <td><p align="left">文字1</p> </td> </tr> <tr> <td><p align="center"><img src="画像2.jpg" border="0" width="60" height="45"></p> </td> <td><p align="left">文字2</p> </td> </tr> ご指導いただければ幸いです。