テーブルの位置について

解決済

質問者：palayo
質問日時：2008/11/17 17:19
回答数：3件

<img src="..." style="float:right" ...>
の後に文章とテーブルを書いたところ、
テーブルが画像と重なって表示されてしまいます。
画像を右側に、左側の余白に文章とテーブルを表示させたいです。
XHMLT1.0 で、CSSの指定で解決したいのですが、
どのようにすればよいのか、教えていただけないでしょうか。
なお、テーブルはスペースいっぱいに表示したいので、width=100%と指定してます.

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Yanch
回答日時：2008/11/17 21:04

まず、質問に対するアドバイスです。

テーブルの外側のタグで、マージンを設定する。
----------------------------------------------------------------------
<div class="center" style="margin-left: 194px; margin-right: 194px;">
<table cellpadding="0" style="width: 100%">
<tbody>
----------------------------------------------------------------------

これだけだと、ブラウザの横サイズを小さくした時に、デザインが崩れますから、
崩したくない場合は、ボディの横幅を指定しておく。
----------------------------------------------------------------------
<body class="mainIndex" style="width: 1024px;">
----------------------------------------------------------------------

●蛇足
このxhtmlのソースもテーブルをレイアウトに使用しているように見えるけど、
「xhtmlでテーブルをレイアウトの目的で使用するのがよろしくない」理由も、
理解しておいた方が良いかもしれません。
# わかっていて、わざとしているなら、この文章は無視してください。
xhtmlにおいて、ドキュメントとデザインは、分離されている事が望ましい。
とされています。
html部分には、文章と意味を記述し、デザインはスタイルシートに記述します。
tableタグは表を表すのに使用し、そのレイアウトを指定する場合、スタイル
シートをテーブルに適用する事が推奨されます。

何故、このような事がxhtmlで推奨されているかと言うと、xhtmlでは、
従来のウェブブラウザ(例えばMicrosoft Imternet Explorer)等、以外にも、
xhtmlを音声読み上げするブラウザや、点字出力するブラウザからの、アクセスも
想定に入れているからです。目の見えない人や、耳の聞こえない人にも、
ウェブの世界への参加をしやすくするためですね。

そんな都合もありまして、いつの間にかimgタグのalt属性も必須になっています。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
蛇足でいただいた内容も承知しております。
このテーブルはレイアウトのための使用ではなく、
テーブル上に画像を表示しているだけのものです。
（この辺りの解釈については、ここでもめても仕方ないので、
　そういうものだと思っていただければありがたいです）

提示していただいたマージンを設定する方法ですが、
同じようなhtmlをいくつも生成しておりまして、そのhtmlごとに
表示する右寄せ画像の横幅が異なるのです。
ですから、マージンの値を直接していすることなく適切なマージンを取る方法か、
右側に画像をあることを考慮して横幅いっぱいにテーブルを表示する方法
が必要になると思いますが、どちらの方法も分かりません。

なお、自分で試行錯誤してみていたところ、
<div class="center"> をやめて、テーブルに display:inline を指定したところ、
右寄せ画像の左側に表が入りました。
（FireFoxのみ、IEではやっぱり画像の下端まで空白になります）
が、幅いっぱいに、というのが実現できず、各列が最小の幅になってしまいます。
解決策がありましたら、教えていただけないでしょうか？

<a href="img/e9.png"> <img style="float:right" src="img/5f.gif" alt="..." width="184" height="164" /></a>
あああああああああああああああああああああああ
いいいいいいいいいいいいいいいいい,

<table cellpadding="0" width="100%">
<tbody><tr valign="middle">
<td align="right"><img class="middle" src="img/51.gif" alt="..." width="68" height="35" /></td>
<td align="left"><img class="middle" src="img/57.gif" alt="..." width="85" height="35" /></td>
<td class="right" align="right">
<img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-01" name="0001_2008_003-01"><img src="img/a1.gif" class="right" alt="..." width="20" height="33" /></a>
</td> </tr>
</table>

通報する

お礼日時：2008/11/18 13:49

No.2

回答者： Yanch
回答日時：2008/11/17 18:20

まず、自分でどこまで作ったのか、ソースを見せていただきたい所ではありますが、

＞テーブルを使ってレイアウトするのは、XHTML的にはよろしくないかと・・・。
その通りです。

しかし、tableを使用しない場合、色々制約がある上、htmlの内容に修正を
掛ける場合にも、変更箇所が多くなると思うので、tableを使用しておいた方が、賢明だと思います。

もしテーブルを使わないなら、
DIVやSPANを多用すれば良いと思います。その場合、
たぶん、DIVはSPAN内に配置したタグの種類によっては融通の利かない動きをするかもしれませんから、
その都度、何か解決方法を模索すると良いです。

この回答への補足

現状、問題となっているソースです。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head profile="http://purl.org/net/ns/metaprof">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>aaa</title>

</head>
<body class="mainIndex">

<div id="body">

<a href="img/e9.png"> <img style="float:right" src="img/5f.gif" alt="..." width="184" height="164" /></a>
<img class="middle" src="img2a0e.gif" alt="..." width="65" height="31" /> あああああああああああああああああああああああ
いいいいいいいいいいいいいいいいい,

<div class="center"><table cellpadding="0" width="100%">
<tbody><tr valign="middle">
<td align="right"><img class="middle" src="img/51.gif" alt="..." width="68" height="35" /></td>
<td align="left"><img class="middle" src="img/57.gif" alt="..." width="85" height="35" /></td>
<td class="right" align="right">
<img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-01" name="0001_2008_003-01"><img src="img/a1.gif" class="right" alt="..." width="20" height="33" /></a>
</td> </tr>
<tr valign="middle">
<td></td>

<td align="left"><img class="middle" src="img/ea.gif" alt="..." width="112" height="31" /></td>
<td class="right" align="right">
</td> </tr>
<tr valign="middle">
<td></td>
<td align="left"><img class="middle" src="img/a3.gif" alt="..." width="237" height="31" /></td>
<td class="right" align="right">
<img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-02" name="0001_2008_003-02"><img src="img/a2.gif" class="right" alt="..." width="20" height="33" /></a>
</td> </tr>
<tr valign="middle">
<td></td>
<td align="left"><img class="middle" src="img/ee.gif" alt="..." width="241" height="54" /></td>
<td class="right" align="right">
</td> </tr>
<tr valign="middle">

<td></td>
<td align="left"><img class="middle" src="img/99.gif" alt="..." width="54" height="43" /></td>
<td class="right" align="right">
<img class="bottom" src="img/09.gif" alt="..." width="47" height="15" /> <a href="" id="0001_2008_003-03" name="0001_2008_003-03"><img src="img/a3.gif" class="right" alt="..." width="20" height="33" /></a>
</td> </tr>
</tbody></table> </div>

</div>
</body>
</html>

補足日時：2008/11/17 19:23

通報する

- 0
- 件

通報する

この回答へのお礼

ご返信ありがとうございます。
もうひとつの質問
<http://okwave.jp/kotaeru_hosoku.php3?a=13400386& …
と同じソースになりますが、補足にさらしました。

> もしテーブルを使わないなら、DIVやSPANを多用すれば良いと思います。その場合、
> たぶん、DIVはSPAN内に配置したタグの種類によっては融通の利かない動きをするかもしれませんから、
その都度、何か解決方法を模索すると良いです。

DIVやSPANの多用で解決したいのですが、そのDIVやSPANにどういった
スタイルを指定すればよいのか分からないので、
お伺いしている次第です。
何かお分かりでしたら、教えてください。

通報する

お礼日時：2008/11/17 19:29

No.1

回答者： Yanch
回答日時：2008/11/17 17:48

画像のサイズはわかっているはずなので、

テーブルを入れ子にして、外側のテーブルの左に文章。右に画像を配置。
画像を配置した列の幅を指定してあげると、残った幅を文章用に出来るはずです。
----------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
　　　　<meta http-equiv="Content-Style-Type" content="text/css"/>
　　　　<title>画像を右側、文章を左側サンプル</title>
　　　　<style type="text/css">

　　　　</style>
　　</head>
　　<body>

　　　　<table border="0" width="100%">
　　　　　　<tr>
　　　　　　　　<td>
　　　　　　　　　　<table border="1" width="100%">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　<td>左側に文章</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　</table>
　　　　　　　　</td>
　　　　　　　　<td style="width: 256px;">
　　　　　　　　　　<img src="bbb.png" alt="gazou_bbb"/>
　　　　　　　　</td>
　　　　　　</tr>
　　　　</table>

　　</body>
</html>

- 0
- 件

通報する

この回答へのお礼

Yanch様、複数の質問に回答いただきありがとうございます。
こちらの質問もCSSで解決したいのです。
テーブルを使ってレイアウトするのは、XHTML的にはよろしくないかと・・・。

説明がもれていましたが、画像の下枠の部分まで空白が空いた後にテーブルが表示される
（画像とテーブルが横に並ばない）ため、
テーブルを <div style="text-align:center"> と </div> でくくっています。

方法がありましたら教えてください。

通報する

お礼日時：2008/11/17 18:09

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