同じ行に間（空欄）を空けて表示させるには

締切済

質問者：taku620
質問日時：2008/12/05 20:23
回答数：3件

全くの初心者です。
現在基礎的な部分を学んでいますので
お恥ずかしいのですが教えて頂きたいことがございます。
以下のソースを実行しますと

<html>
<body>

<div align="left">
<ahref="http://www.yahoo.co.jp"><TD width="100%"><FONT size=5>Yahoo! </FONT></TD></a>

<img src="sankaku.gif">=三角　<img src="sikaku.gif">=四角　

</body>
</html>

表示は

Yahoo!と三角のイメージ、四角のイメージがつながって表示されます。
これを

Yahoo!【　　　　～ここに間を作りたい～　　　　】三角のイメージ、四角のイメージ

と表示させたいのです。

申し訳ありませんがご教授お願い致します。

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： shioz
回答日時：2008/12/06 02:12

テーブルを使っているので、"Yahoo!"と"三角""四角"をそれぞれ別のセルに分けて、"Yahoo!"と"三角"の間には空白のセルを作ってwidthで幅を調整してはいかがでしょうか？

No.1の回答のように三角と四角は同じセルでもいいですが。

<tr>
<td>Yahoo!</td>
<td width="xxx"></td>
<td><img src="sankaku.gif"></td>
<td><img src="sikaku.gif"></td>
</tr>

わけあって、Yahoo!～四角を同じセルにしたい場合は、もう一つ、透過gifで1ピクセルx1ピクセルの画像を用意して、間に入れるといいと思います。
仮に、透過gifを"space.gif"とすると以下のようになります。
<tr>
<td>Yahoo! <img src="space.gif" width="xxx"><img src="sankaku.gif"><img src="sikaku.gif"></td>
</tr>

開けたい幅が広い場合は、画像を使ってwidthで任意に(画像の)幅を設定するほうがいいと思いますが、1文字分くらいなら、文字コードで置き換えて文字としてのスペースを挿入するといいと思います。
以下の例ではスペース（）を２つ入れています。
<tr>
<td>Yahoo! <img src="sankaku.gif"><img src="sikaku.gif"></td>
</tr>

タグ表記が化けてしまうかもしれないので、この回答と同じ内容を下記にあげておきます。
http://uproda11.2ch-library.com/src/11139536.jpg

参考URL：http://www.rfs.jp/sb/html/other/char/char1.html

- 0
- 件

通報する

No.2

回答者： yoyox
回答日時：2008/12/05 21:06

自動リンクのせいで表示が省略されてしまいましたね。

半角スペースを挿入しておきます。

<html>
<body>

<table width="100%">
<tr>
<td><font size=5><a href="http://www.yahoo.co.jp">Yahoo!</a> </font></td>
<td></td>
<td><img src="sankaku.gif"><img src="sikaku.gif"></td>
</tr>
</table>

</body>
</html>

- 0
- 件

通報する

No.1

回答者： yoyox
回答日時：2008/12/05 21:00

TD要素の使い方が根本的に間違っています。

どこで習いましたか？ or 何を参考にしましたか？

TD要素は表の一つのセルを表す要素で、TR要素の子要素、TABLE要素の孫要素である必要があります。また、TD要素はA要素の子要素にすることはできません。さらに、DIV要素が閉じられていないのも気になります。

あまり推奨されないやり方ですが、テーブルレイアウトを用いると初心者には分かりやすいでしょう。
<html>
<body>

<table width="100%">
<tr>
<td><FONT size=5><a href="http://www.yahoo.co.jp">Yahoo!</a></FONT></td>
<td></td>
<td><img src="sankaku.gif"><img src="sikaku.gif"></td>
</tr>
</table>

</body>
</html>
他にも必要な表記（DOCTYPE宣言、alt属性など）はたくさんあるのですが、簡単にするために省略してます。

失礼を承知で申し上げますと、このままの知識で残りのページを製作しても行き詰まるのは目に見えています。今一度、正しいHTMLの知識を勉強した方がよいでしょう。

参考URL：http://www.kanzaki.com/docs/htminfo.html