非常にわかりにくいタイトルで申し訳ありません。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>
No.2ベストアンサー
- 回答日時:
[回答番号: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>
上記のソースの通りにやったらできました!まだまだ勉強中な私相手にすごく丁寧な説明ありがとうございました!本当にありがとうございました!
No.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はまだまだ勉強中
とのことですので、先ずは、上記のことを踏まえた上で、お示しの「↓ソース」を作り直してみてください。
この回答への補足
早速のご返答ありがとうございます!おっしゃる通り色々抜けていてすみません。頂いたご意見の通りやってみたのですが、下記のような形で合ってますでしょうか?このソースでやってみたら、画像がページの左上に小さく出て、その中に「セル内の文字列」と言う言葉がギリギリ入っていました。ページいっぱいに画像を出して、その中心に内側の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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
楽天の無料HPで、HLMTを使っ...
-
fc2ブログに表を載せたいのです...
-
はてなブログ 設定
-
ライブドアブログ親子カテゴリ...
-
gooブログの文字サイズ
-
goo blogで下書きを保存して、...
-
Excelのクールな調査報告書テン...
-
goo ブログの下書き保存方法
-
FC2ブログのタイトル文字の色変...
-
gooブログ の 下書きの保存 方法
-
iPhoneで作れる高級感のあるオ...
-
FC2ブログでコメント投稿者の名...
-
アメブロの更新通知メールで迷...
-
ワードプレス、cocoonでタイト...
-
FC2ブログ アクセス解析
-
FC2ブログでの固定ページについて
-
テンプレートのカスタマイズに...
-
スクロールバーの色を変えるには?
-
ノーコードツールでテンプレー...
-
Seesaaブログ 横幅設定変更に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
fc2ブログに表を載せたいのです...
-
wordpress,simplicity スマホ時...
-
ブログ記事にスペースを入れたい
-
tableの中のtableの表示と外側...
-
楽天アフィリエイトについて 現...
-
FC2ブログで”記事本文”に毎回定...
-
Seesaaブログで記事内に表を載...
-
タグ[table]の自動改行について
-
文字に背景色を入れる時、隙間...
-
アメブロhtmlのタグの使用
-
表の中の文字配置を右寄せにし...
-
iPhoneで作れる高級感のあるオ...
-
三つ折りのリーフレットを作りたい
-
はてなブログ 設定
-
Becky!ver.2で、返信・転送用テ...
-
FC2ブログでプロフィールが2つ...
-
Powerpointの表のスタイルで好...
-
ワードプレスに詳しい方に質問...
-
FC2ブログ アクセス解析が反映...
-
中央寄せの解除
おすすめ情報