- ベストアンサー
html、テーブル内にテーブル。表示位置
htmlで<table>タグを使って テーブルを作成しました。（これをテーブル(1)とします。） このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。（ここで作成したテーブル（表）をテーブル(2)とします。） つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。 ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。 そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。 どうしたらよいでしょうか？ 教えてくださいよろしくお願い致します。
- pmaster
- お礼率46% (104/222)
- ホームページ作成ソフト
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。 テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。 <TABLE> ここはテーブル(1) <TBODY> <TR> <TD align="left"> <TABLE> ここからテーブル(2) <TBODY> <TR> <TD>
その他の回答 (4)
- Ysan
- ベストアンサー率32% (44/136)
明らかに間違っていると思われます。 まず、内側のテーブル(2)のタグに『align="left" valign="top"』の 指定をしても意味が無いと思われます。 外側のテーブル(1)の方に指定するべきだと思われます。 また、ご存知だとは思いますが、align="left" valign="top"』の 指定は、<table>タグではなく、<td>タグの中に書くべきです。 初歩がわからないのであれば、もういちど勉強されてはどうでしょうか。
- pongo
- ベストアンサー率24% (17/69)
間違えがない限り、align、valignの指定をしない場合のテーブル内は、左よりの中央にくるはずです。 スペルミスがないか今一度チェックしてみて下さい。
<table width="200" border="1"> <tr> <td> <table width="150" border="1"> <tr> <td>中のテーブル</td> </tr> </td> </tr> </table> －－みたいな感じですか？ とりあえず、左寄せで表示されたんだけど＜中のテーブル。 差し支えなければソースを。
補足
<html> <head> <title>testpage</title> <style type="text/css"> body { margin:0px; } .main { border-collapse:collapse; border-style:solid; border-color:blue; border-width:0px 7px 0px 7px; } .menu1 { border-collapse:collapse; border-style:dotted; border-width:3px; border-color:red; } .menu2 { border-style:dotted; border-width:3px 0px 3px 0px; border-color:red; } .top-table{ font-weight:bold; border-color:blue; border-style:solid; border-width:0px 0px 7px 0px; } </style> </head> <body bgcolor="green"> <table align="center" border="0" class="main"> <tr><td width="800" height="100" bgcolor="white" class="top-table" colspan="2"> <!--title--><center>testpage</center></td></tr> <tr><td width="200" height="1000" bgcolor="white"> <!--menu--> <table border="0" class="menu1" width="180" align="left" valign="top"> <tr><td class="menu2">contents1</td></tr> <tr><td class="menu2">contents2</td></tr> <tr><td class="menu2">contents3</td></tr> <tr><td class="menu2">contents4</td></tr> <tr><td class="menu2">contents5</td></tr> <tr><td class="menu2">contents6</td></tr> </table> </td> <td width="600" height="1000" bgcolor="white">トップページ</td> </tr> </table> </body> </html> ソースになります。今回の説明には不要なCSSなどのソースが多く読みづらいです。申し訳ございません。 <!--menu-->のところが”質問”で言うところのテーブル(2)になります。 よろしくお願い致します。
- パんだ パンだ（@Josquin）
- ベストアンサー率30% (771/2492)
テーブル１のセルの中（つまり<tr><td></td></tr>の中）にテーブル２を置いていますか？ <td>の方で align="left" valign="top" を使ってみてください。
関連するQ&A
- テーブルにCSSの枠のつけ方
はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページhttp://www.rakuten.ne.jp/gold/royalparty/ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- テーブル内に２つのテーブルを作成した場合の位置の固定
ＨＴＭＬでテーブルの中に２つのテーブルを作成しました。 簡単に書くと以下のような感じです。 <table border="1"> <tr> <td align="center" valign="top"> <table border="1"> <tr> <td>hogehoge</td> </tr> </table> <br> <br> <table border="1"> <tr> <td>mogomogo</td> </tr> </table> </td> </tr> </teble> テーブル内の一つ目のテーブルをテーブルの上部に、もうひとつのテーブルをテーブル内の下部に表示したいのですがよい方法があるでしょうか？
- ベストアンサー
- HTML
- テーブルの位置指定について
html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- tableタグに右に回り込みの位置
tableタグに右に回り込みを入れたのですが<table align="left"> CSSのでtable全体と回り込みをした文字を上の方に移動させたいのですが これが回り込みをした文字しか移動しなくて困っています。 <div style="position:relative; bottom:20px"> <table border=1 align="left"> <tr> <td>表の内容</td> </tr> </table> 回り込み </div> が例えなのですが、何か打開策など御座いませんか？
- ベストアンサー
- ホームページ作成ソフト
- テーブルの配置
お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの位置
テーブルを上下に２つ表示させたいのですが、うまく表示できません。 <table border="0" cellspacing="0" align="center"> ・・・ </table> <table border="0" cellspacing="0" align="center"> ・・・ </table> としていたときは、ちゃんと上下に２つ表示されていたのですが、 <table border="0" cellspacing="0" align="left"> ・・・ </table> <table border="0" cellspacing="0" align="center"> ・・・ </table> にすると、左右に２つ表示されてしまいます。 どうしてでしょうか？
- ベストアンサー
- HTML
- tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。 この表の横の位置をブロックとしてとらえて移動させることはできる でしょうか？？
- ベストアンサー
- HTML
- ホームページのテーブルをWordに貼り付けると左にづれる？
以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか？ コード： <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード： <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が０ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- DIV の中にTableを配置すると、下の表示されてしまいます
どなたか教えてください！ <tr> <td> <div style="height:400px; width:470px; overflow-y:scroll;" align="left" valign="top"> <table>・・・ スクロールバーの中にテーブルで写真を並べて作成しています。 私のブラウザの環境ですと、うまく表示されますが、 友人のパソコンで見ると、Ｄｉｖの部分から下が、画面の下のほうへずれて表示されてしまいます。 そもそもＤＩＶの中にＴＡＢＬＥは配置してはいけないのですか？ 環境によって・・・何か原因があるのですか？（ＩＥのバージョンは一緒でした。） 宜しくお願いいたします。
- 締切済み
- HTML
- TABLEの高さを固定したいのですが…
現在TABLEタグを利用してHPのレイアウトを作成しているのですが 高さが固定できずに困っています。 ソースですが <table border="0" cellpadding="0" cellspacing="0" width="600" height="800"> <tr> <td width="300" height="600" background="img/back1.jpg" align="left" valign="top"> <p>【１】</p> </td> <td rowspan="2" align="left" valign="top" width="300"> <p>【２】</p> </td> </tr> <tr width="300"> <td background="img/back2.jpg">【３】<img src="img/back2.jpg"></td> </tr> </table> これで ┌───────────────┐ │ │ │ │ │ │ │ │ │ │ 【１】 │ │ │ │ │ ├─────┤ │ │ │ 【２】 │ │ │ │ │ 【３】 │ │ │ │ │ │ │ │ │ │ │ └─────┴─────────┘ という形を作成したいと考えています。 この時【１】は高さ600pxの固定サイズで、【２】に画像や文章が追加され縦に伸びるたびに【３】に設定してある背景画像（background="img/back2.jpg"）がループしながら縦に伸びていくようにしたいと考えています。 ところがIE8以降で確認すると、【１】が固定されずに【２】に合わせてどんどん伸びてしまいます。 逆に【３】が固定されているようです。 別にテーブルを使用しなくても【１】だけが固定されて【２】と【３】が内容によって同時に動き、かつ【３】の背景が伸びていけば構わないので「別のやり方があるよ」というアドバイスだけでも頂ければと思い質問させていただきました。 よろしくお願いします。
- 締切済み
- HTML
お礼
ぉ～～ みなさんありがとぅございましたぁ。できました。できましたぁ～。こんな単純なことだったんですね・・・ぅ。