プロが教えるわが家の防犯対策術！

テーブルのセル間に余白が空いてしまいます

解決済

  • 質問者：Jiromared
  • 質問日時：
  • 回答数：4件

2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。

しかし、画像と文字の間（1列目と2列目の間）に余分な空白ができてしまいます。
margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。

htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか？

また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。
divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。

<!-- htmlのコード -->
<body>
<table width="700" border="0" >
<tr>
<td><center>
<img src="img/top_image.png" />
</center></td>
</tr>
<table class="table001">
<tr>
<td rowspan="2"><img src="img/aaa.bmp" /></td>
<td><h2>このサイトのごあんない</h2></td>
</tr>
<tr>
<td><p>このサイトは～～～～～～</p></td>
</tr>
</table>
<div style="margin-top:10px"></div>
<table class="table001">
<tr>
<td rowspan="3"><img src="img/bbb.bmp" /></td>
<td><h2>このサイトのごあんない２</h2></td>
</tr>
<tr>
<td>
<p>このサイトは～～～～～～</p>
<p>また、このサイトの～～～～～～。</p>
</td>
</tr>
<tr>
<td>
<p>問い合わせ</p>
<p>電話番号　000-000-0000</p>
</td>
</tr>
</table>
</body>



/* 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 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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

最初の画像がどんな文字を置き換えたものかがわからないのと、２番目以降の画像の意味もわからないので、想像でしかありませんが、


HTML自体は下記のように、簡単になります。
これだったら、わざわざWebオーサリングツールを使う必要はなく、HTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )、すなわちテキストエディタで十分です。
★最後に全体を書いておきます。
★画像にはalt属性が必要です。
『height属性とwidth属性は、ユーザエージェントに対して画像やオブジェクトの大きさに関する概念を知らせるので、ユーザエージェントは画像やオブジェクトに割り当てる空間を予約し、そのデータが届くのを待っている間も文書のレンダリングを継続できる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

ポイント
1)マージンはそのブロックのマージンを書きます。元もとのHTMLでしたらtable+teble{margin-top:10px;}でよいのですよ。
意味は、tableに続く(並んだ)tableの上にマージン10pxと言う意味です。
2)HTMLにはデザインに関する記述は一切無い(特に二番目)ので、どのようにも、デザインできます。まったくデザインを変えることも簡単です。今回はウィンドウ幅をどのように変えても中央に配置されますが、これをウィンドウ幅を変えたら追随して表示も変化させてスマホなどに対処させるとかも

<body>
　　<div class="header">
　　　　<h1><img src="img/top_image.png" width="700" height="40" alt="見だし(タイトルと原則同じ)" ></h1>
　　</div>
　　<div class="section" id="message">
　　　　<h2>このサイトのごあんない</h2>
　　　　<p>このサイトは～～～～～～</p>
　　</div>
　　<div class="section" id="message2">
　　　　<h2>このサイトのごあんない２</h2>
　　　　<p>このサイトは～～～～～～</p>
　　　　<p>また、このサイトの～～～～～～。</p>
　　　　<div class="footer">
　　　　　　<h2>問い合わせ</h2>
　　　　　　<address>電話番号　000-000-0000</address>
　　　　</div>
　　</div>
</body>
</html>
あるいは最初の画像も文書にとって背景でしたら
<body>
　　<div class="header">
　　　　<h1>見だし(タイトルと原則同じ)</h1>
　　</div>
　　<div class="section" id="message">
　　　　<h2>このサイトのごあんない</h2>
　　　　<p>このサイトは～～～～～～</p>
　　</div>
　　<div class="section" id="message2">
　　　　<h2>このサイトのごあんない２</h2>
　　　　<p>このサイトは～～～～～～</p>
　　　　<p>また、このサイトの～～～～～～。</p>
　　　　<div class="footer">
　　　　　　<h2>問い合わせ</h2>
　　　　　　<address>電話番号　000-000-0000</address>
　　　　</div>
　　</div>
</body>
</html>

[全体]
★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済みのHTML4.01strict+CSS2.1です。
★タブは＿に置換してあるので戻してください。


<!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 name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{
background-color:#6C6;
font-size: 0.8em;
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic",sans-serif ;
}
h1,h2,p{margin:0;}
div.header,div.section,div.footer{
width: 700px ;margin: 0 auto;
background-color: #FFF;
}
h1{font-size:30px;line-height:10px;}
div.section{
width:640px;/* 左に置く画像幅分引いたもの */
padding-left:60px;/* 左に置く画像幅分 */
}
div.section{background:url(img/aaa.png) repeat-y #E8FECF;}
div.section+div.section{background:url(img/bbb.png) repeat-y #E8FECF;}
div.footer{width:640px;background-color:#E8FECF;}
div.section p,div.footer p{
margin:0 1em;
text-indent:1em;
line-height:1.6em;
}
h2{
padding-left: 10px;
background-color: #009900;
width: 180px;
color:#FFF;
font-size: 1.1em;
height: 25px;
line-height:25px;
}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1><img src="img/top_image.png" width="700" height="40" alt="見だし(タイトルと原則同じ)" ></h1>
＿</div>
＿<div class="section" id="message">
＿＿<h2>このサイトのごあんない</h2>
＿＿<p>このサイトは～～～～～～</p>
＿</div>
＿<div class="section" id="message2">
＿＿<h2>このサイトのごあんない２</h2>
＿＿<p>このサイトは～～～～～～</p>
＿＿<p>また、このサイトの～～～～～～。</p>
＿＿<div class="footer">
＿＿＿<h2>問い合わせ</h2>
＿＿＿<address>電話番号　000-000-0000</address>
＿＿</div>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

こんなに詳細にご回答くださいまして本当にありがとうございます！！！
リンクも1つ1つ参考にしながら、この記載の通り作り直してみます。
Web制作初心者で1人で行き詰まっていましたが、おかげさまでとても勉強になりました。
本当にありがとうございました（*^_^*）

通報する
お礼日時：2012/11/06 21:45

No.3

  • 回答者： outbrave
  • 回答日時：

img要素の width と height 属性について



両方共必須属性ではありませんので書かなくても良いのですが、次のようなメリットがあります。

画像が表示される前にページのレイアウトが決まるので、画像以降にある内容が先に表示され、画像がロードし終わるたびに画面がズルズルと動くことが防げます。

私的に、HTMLエディタを使用すると、表示させたい画像ファイルを指定するだけで width も height の値も自動で入るのでわざわざ書くという作業はしたことがありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

無知な質問にご回答いただき感謝いたします。
画像の大きさの指定は必須属性ではないけれど、指定するとご記載の現象を防ぐことができるんですね。とても参考になりました。
会社にはDreamweaverCS4があるのですが、今回の作業は私用なので自宅で行っており、すべてタグ打ちしています。エディタでは自動でwidthもheightも入るんですね。知らなかったです。
ご親切にありがとうございました(*^_^*)

通報する
お礼日時：2012/11/06 13:46

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　拝見する限りでは、tableでデザインされているようですが、この方法は今ではほとんどされていません。


「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

　それはさておき、table関連のプロパティには、
table-layout、border-collapse、border-spacing、empty-cells、caption-side
のプロパティがあります。
　tableのセル間のスペースは
border-collapseを使用します。
border-collapse:collapse;
　で結合ボーダーモデルになります。separateだとセル間が離れます。separateがデフォルトです。
border-spacingはseparateを選択したときのセル間のスペースです。

empty-cellsは、内容のないセルの表示方法です。separateのときに内容のないセルにボーダーを描くか描かないかです。

また、セルもpaddingを指定できます。またpもデフォルトでマージンを持ちますから
table p{margin:0;}
td,th{padding:0;}
で余白はすべて消えます。
詳しくは、
★17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
など・・・長いです。頭が痛くなります。

　なお、いくつか誤りがあります。
1) ページレイアウトの目的で表を用いてはなりません。
2) <center>は非推奨です。スタイルシートを使いましょう。
3) bmpは画像フォーマットとして使うことができません。jpeg,gig,pngにしましょう。

(1)のtableを使用しないについては、ご希望でしたら簡単なサンプルを書きます。HTMLもスタイルシートも数分の一以下になり、シンプルでわかり易く検索エンジンにも最適なものになるでしょう。

この回答への補足

詳細なご説明ありがとうございます！とても参考になりました。

今回のレイアウトを表を使わず作ることができるならば、ぜひそうしたいです！お手数ですがサンプルを教えていただけないでしょうか？？(>_<)

また、centerが非推奨ということですが、cssでmarginの左右にautoを設定するということですか？


なお、もし今回のレイアウトの場合で、四角の角を丸くしたい場合はtableを使うのがベストでしょうか？
もしかすると、依頼主からそのようなリクエストが来るかもしれないのですが、とりあえず表を使わない方法で作っておきたいと思います。

質問続きでお手数をおかけしまして大変恐縮ですが、ご回答をお待ち致しております。

補足日時：2012/11/06 13:39
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： outbrave
  • 回答日時：

td に横幅（width）の指定がないので画像がピッタリ収まっていないのと、テーブルに border-collapse: collapse; が指定押されていないため、画像左に余白ができると思います。


画像にも width と height の指定がないので、そのソースでは確認できません。

テーブルの上下間隔は、
table.table001{
margin-top: 10px;
border-collapse: collapse;
}
上記のように margin-top: 10px; でも追加すればいいです。

画像ファイル形式は web 上で使用する場合 bitmap はやめましょう、jpeg , gif , png にしてください。

テーブルの入れ子を使用する場面ではないと思うので、見直しも必要かと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。
テーブルに border-collapse: collapse; を指定し、td に横幅（width）の指定をすることで、それぞれのテーブルの余白が統一され綺麗になりました！
また、テーブルの上下間隔も、margin-top: 10px;を入れることで解決しました。
単純なことができておらずお恥ずかしい限りですが、自分で気づくことができなかったため本当に助かりました。ありがとうございました。
画像の width と height については、用意されていた画像が大きかったため、ペイントで縮小してブラウザで見やすい大きさにしたものを指定しため、あえてサイズは指定しませんでした。もしご指摘がある場合はご回答いだけると嬉しいです。

通報する
お礼日時：2012/11/06 13:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報