• 締切済み

テーブルタグで画像を並べて画像と画像の間にスペースを作るには?

テーブルタグで画像を並べることはできたのですが、 画像と画像の間をもう少し空けるには どうすればいいでしょうか? <td> </td> を1つめと2つめの画像の間にいれれば スペースができるとおもったのですが、 駄目みたいです。 よろしく、お願いします。

みんなの回答

noname#20941
noname#20941
回答No.2

↓こちらのページの解説を参考になさってはいかがでしょう。 http://berry.littledear.org/table/table0-9.htm

参考URL:
http://berry.littledear.org/
全文を見る
すると、全ての回答が全文表示されます。
noname#227760
noname#227760
回答No.1

何も記述していない 幅1ドット×高さ1ドットのスペース画像を用意し、 表示させたい画像の間に  <img src="スペース画像のアドレス" width="あけたい横幅"> のように記述すれば、ご希望の幅をあけることができます。 もしくは、ご質問にあるような<td>タグに width="XX" とし、あけたい幅を記述すれば、できるかもしれません。

splashmax
質問者

お礼

ありがとうございました。 できました。O(≧▽≦)O ワーイ♪

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • テーブルタグを使ってフォームを作成してるのですが…

    ごくごくシンプルなフォームのページを、テーブルタグを利用して作成しています。 thとtdのborder-bottomに線を入れた、至ってシンプルなものです。 そこでふと、画像のようにthの項目名とtdの入力スペースの間に、 区分するためのラインを入れるにはどうしたら良いのだろうかと思ったのです。 cellpaddingを指定してみたり、tdに背景を配置したらどうだろうかとか あれこれ考えてみたのですが思うような答えにたどり着けませんでした。 画像のように、上下の線を途切らせず、かつ、上下の間にスペースを設けた上で、 区分するためのラインの入れ方、ご存じの方いらっしゃいましたらご教授いただけませんでしょうか。 ただし、jQuerytoやHTML5など最新技術は使わないシンプルな手段に限らせていただきます。

    • ベストアンサー
    • CSS
  • テーブルタグについてなんですけど・・・

    下記のテーブルタグを使うと <Table Border> <Tr BgColor=#d5eaff> <Td>あ</Td><Td>い</Td> </Tr> <Tr BgColor=#ffffd5> <Td>う<Td><Td>え</Td> </Tr> </Table> これをHPに編集して反映させてみると上にテーブルと同じ色の棒線みたいなものが現れるんです。 http://heo.jp/tag/table/bgcolor.html  ここから、テーブルタグを頂きました。 どなたか、わかる方がいましたら回答お願いします。

  • テーブルタグについて

    私は今テーブルタグでレイアウトする勉強をしています。よくHPでみかける作り方ですが、セルを縦に設定したいと思っています。作り方がテーブルタグの中にテーブルタグをいれて作っているようなのですが、実際私が作ってみると、左右のテーブルの位置が行数が違ってくると少ない行数の方が上下にセンタリングされてしまい、トップの位置がずれてしまいます。 何回もHPを見て、これはと思うタグをいれてやってはみたのですが、うまくいきません。 下に私が作った「html」をのせましたので、どなたかわかる方、教えてください。お願いします。 <参考html> <html> <head> </head> <body> <table border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <td> <table> <tr> <td> <table border="1"> <tr> <td>これは日本昔話です。</td> </tr> <tr> <td>むかしむかしあるところにおじいさんとおばあさんが住んでいました。ある日おじいさんは芝刈りに、おばあさんは川へせんたくにいきました。</td> </tr> </table> </td> </tr> </table> </td> <td> <table border="1"> <tr> <td> <table border="1"> <tr> <td>私はWEBの勉強をしています。</td> </tr> <tr> <td>なかなかむずかしいです。。</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

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

    テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています!! <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>

  • テーブルタグの横のスペース

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

  • テーブルタグの間の枠を無くしたい!

    私はHPを作っているのですが、テーブルタグを使用した時に、 テーブルとテーブル、もしくはセルとセルの間に空間が開いてしまいます。 TABLE部分は<TABLE>としか入力していませんが、 <TABLE border="0">と入力しても空間が開いてしまいます。 これは元からのテーブルタグの性質なのでしょうか? それとも私のタグの記述が間違っているのでしょうか? この空間を消す方法を知っている人は教えて下さいm(_ _)m! 回答待ってます。

    • ベストアンサー
    • HTML
  • テーブルタグの横に文章が入らない・・・

    こんにちは。htmlを作成しているんですが、 テーブルタグの横に、文章をいれたいのですが、 やり方がわかりません。 下のhtmlでやると、テーブルタグの上に文章が表示されてしまいます。 わかる方いらっしゃいましたら教えてください。 <Table Border> <tr><td>内容</td><td>内容二</td></tr> (上記一行×4) <b>文章題名</b> 本文 ぜひとも、宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルタグについて教えてください

    無料ホームページサイトのエムペで小説を書いています。 アクセスは全てパソコンから、ブラウザはIEでした。そこからだとテーブルタグはちゃんと機能しています。 しかし、携帯や他のブラウザ(fire foxやGoggle chromeだと反映されません。 今気になる箇所は2点。トップページと小説ページで使えるテーブルタグです。 まず、トップページ。背景画像の上にテーブルを固定しています。 パソコンは数値でサイズを固定したテーブルタグを使用しています。これはどのブラウザでも正常にテーブルが機能しています。 携帯は倍率でサイズを固定したテーブルタグを使用しているのですが、画像もテーブルも読み込まれていませんでした。 テーブルタグ自体使えないのならばと、背景画像用の画像を横方向に連続させて帯のように上下に張り付けたかったのですが、これも読み取りません。私の携帯はauで2年前のものですが、タグを読み取るには古すぎたのでしょうか? 次は小説ページについてです。 パソコンから小説ページを開くと、ウィンドウに合わせて文章が横にだらっと流れてバランスが悪いのでテーブルタグで整え中央に固定しています。しかし、テーブルタグで整えられるのはIEとsphなんとかだけで、fire foxとgoggle chromeはテーブルされないまま中央揃えされてしまいます。トップページはテーブル機能が読み込まれて、何故小説ページは読み込まれないのでしょうか? テーブルタグに詳しい方、どうかアドバイスを教えてください。

  • テーブルタグで、この様な表を作りたいです

    実は、現在テーブルタグを使って この2つの様な表を作りたいと思います http://firestorage.jp/download/6521d87b9576b05425f88f84f5d1f104da854e59 ちなみに、上記表の赤い線に関しては 分かり易くする為に、線の部分を赤く着色してるだけで 色は付かなくて構いません ただ…この色を付けた状態でも作れるなら 教えて頂ければ、その方法も勉強したいと思います それで、現在は上の表に対しては この様なタグで <table border=1><tr><td>画像</td><td>解説</td><td>画像</td><td>解説</td><td>解説</td></tr><tr><td>画像</td><td>解説</td><td>画像</td><td>解説</td><td>解説</td></tr><tr><td>解説</td><td>解説</td></tr></table> 下の表に対しては、この様なタグで作りました <table border=1><tr><td></td><td>文字</td><td>文字</td><td>文字</td></tr><tr><td rowspan="2" width="10">文字</td><td>文字</td><td>文字</td><td>文字</td></tr><tr><td>文字</td><td>文字</td><td>文字</td></tr></table> しかし、この場合余計な所にも枠が出来てしまう為 この様な状態で出来上がります http://firestorage.jp/download/a52b36dd5a3f1838a7d482c2c07e68062a846e7b それで、私の知識の範囲では それぞれを単独で作るしか方法が分からず この様に <table border=1><tr><td>文字</td><td>文字</td><td>文字</td><td>文字</td><td>文字</td></tr></tr></tr></table><table border=1><tr><tr><td>文字</td><td>文字</td><td>文字</td></tr></tr></table> 2つに分けて、それぞれを付けるしか分かりません この場合は、この様な表として反映しますが http://firestorage.jp/download/3fe730975c59ffcf275ba5899ea6a385d2c070e8 下の表に関しては分かりませんでした つまり実際の反映としては、こんな感じなんです http://firestorage.jp/download/76d64dcca6e82f11bfa71d3840cf302310e2206a そこで聞きたいんですが 上記の2つの様な表をテーブルタグで作る方法を 教えて頂けないでしょうか?

  • テーブルタグについて

    楽天ブログの日記用テーブルを、最初は人から借りていましたが 自分でオリジナルなものを作りたくなって、いろんな人のテーブルタグを見ようみまねでHTMLタグを勉強しながら、どうにか簡単なものはできるようになってきました。 欲が出てきて、テーブルの中に 例えば右上・左下もしくは左上・右下に画像(イラスト等)を配置した テーブル作りに挑戦しているのですが、うまくいきません。 正しいHTMLタグを教えてください。 試してみたソースです ↓ <table cellpadding="30" cellspacing="1" border="0" style=" width: 100%; background-color: #AB8F74; "><tr><td bgcolor="#ffffff" background="左上の画像アドレス" style="background-repeat: no-repeat; background-position: left top;" valign="top" height="266" align="center"><td bgcolor="#ffffff" background="右下の画像アドレス" style="background-repeat: no-repeat; background-position: right bottom;" valign="top" height="266" align="center"> ■ここに日記内容■ </td></tr></td></tr></table> これだと余計な線が入ってしまいます。 ひとつのテーブルにしたいのです。 よろしくお願いします。