こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

tableの中のtableの表示と外側(大きい方)のtableに背景画像を表示させる方法

非常にわかりにくいタイトルで申し訳ありません。tableの中にtableを入れて、外側(大きい方)のtableだけ背景画像を表示させたいのですがどのようにすればいいのでしょうか?下記ソースまでは作ったのですが、中(小さい方)のtableがなぜか右よりになってしまいます。小さいtableを真ん中にして、そのtableの周りを画像で囲みたいのですがどのようにすればいいのでしょうか?もちろん、下記ソースでなくても全然かまいません。htmlはまだまだ勉強中で詳しい方からすれば非常に見難いソースで申し訳ありませんが、ぜひお力添えいただけたらと思いますのでよろしくお願いします。
↓ソース


<html>
<head>
<body>
<title>タイトル</title>

<TABLE background="画像jpg"><TD width="10%" height="10%"><TR></TD><TD height="100%"></TD><TD width="100%" height="100%"><TD width="100%"><TD>

<TABLE border width="600" height="100%" bgcolor="white">
 <TR>
  <TD>


文章

</TD>
 </TR>
</TABLE>
</CENTER>
</body>
</html>

投稿日時 - 2009-11-16 22:01:01

QNo.5453567

すぐに回答ほしいです

質問者が選んだベストアンサー

[回答番号:No.1] の DOUGLAS_ です。

>頂いたご意見の通りやってみたのですが、
>下記のような形で合ってますでしょうか?
・各タグの開閉がそれぞれ対になっていること(<img>・<br /> などは閉じタグがありません)
・タグの順序が入れ子順になっていること(<あ><い><う><え>中心</え></う></い></あ>)
・<table> タグ内の順序が <table><tr><td>セル内の文字</td></tr></table> の順になっていること
等は満たされていますので、先ずは問題ないかと存じます。

>このソースでやってみたら、
>画像がページの左上に小さく出て、
>その中に「セル内の文字列」と言う言葉がギリギリ入っていました。
 <table> タグは、慣れない間は、扱いの面倒なタグです。
・<td> ~ </td> の中に何かを入れて内側から広げる
とか、
・強制的に「width」・「height」を指定して外側から引っ張る
とかしてやらないと大きくはなれません。

 お示しの例でしたら、入れ子になっている <table> の中には「セル内の文字列」しか入っておりませんので、そういうことになってしまいます。

 <table> タグを扱う場合は、表やセルの状態がどうなっているのか把握しやすくするために、最初の内は「border=1」にでもして枠線を表示した方が分かりやすいですね。
 全体のレイアウトができてから「border=0」つまり枠線を無しにするのがよいかと存じます。

>ページいっぱいに画像を出して、
 これにつきましては、外側の <table> タグ を
<table background="画像" width="100%" height="100%">
とすると外側の <table> が「ページいっぱいに」なりますが、これだけでは、ページ自体の余白部分が埋まりませんので、<body> タグの部分を
<body topmargin="0" leftmargin="0">
にでも変えてみてください。

>その中心に内側のtable
>を持ってくるにはどうしたらいいのでしょう?
これにつきましては、内側の <table> の外にある <td> タグを
<td valign="middle" align="center">
としてください(すでにそうしてくださっていますが...)。
 つまり、外側のセルの「内容物を上下左右真ん中に配置する」ということです。

 以上のことを踏まえて、ざっと下記のようなことで、ご要望が達成できるかと存じます。

<html>
 <head>
  <title>タイトル</title>
 </head>
 <body topmargin="0" leftmargin="0">
  <table background="画像" width="100%" height="100%">
   <tr>
    <td valign="middle" align="center">
     <table border width="600" height="100%" bgcolor="white">
      <tr>
       <td>
        セル内の文字列
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </body>
</html>

投稿日時 - 2009-11-17 08:27:22

お礼

上記のソースの通りにやったらできました!まだまだ勉強中な私相手にすごく丁寧な説明ありがとうございました!本当にありがとうございました!

投稿日時 - 2009-11-17 21:59:16

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

「↓ソース」としてお示しのものを インデント を付けて表示してみますと

1:<html>
2: <head>
3: <body>
4:  <title>タイトル</title>
5:  <TABLE background="画像jpg">
6:    <TD width="10%" height="10%">
7:   <TR>
8:    </TD>
9:    <TD height="100%">
10:    </TD>
11:    <TD width="100%" height="100%">
12:    <TD width="100%">
13:    <TD>
14:    <TABLE border width="600" height="100%" bgcolor="white">
15:     <TR>
16:      <TD>
17:      文章
18:      </TD>
19:     </TR>
20:    </TABLE>
21:  </CENTER>  
22: </body>
23:</html>

というようなことになろうかと存じますが、
>中(小さい方)のtableがなぜか右よりになってしまいます。
という以前に、少々、問題が多いような気がいたしますねぇ。

・「2:<head>」に対する「</head>」がない。
・「4:<title>タイトル</title>」は「<head> ~ </head>」内に書きましょう。

・「5:<TABLE background="画像jpg">」~「21:</CENTER>」につきましては、各タグに対して「閉じタグ」がそれぞれ対になっているかどうか確認するためにも、インデント を配して ソース を書く練習をなさった方がよさそうです。
・基本的に「<table><tr><td>セル内の文字列</td></tr></table>」というような順序になりますので、<table> を入れ子にされる場合は
<table><tr><td> ・・・(※)
 <table><tr><td>
  セル内の文字列
 </td></tr></table>
</td></tr></table>
というような感じになります。

・「21:</CENTER>」につきましては、
>小さいtableを真ん中にして、そのtableの周りを画像で囲みたい
という意志の現れかと存じますが、この場合は「<CENTER> ~ </CENTER>」ではなくて、上記(※)の「<td>」タグを「<td valign="middle" align="center">」というようにします。

>htmlはまだまだ勉強中
とのことですので、先ずは、上記のことを踏まえた上で、お示しの「↓ソース」を作り直してみてください。

投稿日時 - 2009-11-16 22:29:32

補足

早速のご返答ありがとうございます!おっしゃる通り色々抜けていてすみません。頂いたご意見の通りやってみたのですが、下記のような形で合ってますでしょうか?このソースでやってみたら、画像がページの左上に小さく出て、その中に「セル内の文字列」と言う言葉がギリギリ入っていました。ページいっぱいに画像を出して、その中心に内側のtable(上記の質問の欄で<TABLE border width="600" height="100%" bgcolor="white">となっているもの)を持ってくるにはどうしたらいいのでしょう?お手数おかけして申し訳ありませんが、もしお時間あるようでしたら教えていただけると助かります。よろしくお願いします。

<html>
<head>
<title>タイトル</title>
</head>
<body>
<table background="画像">
<tr>
<td valign="middle" align="center">
<table>
<tr>
<td>
セル内の文字列
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2009-11-16 23:00:22

あなたにオススメの質問