テーブルの余白を解消し、表示を最適化する方法
- テーブルの余白が表示に影響を与える問題があります。テーブルを一番上で左右・上に密着させて表示させるためには、marginプロパティを調整する必要があります。しかし、デフォルトの余白が出てしまうため、marginプロパティをマイナス値に設定して解消する方法があります。
- 具体的には、テーブル要素のstyle属性にmarginプロパティを設定します。上下の余白を解消するには、margin-topとmargin-bottomをマイナスの値に設定します。また、左右の余白を解消するには、margin-leftとmargin-rightをマイナスの値に設定します。
- ただし、テーブルの幅を100%にすると、右側に余白が出る可能性があります。これは、テーブルを左に詰めたためです。解決策としては、幅をpx単位で指定することも考えられますが、ウインドウのサイズによってはレイアウトが崩れる可能性があります。そのため、テーブルの大きさを常にウインドウのサイズと連動させる方法を探しています。
- ベストアンサー
テーブルの余白(margin)でサイズが合わなくなる
テーブルを一番上で左右・上に密着させて表示させるためにデフォルトだと余白が出てしまうので以下のように書きました。 <table style="margin-top:-15px; margin-left:-10px; margin-right:-15px; margin-bottom:15px">～</table> しかし、この場合、widthを100%にすると右側に余白が出ます。（左に詰めたから(?)） だからといってpx単位で指定すればウインドウのサイズによってはすごく変なレイアウトになります。 なので、一番の条件「テーブルを一番上で左右・上に密着させて表示させる」かつ常にテーブルの大きさがウインドウのサイズとリンクさせるような。（また、それに似た）動作をさせるタグやスタイルがあれば教えてください。
- lelouch01
- お礼率51% (35/68)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートの書き方は分かりますか？ スタイルシートでbodyの余白をなくします。 body {margin:0;} table {width:100%;}
関連するQ&A
- CSSのmarginとpadding
テーブルの指定で以下のように指定しています。 この場合、 1.760pxのテーブルで右1pxの線をしていますが、この場合、中に入れる画像（その他のピクセルサイズ指定）は759pxまでにしなければいけませんか？ 2.marginでなく、paddiingで指定した場合も教えてください。 table.top { border-style : solid ; border-width : 0 1px 0 0; border-color : #333333; margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 760px; }
- ベストアンサー
- HTML
- なぜか余白が…
スタイルシートでmarginを0pxに設定し、テーブルを幅100％、縦100％に設定したあとでjavascriptを設定すると、どうしても上部に余白が出来てしまいます。 javascriptを設定しないときは <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR><TD></TD></TR></TBODY></TABLE> </BODY> </HTML> と正常なんですが、javascriptを設定すると、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- document.write("<img src=cgi-bin/sasuke.cgi?sasuke="); document.write(document.referrer+"' width=1 height=1>");// --> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR> <TD></TD> </TR> </TBODY></TABLE> </BODY> </HTML> のようにどうしても上部に余白が出来てしまいます。 このスクリプトを設定したときのみ、こうなるので非常に困っています。（ＨＰのデザイン上…） どなたか、よい方法がありましたら教えてください。m(__)m なお、スクリプトはアクセス解析です。 当方はwindows98 ie5.5の環境で作成しています。 javascriptはこの場合はhtml内に組み込んでいますが、××.jsで呼び出しをかけています。 よろしくお願いします！
- ベストアンサー
- HTML
- テーブルのセル間に余白が空いてしまいます
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; }
- ベストアンサー
- HTML
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- ネットスケープで上に余白があいてしまいます
お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 ＩＥだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを２パターンで指定しているのですが、なぜなのでしょうか？ body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- HTML
- ｃｓｓでのテーブル
初心者です。 本を読みながら、スタイルシートでテーブルを作っているのですが、 左に設置したメニュー(縦に並べたボタン)のテーブルの右側に不要なスペースができ、メニューのテーブルと同じ色になってしまいます。 【内容】 .tdmenu{ vertical-align:top; background-color:#fa8072; width:140px; } p.menu{ font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; width:140px; background-color:#fa8072; height:2em } これが適応されていると思われます。 回答よろしくお願いします。
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- table cellpadding「有」又は「無し」でCSSの解釈違う？
IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- [CSS] tableの行の間隔をあける
table { border-collapse: separate; border-spacing: 5px; } とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか？ イメージ的には以下の様な感じです <table> <tr style="margin-bottom: 5px">....</tr> <tr style="margin-bottom: 5px">....</tr> <tr style="margin-bottom: 5px">....</tr> </table> よろしくお願いします
- ベストアンサー
- CSS
お礼
ありがとうございます。イメージ通りに表示させることができました。