html言語で、画像とテキストを並べる場合

質問

以下のようにテキストと画像を並べたい場合、ソースの記述はどのようにしたら良いでしょうか？どうも、ＨＰ作成のアプリケーションソフト（FrontPageExpress、マイクロソフトワードなど）では上手くいかなくて、タグ手打ちにしてやるう！と喚いているのですが。

---text---　　　　　　■■■■■■■■
----------　　　　　　■　　　　　　　　■
　　　　　　　　　　　　　■　　　画像　　　　■
　　　　　　　　　　　　　■　　　　　　　　　■
　　　　　　　　　　　　　■　　　　　　　　　■
　　　　　　　　　　　　　■■■■■■■■

両端に余白を持たせたくもあります。ソースを<blockquote></blockquote>で囲めばＯＫ？

逆に、
　　　　　　　　　　　　　　■■■■■■■■
　　　　　　　　　　　　　　■　　　　　　　　■
　　　　　　　　　　　　　　■　　画像　　　　■
　　　　　　　　　　　　　　■　　　　　　　　■
－－－text－－－　　　■　　　　　　　　■
－－－－－－－－　　　■■■■■■■■

と表示したい場合（下を揃える）、どう記述すればいいでしょうか？

なるべく簡潔なタグになるようお願いします。
あと、FrontPageExpressはタグ手打ち入力は、出来ないんでしょうか…。

回答No.5

onimotsu · ベストアンサー

>文章｜文
　　　　章
>になってしまいました！
>二つ目のセル？が、どうも幅が狭いらしい…

ならば、

<TABLE border="0" width="500" height="100">
<TBODY>
<TR>
<TD width="200">あああ</TD>
<TD width="300">かかか</TD>
</TR>
</TBODY>
</TABLE>

<TABLE border="0" width="500" height="100">
　→width="500"がテーブル全体の幅
<TD width="200">あああ</TD>　→左のセル
<TD width="300">かかか</TD>　→右のセル

なお、半角の英数字を使用した場合は
幅が指定した値より広がることがあります。

お礼

何度も有り難うございました。
やっつけ仕事ながらどうにかこうにか、ええもう。
ひとまずは質問を締め切りますが、また何か判らないことがあったら厄介になりたいと思います。

回答No.4

ebis

もう答えはでているようですが、余白を作る別の方法として。

<TABLE border=0>
<TR>
<TD width="50">
<TD>
<table border=0>
<tr><td>
文章・・・・
<td>
<img src="画像ファイル">
</table>
</TABLE>

とか

<TABLE border=0>
<TR>
<TD width="20%">
<TD width="60%">
<table border=0>
<tr>
<td>
文章・・・・
<td>
<img src="画像ファイル">
</table>
</TABLE>

と記述する方法もあります。参考までにどうぞ。
（省略可能タグは省いてます）

お礼

いや！未だ出ておりません答え！
さっきから必死に、行ったり来りを繰り返して
「うう…歪んだ！歪んだヨ～！！なぜ？なぜなのッッ！？」
とか叫んでます。
タグの記号の意味を今一つ理解していないので、ひたすら試行錯誤の繰り返しでございます。

回答No.3

onimotsu

補足ありがとうございます。

テーブルの外の余白ですね。

考え方がいろいろあるのですが、
テーブルの外の余白を設定するには
スタイルシートを使用すれば良いと思います。

例えばこんな感じで。

<TABLE style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;">

テーブルを中央に持ってくるには
（　<CENTER>　を使います）

<CENTER>
<TABLE style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;">

</CENTER>

>右端の線を基準に並べたいのですが
（　<TD align="right">　を使います）

<CENTER>
<TABLE width="241" height="115" style="margin-top : 10px;margin-left : 10px;margin-right : 10px;margin-bottom : 10px;">
<TBODY>
<TR>
<TD>111111111</TD>
<TD align="right"><IMG src="***.JPG" width="140" height="105" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>

お礼

ぎゃー！ご呈示いただいたソースをコピー＆ペーストしたら…

文章｜文
　　　　章
になってしまいました！
二つ目のセル？が、どうも幅が狭いらしい…

回答No.2

onimotsu

上揃えの場合

<TABLE width="400" height="200">
<TBODY>
<TR>
<TD valign="top">11111111111111111</TD>
<TD valign="middle"><IMG src="***.JPG" width="140" height="105" border="0"></TD>
</TR>
</TBODY>
</TABLE>

下揃えの場合
<TABLE width="400" height="200">
<TBODY>
<TR>
<TD valign="bottom">11111111111111111</TD>
<TD valign="middle"><IMG src="***.JPG" width="140" height="105" border="0"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>

border="0"で枠線消去です。

>両端に余白を持たせたくもあります。

どこの両端？でしょうか。

>FrontPageExpressはタグ手打ち入力は、出来ないんでしょうか…。

あまり使ったことがありませんがそのようですね。

お礼

＞どこの両端？でしょうか。
テキストと、画像の、さらに両端です。

■■テキスト　　　　　画像■■

↑■で表示した領域です。一定の幅以内で収めたいのです。
＞あまり使ったことがありませんが
私も初めて使ってます・・・ワードの使い勝手の悪さに「少しはましだろうか」と思ってこちらを使用したのですが・・・もしかしてワードの方がまだましだった？

回答No.1

master-3rd

そのままだと面倒なので、整理しやすいように枠でくくってみてはどうでしょう。
枠を非表示にして、文字列が中央の場合

<TABLE>
<TBODY>
<TR>
<TD>---------------------------<BR>
　　 -------------TEXT----------<BR>
　　　　　---------------------------</TD>
<TD><IMG src="/pict.gif"></TD>
</TR>
</TBODY>
</TABLE>
で。
文字列が上の場合
<TD valign="top">---------------------------<BR>
に入れ替え。
文字列が下の場合
<TD valign="bottom">---------------------------<BR>
で変更可能です。

お礼

えーと、つまり
ーーーーーーーーーーー
｜テキスト　｜　画像｜
ーーーーーーーーーーー
という表を作れ、ということですか？
そしてその表のグリッド線を非表示に？

補足

それと、画像は画面右端に並べたいのです。
テーブルを使用すると、画面の大きさによって、いつも右端に来る、とは限らなくなってしまうでしょう？
画像が後から増える可能性もあるので、

　■■■画像１■
　　　 ■画像２■
　　■■画像３■
という具合に右端の線を基準に並べたいのですが（・・・表示で歪まずでてくれるだろうか）。
・・あ、歪んだ。なんで歪むのか・・・