2つのテーブルは列、幅の数が異なります。
ちょうど下記のような感じで表示したいのですが、
どのようにすればよいでしょうか。

単純にテーブルを2つ記述するとくっついてしまいます。

■■■                           ■■
■■■                           ■■
■■■

レイヤー?とかいうものを使う方法もあるようなのですが、
ちょっと説明をみてもよく分かりませんでした。

2つを別々のテーブルではなく、1つのテーブルにしてできないかと思ったのですが、枠線が
上のようにならなくて断念しました。

いくつかの画面を作成しているのですが、思ったとおりに表示できなくて悪戦苦闘しています。
アドバイス頂けると助かります。

A 回答 (3件)

<div>


<table style="float:left; width:270px;" border="1">
<tr><td>左</td><td>左</td></tr>
</table>
<table style="float:right; width:180px;" border="1">
<tr><td>右</td><td>右</td></tr>
</table>
<p style="clear: both;">widthの数値は要調整</p>
</div>


※ 上記のwidthは、適当なので、数値を要調整
※ 枠が広くて、左右のテーブル同士が開き過ぎるなら、
<div> を <div style="width:500px;"> などにしてwidthの数値を調整。
※ テーブルの下行は、ブロック要素でclear(他のclear手法でも良い)
#1 テーブルでレイアウトしない方が良いです・・・


テーブルが大きくなってカラム落ちした際の表示を考慮すれば、
1個目のテーブルを margin-right: 開ける数値px; を追加して、
2個目を float:left; にした方が初心者には優しいかな。
    • good
    • 0
この回答へのお礼

お返事有難うございます。遅れてしまい申し訳ありません。

詳細なアドバイス有難うございます。いくつか飲み込めていない点がありますが、ぐぐってみて理解したいと思います。

また不明点がありましたら新規質問を投稿するかもしれませんが、もしよろしければまたアドバイス頂けると嬉しいです。

お礼日時:2011/04/09 13:49

こういう時ははやっぱりスタイルシートでしょう。


右に配置したいテーブルにfloat:right;
テーブル同士の間隔はマイナスmarginで調整。

右のテーブル<table border="*"style="float:right;margin-left:-***px;">
左のテーブル<table~>
<p style="clear:both;">下に続く要素</p>
    • good
    • 1
この回答へのお礼

お返事有難うございます。遅れてしまい申し訳ありません。

スタイルシートを使っていろいろ調整してみたいと思います。

お礼日時:2011/04/09 13:46

ごくごく、単純な記述ですが、


<TABLE>
  <TR>
  </TR>
  <TR>
    <TD>
     <TABLE>
      <TR>
      </TR>
      <TR>
      </TR>
      <TR>
      </TR>
     </TABLE>
    </TD>
    <TD>
     <TABLE>
      <TR>
      </TR>
      <TR>
      </TR>
     </TABLE>
    </TD>
  </TR>
</TABLE>
親のテーブルの中に子供のテーブルを入れてはいかがでしょうか?
    • good
    • 0
この回答へのお礼

お返事有難うございます。遅れてしまい申し訳ありません。

なるほど。入れ子にするのですね。色々試してみます。

お礼日時:2011/04/09 13:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qクリートの前後位置の左右差

SPD-SLのシューズを履いています。
クリートの前後位置に決めるために、プロショップで母指球の位置を正確に測ってもらったところ、左右で約1cmの差がありました。左が右より1cm後に下がっています。そこで、ひとまず左右中間の位置にそろえてクリートをセッティングしてもらいました。
しかし、乗り込んでいくと左足はつま先で踏んでいる感覚があり、すねやふくらはぎの負担が大きいと感じています。

右足はきちんと踏めているので、左足のクリートだけ下げようと考えていますが、このように左右差をつけることは弊害があるような気がして、不安です。クリートの前後位置に左右差をつけてもよいのかどうか、教えてください。

Aベストアンサー

1の方もおっしゃってますが、クリートは左右揃わなくてよいようですよ。
実際、プロの方のも見ましたが、10mmずれて付いてました。
自分で気持ち良い位置がよいとの事でした。
私のも5mmはずれてますが、そのまま支障なく使えてます。

Qテーブルの列幅を固定にしたい

お世話になります。テーブルの列幅を固定にしたいのですが、どうも上手くいきません。
それぞれの列幅をwidthで設定すると、空白の列は(正確には全角スペースが入っている列は)正しい列幅で表示されるのですが、列幅より長い文言が入っている列は、列幅が狭くなってしまいます。・・・逆だとまだマシなんですけど;

私の希望としては、列幅は完全固定にして、列幅より長い文言がセルに入った場合は、行幅を広げて表示して欲しいんです。

試しに値を消したときは正しい列幅で表示されて、長い文言を入れたとたん狭くなります(T.T)
HTMLの仕様なのでしょうか?

Aベストアンサー

幅の指定はどのタグに、どのように行っていますか?

<table border=1 width=300>
<tr>
<td width=100 nowrap>
test1
</td>
<td width=100 nowrap>
test2
</td>
<td width=100 nowrap>
test3
</td>
</tr>
<tr>
<td width=100 nowrap>
test4
</td>
<td width=100 nowrap>
test5
</td>
<td width=100 nowrap>
test6
</td>
</tr>
</table>

上記のタグで、文章を長くして意図通りにならないのでしょうか?
サンプルなどあると回答しやすいです。

Q視力の左右差が原因で苦しんだ方へ質問します。

視力の左右差が原因で苦しんだ方へ質問します。

【1】
あなたの左右の視力はどの位ですか?

【2】
あなたは視力の左右差にコンプレックスを感じていますか?

【3】
立体感のなさから階段を踏み外して転げ落ちるなど、
視力の左右差で生活に支障が出た経験はありますか?

【4】
女子生徒から「ガチャ目キモい」と言われたり、
障害者・奇形児扱いされたりなど、
子供時代に視力の左右差が原因とする
イジメに遭ったことはありますか?

【5】
あなたはメガネが好きですか?

【6】
最後にあなたの年齢または年代と性別を教えてください。

以上。

※私は左右の視力差が大きいです。
裸眼では物が立体的に見えません。
体質上コンタクトレンズも使えません。
2.0以上(遠視)と0.2(近視)くらいの差があると、
メガネのレンズが左右で違うことが他人から見てもわかるし、
使う側も見え方に歪みで出て頭がクラクラします。
少年時代は強烈なコンプレックスを抱えていました。
両目とも近視の人がうらやましくて仕方ありませんでした。
同じように悩んでいる方からの回答をお待ちしています。

視力の左右差が原因で苦しんだ方へ質問します。

【1】
あなたの左右の視力はどの位ですか?

【2】
あなたは視力の左右差にコンプレックスを感じていますか?

【3】
立体感のなさから階段を踏み外して転げ落ちるなど、
視力の左右差で生活に支障が出た経験はありますか?

【4】
女子生徒から「ガチャ目キモい」と言われたり、
障害者・奇形児扱いされたりなど、
子供時代に視力の左右差が原因とする
イジメに遭ったことはありますか?

【5】
あなたはメガネが好きですか?

【6】
...続きを読む

Aベストアンサー

(1)右0.2(矯正1.0) 左1.0。
   右目は近視、乱視。左眼は元弱視、内斜視、遠視。立体視なし。
   12歳で斜視手術もしましたが、結局残存。
   斜視もあり、コントラスト感度不良のため、
   視力は1.0出ても日常生活には使えない眼なので、右眼が頼りです。

(2)昔はありましたが、今はコンプレックスは感じません。

(3)昔から距離感はなく、球技が苦手でした。
   階段もよく足踏み外してましたね。
   立体視ないのにテニスやってましたけど、大変でした。
   立体視のことを知ったのは大学卒業してからでした。
   知ってたら球技はしなかったでしょうね。
  
(4)いじめは小学校時代はめちゃくちゃありましたね。
   今でも小学校4年までの記憶は断片的にしかありません(多分なんか抑圧してます)。

(5)あまり好きではありません。右眼だけコンタクトしてます。

(6)30代、男です。

まあ、色々ありましたけど、眼に関する職業ついてから、
見えてるだけありがたい、と思うようになりました。
車の運転も片眼ての縦列駐車は難しいですが、感覚で何とかなりますし、
年とるほどモノビジョンが便利になってくれるかなと期待してます。
昔は自殺考えたこともありましたけど、今はあんまり気にしないですね。

(1)右0.2(矯正1.0) 左1.0。
   右目は近視、乱視。左眼は元弱視、内斜視、遠視。立体視なし。
   12歳で斜視手術もしましたが、結局残存。
   斜視もあり、コントラスト感度不良のため、
   視力は1.0出ても日常生活には使えない眼なので、右眼が頼りです。

(2)昔はありましたが、今はコンプレックスは感じません。

(3)昔から距離感はなく、球技が苦手でした。
   階段もよく足踏み外してましたね。
   立体視ないのにテニスやってましたけど、大変でした。
   立体視のことを...続きを読む

Qテーブルの列幅の部分固定の仕方について

画面全体(端から端まで)テーブルを引き詰めました。
列は3列の物と2列の物があります。
3列の物は |背景|ページの内容|背景|
2列の物は |背景|  ページの内容   |
となってます。

これをサイト転送すると、自分の環境ではデザインは
思い通りの物が表示されてますが(IE5.5です)
お気に入りの幅を狭くしてみたり、広くしてみたり
×で閉じてしまったりすると、表示された物は思いどうりの
物でなくなってしまいます。

例えると、IEのお気に入りを×で消してしまうと・・・
【お気に入り】|背景|ページの内容|背景|←こうなってた物が
|背景****|ページの内容****|背景****|←こうなります。
***の部分が広がったと言う意味です。

★お気に入りの部分を×で消すと
|背景|ページの内容*****|背景|
★お気に入りの部分を広げると
|背景|ページ・・|背景|
こんな風に一部分の列は固定させて表示する・・
と言う設定するタグ若しくは、ホームページビルダー(2001)
で設定の仕方、ご存知の方がいらっしゃいましたら教えて下さい。

IE5.0以上の対応で宜しくお願い致します。
(先日スタイルシートについて教えて頂きました。
自分なりにビルダーで作る練習はしましたが、応用が
まだどうしてもできませんm(__)m)

画面全体(端から端まで)テーブルを引き詰めました。
列は3列の物と2列の物があります。
3列の物は |背景|ページの内容|背景|
2列の物は |背景|  ページの内容   |
となってます。

これをサイト転送すると、自分の環境ではデザインは
思い通りの物が表示されてますが(IE5.5です)
お気に入りの幅を狭くしてみたり、広くしてみたり
×で閉じてしまったりすると、表示された物は思いどうりの
物でなくなってしまいます。

例えると、IEのお気に入りを×で消してしまうと・・・
【お気に入...続きを読む

Aベストアンサー

こんにちは。以下の内容でどうでしょうか。

<TABLE WIDTH="100%" BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="100">背景</TD>
<TD WIDTH="300">内容</TD>
<TD WIDTH="100">背景</TD>
</TR>
</TABLE></P>

<P>
<TABLE WIDTH="500" BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="100">背景</TD>
<TD WIDTH="400">内容</TD>
</TR>
</TABLE>

テーブルの幅を%で指定するとブラウザーのウィンドウサイズでテーブル幅が変わるので、意図したレイアウトになりません。
今回は、1つ目のテーブルがテーブル幅500px、背景セル100px、内容セル 300px。2つ目のテーブルはテーブル幅500px、背景セル100px、内容セル400pxにしてあります。後はご自分のホームページに合わせて数字を修正してください。

こんにちは。以下の内容でどうでしょうか。

<TABLE WIDTH="100%" BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="100">背景</TD>
<TD WIDTH="300">内容</TD>
<TD WIDTH="100">背景</TD>
</TR>
</TABLE></P>

<P>
<TABLE WIDTH="500" BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="100">背景</TD>
<TD WIDTH="400">内容</TD>
</TR>
</TABLE>

テーブルの幅を%で指定するとブラウザーのウィンドウサイズでテーブル幅が変わるので、...続きを読む

Qメガネ、左右の度数の差

先日、新しいメガネをつくりに行ったら、左右の度数が違うようでした。右と左で右のほうが強くー0・5ほど差があり、左だけに乱視の度を入れることになりました。

左右の度数の差はこの程度だったら気にしなくてもいいでしょうか?

Aベストアンサー

こんばんは

その方により違いますが
+-2.00以上ですと、見えにくさと言うのが出てきます

ただ、目の疲れ方、レンズの違いによっても差が有りますので
ご参考までに

Qテーブルを指定列幅で表示したい(画面に収まらなくていいので)

1280x1024のモニタを使ってますが
下記で、右端を突き破ってwidth="300"を効かせる方法を教えてください。

<html>
<body>
<table border="1">
<col span="10" width="300">
<tr>
<td>NO</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>名前</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</body>
</html>

Aベストアンサー

<table>タグだとスクリーンを超える場合、width指定が100%(スクリーンサイズ)にデフォルト設定されてるので

<table border="1" width="3300">

と変更するだけでいいです

ちなみに僕も<col>タグと<colgroup>タグははじめて見ました
よくサンプルプログラムを参考にさせてもらってるサイトで見たら確かにHTMLタグのところにありました
htmlファイルをあまり使うことが無いのでちょっと新鮮(^^)

ついでにだけど
<col span="10" width="300">だと
10列を300pxにしてるので最初の『No』~10列なので『9』までしか300pxになりませんよ(><)
<col span="11" width="300">に直してください m(--)m
それにあわせて冒頭『3300』にしてます
↑別にこれは3000でもいいです。
<td width="***">と違って<col width="***">はテーブルサイズに合わせて列幅は微調整されるみたいですので・・・

<table>タグだとスクリーンを超える場合、width指定が100%(スクリーンサイズ)にデフォルト設定されてるので

<table border="1" width="3300">

と変更するだけでいいです

ちなみに僕も<col>タグと<colgroup>タグははじめて見ました
よくサンプルプログラムを参考にさせてもらってるサイトで見たら確かにHTMLタグのところにありました
htmlファイルをあまり使うことが無いのでちょっと新鮮(^^)

ついでにだけど
<col span="10" width="300">だと
10列を300pxにしてるので最初の『No』~10列なの...続きを読む

Q「チェーン引きの左右差でリム隙間を調整します。」の意味

http://oshiete1.goo.ne.jp/kotaeru.php3?q=999860
上の質問回答のなかで、「チェーン引きの左右差でリム隙間を調整します。」の意味がわかりませんでした。具体的にイメージできません。解説おねがいできませんか?

「この時、クランク後ろの水平フレームと車輪のリムの隙間を見て左右を同じに調整します。
チェーン引きの左右差でリム隙間を調整します。これを調整するとチェーン調整量が変わります。
チェーンとリム隙間を交互に何度か調整してゆけば大丈夫です。」

Aベストアンサー

自転車の車輪の中心となる軸がありますよね。
その軸に車輪をつなぐためにスポークでリム(タイヤがついている輪)につながっていますよね。
その横にチェーンがかかっている歯車がありますよね。
チェーン引きと言うのはタイヤと歯車がついているメインの軸をフレームの後ろ側へ引く方向で両側にネジがついていませんかそのネジを調整して車輪を後ろに引くことでチェーンを張ることになります。
でも気をつけないと左右どちらかを闇雲に引っ張りすぎると中心軸がどちらかにずれてしまい非常に乗りにくくなります。
そこでリムとフレームとの左右のスキマを見ながら左右のネジを少しずつ閉めていき車輪を後ろへ引きます。
これがリム隙間の調整と言うことになります。
これで理解はできませんでしょうか。

Qテーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

Aベストアンサー

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかか...続きを読む

Q体温の左右差が激しいです

左右の体温差が激しいです。
寝起きに何度も計ったのですが、左が36,8右が35,3でした。
仰向けで寝ていたみたいです。
その後驚いて起きあがったて暫くしたら左36、3右36、0で左右が逆転しました。

昨日レキソタン2mgとキプレス10mgという薬を飲んだのですが、レキソタンの方の副作用でしょうか。
他は眠気が強かったです。


こんなに左右差があって大丈夫でしょうか。
また原因はなんでしょうか。。不安です、よろしくおねがいします。

Aベストアンサー

うちの父は半身不随になってから体温差2℃ありましたね。

Q画面幅に合わせてテーブルのカラム数を変えたい

TABLEの1行はTRの中にTDを羅列して定義しますが、ユーザのブラウザの画面幅が大きいときは5カラム、小さいときは3カラムなどと、自動的に加減するやりかたが、HTMLやCSS(など)にありますでしょうか?
(各セルがまったく同一性質のリンクテキストなので、1行のカラム数が変わっても意味的にはまったく問題ありません。)

Aベストアンサー

>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
>よろしかったら、やり方を教えてください。

過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。
http://oshiete1.goo.ne.jp/qa3870470.html

要は子要素のliを左にフロート(floatの意味は読んで字のごとく「浮かせる」です。)させることでコラム的に見せる、という事です。上記では固定値の幅の中でアイテムを一行に2個づつになる様に並べていますが、ウィンドウサイズによって流動的にするのであれば、ulの全体幅は決めず自動もしくは100%で、という事になります。

> いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小3種類ぐらいのテーブルをif~~で仕分けることは可能なようです。

ANo.2の回答者様も言及されていますが、内容が「表」として相応しいものなら、tableでマークアップした上でお好きな方法でどうぞ。
「各セルがまったく同一性質のリンクテキスト」という文を読む限りでは、内容は単なる「リスト」の様に見受けられましたので、ならばulを使用するのが一番妥当ではないか、と思ったまでです。

>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
>よろしかったら、やり方を教えてください。

過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。
http://oshiete1.goo.ne.jp/qa3870470.html

要は子要素のliを左にフロート(floatの意味は読んで字のごとく「浮かせる」です。)させることでコラム的に見せる、という事です。上記では固定値の幅の中でア...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報