• ベストアンサー

上下にスペースの空け方

<table> <tr> <td> 123 </td> </td> </table> ○○○○○○ <table> <tr> <td> 123 </td> </td> </table> この○の部分に、縦10pxのスペースを空けたいのですが、なにか有効な書き方はありませんか? そのタグがわからないので、○の部分は今はこうしています。 <table Height="10"><tr><td></td></td></table>

  • HTML
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

CSSだとこんな感じか? <table> <tr> <td> 123 </td> </td> </table> <table style="margin-top: 10px;"> <tr> <td> 123 </td> </td> </table>

その他の回答 (1)

  • pbforce
  • ベストアンサー率22% (379/1719)
回答No.1

縦10pxの透明な画像を埋め込んじゃうか、スタイルシートを使用する。 スタイルシートなら簡単に出来るかな。

関連するQ&A

  • tdのスペース(空白の状態)は「&nbsp;」で問題ないでしょうか?

    tdのスペース(空白の状態)は「&nbsp;」で問題ないでしょうか? どうやって対処するのが正しいのでしょうか? <table width="164" height="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="86">画像</td> </tr> <tr> <td height="21">&nbsp;</td> </tr> <tr> <td height="86">画像</td> </tr> <tr> <td height="21">&nbsp;</td> </tr> <tr> <td height="86">画像</td> </tr> </table>

    • ベストアンサー
    • HTML
  • ページ上部にスペースが空いてしまう・・・

    今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="~.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="~html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="~html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="~.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルタグの横のスペース

    テーブルを右寄せに置いて、 その横に少しスペースを空けたいのですが… どこにどのタグを入れたらよいでしょうか? 使用しているタグは <Table Border> <Tr> <Td> 文字</Td> </Tr> </Table> この形の物です。

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • TABLEの高さの固定、TABLEの高さの変動を固定について

    TABLEの高さの固定できずに困っています。 【(2)】に縦500程度の画像掲載(又は複数回改行)をすると、 【(1)】の50pxで固定している縦幅が変動してしまいます。 【(3)】の<TD>にheight=500pxのような大きな値を入れると 【(1)】の縦変動を固定できるのですが、【(2)】の縦幅が大きくなると、 その都度、【(3)】の<TD>のheightの値を書き換えなければなりません。 CSS等で【(1)】のheight:50px;の指定をしても、 【(2)】の縦幅の上昇より【(1)】が50px以上になってしまいます。 【(1)】のheightを【(2)】の縦の変動に左右されず固定する方法を 出来ればCSSを使用した方法でわかる方がいらっしゃいましたら ご回答宜しくお願い致します。 【-------HTML START---------】 <TABLE style="WIDTH: 500px;HEIGHT:100%" cellSpacing=0 cellPadding=0 border=1> <TR> <TD colSpan=2 height="20px"></TD></TR> <TR> <TD height="50px">【(1)】</TD> <TD vAlign=top width="165px" rowSpan=2>【(2)】</TD></TR> <TR> <TD vAlign=top>【(3)】</TD></TR></TABLE> 【-------HTML END---------】

    • ベストアンサー
    • HTML
  • テーブル内にスペースができてしまうのはなぜ?

    テーブル内にさらにテーブルを入れた際、一部のセルだけ上部にスペースが空いてしまい 困っています。 下記のhtmlですが、左はテーブル内にテーブルを入れてもスペースができませんが 真ん中だけどうしても上にスペースが空いてしまいます。 全角スペースが隠れていないか確認しましたが無理でした。 ネットでもいろいろ調べましたが分かりませんでした・・・。 これは何が原因なのでしょうか? よろしくお願いします。 --------------------------------------------------------- <html> <head> </head> <body> <table border="1" width="750"> <tr><td width="150" valign="top"> <table border="1" cellspacing="0" cellpadding="0" width="140"> <tr align="center"><td bgcolor="#green">menu</td></tr> </table> </td> <td valign="top" width="480"> <table border="1" cellspacing="5" cellpadding="0" width="480"> <tr><td bgcolor="#d8de97" height="15" align="left" colspan="2">見出し</td></tr>  <tr><td bgcolor="#FFFFCC" width="240">項目名</td>  <td bgcolor="#FFFFCC" width="240">項目名</td></tr>  <tr><td bgcolor="#FFFFCC" width="240">項目名</td>  <td bgcolor="#FFFFCC" width="240">項目名</td></tr> </table> </td> <td width="120" valign="top">広告部分</td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • IE以外のブラウザで隙間ができる

    お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30">&nbsp;</td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30">&nbsp;</td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの上下線を消したい

    タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか? 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。

    • ベストアンサー
    • HTML
  • テーブルタグ

    <table> <tr> <td height="30" width="100" style="border-right:2px dashed #dd0044;border-bottom:2px dashed #dd0044;"> </td> </tr></table> 上記タグを使うと、何も表示されなくなります。 セルには文字なしの線のみを出したいのですが・・・ タグに誤りがあればご指摘頂きたいです。

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS

専門家に質問してみよう