HTML

初めて質問させて頂きます。

現在 HTMLを学んでいるのですが tableに挿入した画像を
テキストの右に並べるという課題が出ました。

１日かかって色々ネットで調べたりもしましたが
どうしても table内の画像を動かす方法が見つかりませんでした。

表は左に見出しが縦に７つ並びその見出しごとに右に内容欄が
横並びにあり一番下に左寄せで画像がある（まるでマージンの中にあるように
見えます）
HTMLでimgを設定したところこのような形になってしまいました。

課題の回答は内容欄の横にspanで作ったようなテキストスペースが
あり内容欄と同じ背景色に画像が収まっている感じです。

説明が下手ですみません。

ご教授頂けましたら幸いです。

宜しくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

解決しました。

tableにimgを入れる事で解決しました。

投稿2015/02/20 14:52

退会済みユーザー

総合スコア0

tttsak

2015/02/23 01:58

解決おめでとうございます。このスレッドを解決済みにすると他の人に解決済みであることがわかるので、フラグの変更をおねがいします。

退会済みユーザー

2015/02/23 05:30

申し訳ありません＾＾；変更致します＾＾；

行動規範の内容に同意します

すごくざっくりと書いてみましたが、こんな感じでしょうか？
画像はWindows7に標準で入っているサンプルピクチャを選んでいます。
HTML初心者ならこんな感じのソースでどうでしょう？
あまりいい方法ではないですが、テーブルを入れ子にした感じです。
あとは適当に読み解いてください。

lang
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<HTML>
3<HEAD> 
4<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5<TITLE>Test</TITLE>
6</HEAD>
7<BODY>
8<table border="1">
9	<tbody>
10		<tr>
11			<td>見出し1</td>
12			<td>
13				<table border="0">
14					<tbody>
15						<tr>
16							<td>text....................................</td>
17						</tr>
18						<tr>
19							<td><img src="../../Public/Pictures/Sample Pictures/Koala.jpg" width="60" height="40" border="0"></td>
20						</tr>
21					</tbody>
22				</table>
23			</td>
24		</tr>
25		<tr>
26			<td>見出し2</td>
27			<td></td>
28		</tr>
29		<tr>
30			<td>見出し3</td>
31			<td></td>
32		</tr>
33		<tr>
34			<td>見出し4</td>
35			<td></td>
36		</tr>
37		<tr>
38			<td>見出し5</td>
39			<td></td>
40		</tr>
41		<tr>
42			<td>見出し6</td>
43			<td></td>
44		</tr>
45		<tr>
46			<td>見出し7</td>
47			<td></td>
48		</tr>
49	</tbody>
50</table>
51</BODY>
52</HTML>

投稿2015/02/19 02:02

tttsak

総合スコア43

退会済みユーザー

2015/02/19 05:05

迅速なご回答　有難うございます＾＾ソースのご提供　誠に感謝致します。ソースを拝見しましたところ　自分のはimgを一番したの　上記のソースでいう見出し７の下に書き込んでしまっていました＾＾；やはり　書き込みの位置で違いが出るのでしょうか？ご回答に　質問で返答致してしまい　申し訳ありません＾＾；

tttsak

2015/02/19 10:49

ututunyanco様ソースの対象の部分だけでよいので、投稿されますと、理解がしやすいのですが。または、HTMLではく実際の実現イメージの画像でもよいので、アップしていただく方が、解決は早いと思います。

退会済みユーザー

2015/02/19 13:04

↓見出し　↓内容欄 _____________________ |__| _______｜　　　　　｜　　 |__| _______｜画像　　　｜ |__| _______｜＿＿＿＿＿｜学校課題のため原本（画像・ソース）は載せることが出来ませんでしたのでイメージを記号を組み合わせて作ってみました　レイアウトが崩れていいましたら申し訳ありません。

tttsak

2015/02/19 13:15

少しヒント左からA列、B列、C列とします。 A列、B列にはそれぞれ7行あり、文字列が入ります。 C列は7行が結合したもので画像が入ります。ここまでの認識があっていれば、 <td rowspan="7">という方法でセルを縦に結合させると解決できると思います。 rowspanで検索すると見つかると思いますよ。まぁ参考程度に見つけたサイトのリンク貼っておきます。 http://www.tagindex.com/html_tag/table/td_span.html 課題とのことですので、後は自力でがんばってみてください。また詰まったら質問をされると良いでしょう。

退会済みユーザー

2015/02/19 13:19

丁寧なご説明　有難うございます。頑張って解きたいと思います＾＾　

行動規範の内容に同意します

初めまして。

どのようなソースコードかわかりませんが、
CSSでfloat rigthで行きませんかね？？

http://www.htmq.com/style/float.shtml

spanタグを入れるのもちょっと不可思議な気が・・・。

投稿2015/02/18 22:07