質問: テーブルのセル間に余白が空いてしまいます 2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。 しかし、画像と文字の間(1列目と2列目の間)に余分な空白ができてしまいます。 margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。 htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか? また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、 はできるだけ使いたくありません。 divにmarginを指定して、テーブルタグの上にとすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。 | | | --- | | | | | | | --- | --- | | | このサイトのごあんない | | このサイトは~~~~~~ | | | | | --- | --- | | | このサイトのごあんない2 | | このサイトは~~~~~~ また、このサイトの~~~~~~。 | | 問い合わせ 電話番号 000-000-0000 | /* cssのコード */ body { background-color:#6c6; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; font-size: 0.8em; font-family: "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", "ms pゴシック", "ms p gothic",sans-serif ; } #pagebody { width: 760px ; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: #fff; } table.table001{ background-color: #e8fecf; width: 700px; margin-left: auto; margin-right: auto; white-space:normal; } h2{ padding-left: 10px; background-color: #009900; width: 180px; color:#fff; font-size: 1.1em; height: 25px; line-height:25px; }
回答: td に横幅(width)の指定がないので画像がピッタリ収まっていないのと、テーブルに border-collapse: collapse; が指定押されていないため、画像左に余白ができると思います。 画像にも width と height の指定がないので、そのソースでは確認できません。 テーブルの上下間隔は、 table.table001{ margin-top: 10px; border-collapse: collapse; } 上記のように margin-top: 10px; でも追加すればいいです。 画像ファイル形式は web 上で使用する場合 bitmap はやめましょう、jpeg , gif , png にしてください。 テーブルの入れ子を使用する場面ではないと思うので、見直しも必要かと思います。