- ベストアンサー
スタイルシートについて
HPの画面にテーブルを３つ配置することを考えています。 (1)(3) ←数字がそれぞれテーブルの位置関係を示ています (2)(3) ((3)は一つのテーブルです。) 最初は(1)(3)のテーブルを横につなげることを考えましたが (1)(3)の縦の長さが違うデザインのためできませんでした。 横につなげると、テーブルの縦の長さが長いほうに そろってしまうのです。 そこでスタイルシートを使用すればできるのではないかと 思い、(3)をmarginでTOPを10ptにしたのですが そうすると(2)のテーブルの真下にきてしまいました。 スタイルシートを使用してもしなくてもいいので 方法を教えて下さい。よろしくお願い致します。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
<tr>～</tr>が入っていませんでした。 こんな感じですね。 <table border="1" STYLE="position:absolute; top:100px; left:100px;"> <tr><td> abc </td></tr> </table> <table border="1" STYLE="position:absolute; top:200px; left:100px;"> <tr><td> efg </td></tr> </table> <table border="1" STYLE="position:absolute; top:100px; left:200px;"> <tr><td> his </td></tr> </table>
その他の回答 (7)
- arukamun
- ベストアンサー率35% (842/2394)
私の説明不足でした。 <TABLE border="1" STYLE="position:absolute; top:100px; left:100px;"> <td> abc </td> </table> <table border="1" STYLE="position:absolute; top:200px; left:100px;"> <td> efg </td> </table> <table border="1" STYLE="position:absolute; top:100px; left:200px;"> <td> his </td> </table> でいけると思います。
お礼
回答ありがとうございます。 お～できました。感動です。 さっき私がかいたのは、<table>の中に もうひとつ<table>をつくっていましたね。 このやりかただと、自由にテーブルを配置できます。 ありがとうございました。
- void2000
- ベストアンサー率17% (41/229)
＃５です。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE BORDER=1 cellspacing=0 align=left> <tr><TD width=200 height=110><BR></TD></tr> <tr><TD width=200 height=200><BR></TD></tr> </TABLE> <TABLE BORDER=0 align=left><TD width=10></TD></TABLE> <TABLE BORDER=1 cellspacing=0> <tr><TD width=200 height=180><BR></TD></tr> </TABLE> </BODY> </HTML> 見えない<table>を一つ入れるだけです。 これにも align=left を忘れないようにしてください。 同じ方法で右へ何列でも並べることができます。
お礼
回答ありがとうございます。 なるふぉど。こうするんですね。 今までなにげなく見ていたHPもいろいろと 工夫されているんですね。 勉強になります。 ありがとうございます。
- void2000
- ベストアンサー率17% (41/229)
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE BORDER=1 cellspacing=0 align=left> <tr><TD width=200 height=110><BR></TD><tr> <tr><TD width=200 height=100><BR></TD><tr> </TABLE> <TABLE BORDER=1 cellspacing=0> <tr><TD width=200 height=180><BR></TD><tr> </TABLE> </BODY> </HTML> こんな方法でいかがでしょう。 上から６行目の最後にある、align=left が横に並べてくれます。
お礼
さっそくの回答ありがとうございます。 このようなこともできるのですね。勉強になりました。 ついでといってはなんですが、この二つの テーブルの間をあけることは可能でしょうか？
- lovin-rose
- ベストアンサー率40% (30/75)
さらにテーブルを重ねてやると、（３）のテーブルが 長くなっても大丈夫だと思います。 <table border="0"> <tr> <td align="center" valign="top"> <table border="0"> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </center></div></td> </tr> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </center></div></td> </tr> </table> </td> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> </tr> <tr> <td>i</td> <td>j</td> </tr> <tr> <td>k</td> <td>l</td> </tr> </table> </center></div></td> </tr> </table> どうでしょうか？
お礼
何回もほんとすいません。 このようなこともできるのですね。 さっそく試してみました。(3)のテーブルを いくら伸ばしても(1)(2)の位置は変わりませんでした。 わかりづらい質問方法ですいません。勉強になりました。
- arukamun
- ベストアンサー率35% (842/2394)
すべてのTABLEの位置は固定なんですね。 であれば、 <TABLE STYLE="position:absolute; top:100px; left:100px;"> ～ </TABLE> <TABLE STYLE="position:absolute; top:200px; left:100px;"> ～ </TABLE> <TABLE STYLE="position:absolute; top:100px; left:200px;"> ～ </TABLE> といったようにTABLE(1)、(2)、(3)をスタイルシートで絶対指定してしまえばよいですね。
補足
何回もほんとすいません。 以下、このようにかいてみました。 <TABLE STYLE="position:absolute; top:100px; left:100px;"> <table border="1"> <td> abc </td> </table> <TABLE STYLE="position:absolute; top:200px; left:100px;"> <table border="1"> <td> efg </td> </table> </table> <TABLE STYLE="position:absolute; top:100px; left:200px;"> <table border="1"> <td> his </td> </table> </TABLE> どうも縦にそろってしまいます。 そこでarukamunさんの回答の～ aaaという文字だけいれるとうまくいきました。 私のtableの作成方法が悪いようです。 どこを直せばいけるのでしょうか？
- arukamun
- ベストアンサー率35% (842/2394)
TABLEの入れ子をすれば良いですね。 <TABLE> <TR><TD> ここに(1)のTABLEを入れる。 </TD><TD ROWSPAN=2> ここに(3)のTABLEを入れる。 </TD></TR> <TR><TD> ここに(2)のTABLEを入れる。 </TD></TR> </TABLE> 必要に応じて、 ALIGN= や VALIGN= を使ってください。
補足
さっそくの回答ありがとうございます。 一つのテーブルに３つともいれてしまうのですね。 この方法も一つの方法として覚えておきます。 私の質問の仕方が悪かったため申し訳ないのですが (3)のテーブルは長さが決まっていません。 (3)のテーブルの長さが変わっても(1)(2)は動いてほしくはないのです。http://www.sega.jp/map.html このような イメージのHPを作成したいと思っています。 よろしくお願いします。
- lovin-rose
- ベストアンサー率40% (30/75)
テーブルを重ねる方法があります。 <table border="0"> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> </table> </center></div></td> <td rowspan="2"><div aign="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> <tr> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">g</td> <td align="center">h</td> </tr> <tr> <td align="center">i</td> <td align="center">j</td> </tr> <tr> <td align="center">k</td> <td align="center">l</td> </tr> </table> </center></div></td> </tr> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> </table> </center></div></td> </tr> </table> ご希望のものと違ったらすいません。
お礼
さっそくの回答ありがとうございます。 さっそくコピペさせてもらいました。 このような方法があるんですね。 タグをこれから解析します。 ありがとうございます。
補足
すいません。補足させてください。 lovin- roseさんが教えていただいた方法で いろいろ試してみたのですが、(3)のテーブルが 長くなればなるほど(1)(2)のテーブルの位置が ずれてしまいました。私の質問の仕方が悪かったこと すいません。(3)のテーブルの長さが変わっても (1)(2)の位置はずらしたくないのです。ほかにどのような方法があるでしょうか？lovin- roseさんが教えてくれた方法も一つとして覚えておきます。
お礼
何回も回答ありがとうございます。 これで質問を締め切らせていただきます。 この場を借りますが皆さん、わかりにくい質問で すいません。いろんな方法を教えてもらって 勉強になりました。