テーブルAのセルの中にテーブルBを入れたいのですが、どうもAの長さが変わると、Bが真中に寄せられるというような感じで、下のほうにずれてしまうのですが、
<table align= top>指定しても解決にならないのです。
同じような質問を見つからなかったので、投稿します。
教えてください。

A 回答 (2件)

<table align= top>ではなくて、Aセルの指定で<td valign=top>を入れてみては?



<table><tr><td valign=top>

<!--ここから入れ子-->
<table><tr><td>
</td></tr></table>
<!--ここまで入れ子-->

</td></tr></table>

この回答への補足

おっしゃるとおりやってみて、直ったと思ったのですが、
IEではちゃんとできていて、ネットスケープで見ると、やっぱりずれているみたいです、ネットスケープ用に何か特別なタグはあるんでしょうか?

補足日時:2001/09/08 17:02
    • good
    • 0
この回答へのお礼

早速おっしゃるとおりにやってみましたら、直りました!感激です。

本当にありがとうございました。

お礼日時:2001/09/08 16:15

<table>の「width」は、ピクセルで指定していますか?


例:<table width="300">
それとも、パーセントですか?
例:<table width="50%">
IEとNNでは、パーセントの解釈が違うようです。ずれて欲しくないのであれば、
ピクセルで指定すればよいのではないでしょうか?
ブラウザのサイズが小さくなって、表示できなくなると、
隠れますけど。。

この回答への補足

ご回答、ありがとうございます。ピクセルで指定をしているのです。パーセントではなくて・・・やっぱりどこか間違っているでしょうね。
もう一回確認します。ありがとうございました。

補足日時:2001/09/11 17:38
    • good
    • 0

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

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

Qalign="middle"が無視される TOPに

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title lang="ja">文書タイトル</title>
</head>
<body>

<div style="text-align:center;" style="font-size:400%;">
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
test
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
</div>

</body>
</html>


これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。

<div style="text-align:center;" style="font-size:400%;">
がなければ、文字は画像のど真ん中に表示されるのですが、
font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので
<div style="text-align:center;"で画像と文字を挟みたいです。

どうすれば、画像&文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか?

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title lang="ja">文書タイトル</title>
</head>
<body>

<div style="text-align:center;" style="font-size:400%;">
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
test
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"...続きを読む

Aベストアンサー

いまどき、transitinalはさすがに古いのでstrictで・・
 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
 またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。
 ⇒DOCTYPEスイッチ-HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

様々な方法が思いつきますが、できるだけオリジナルを生かして書き直すと・・
注)見出しtitleですから、divではなく<h1></h1>で括るべきです。
 DIVは他に適切な要素がないときの最後の手段です。そのときも「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」にidやclassをつけます。
⇒Authors are strongly encouraged to view the div element as an element of last resort( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )

★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済み
タブは_に置換してあるので戻すこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.header h1{
font-size:50px;line-height:50px;text-align:center;
height:100px;padding-bottom:25px;margin:0;
position:relative;top:-25px;
}
div.header h1 img{position:relative;top:25px;margin:0 10px}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt="">タイトル<img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt=""></h1>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-12</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

なお本来なら、
<h1>タイトル</h1>
とだけ書いておいて、
h1:before{content:url();}
h1:after{content:url();}
で画像をスタイルシートで追加するべきでしょう。画像がコンテンツに関係ないので

いまどき、transitinalはさすがに古いのでstrictで・・
 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
 またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。
 ⇒DOCTYPEスイッチ-HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

様々な方法が思いつきますが、できるだけオリジナルを生かして書き直...続きを読む

Q同じを用いていますが、セルの中身の行揃えが代わってしまいます。

どちらも<table align="center">を用いています。

ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが
タグ2のセルの中身は、中央ぞろえになってしまいます。

タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも
なぜセルの中身が左詰めになるのか分かりません。。。


-------------タグ1-------------
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="10"><img src="img/concept_title.gif" width="10" height="30"></td>
<td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td>
</tr>
<tr>
<td width="10"></td>
<td class="t01">テキスト</td>
</tr>
</table>
------------------------------



-------------タグ2-------------
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td>
<td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td>
<td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td>
<td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td>
</tr>

<tr>
<td></td>

<td height="145" align="left">テキスト
<td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td>
</tr>
<tr>
<td valign="top"><img src="image/grade_line_bottom02.gif" /></td>
<td></td>
<td></td>
</tr>
</table>
------------------------------


初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。
宜しくお願い致します。

どちらも<table align="center">を用いています。

ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが
タグ2のセルの中身は、中央ぞろえになってしまいます。

タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも
なぜセルの中身が左詰めになるのか分かりません。。。


-------------タグ1-------------
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>...続きを読む

Aベストアンサー

両方のタグを私が試してみた結果では両方とも左揃えになるようです。
「align」は、<table>タグ内に直に記述しても意味無く、デフォルトの「左揃え」になってしまうのです。
「align」は<td>タグ内に記述するのが正しいと思います。

Qtableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}

td.test1{
background-color: #000000;
color: #333333;
}

td.test2 img{
margin: 10px;
}

.test3{
font-size: 12px;
padding: 5px;
}

td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">

<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
...続きを読む

Aベストアンサー

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
</div>
</body>
</html>

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li c...続きを読む

Qテーブルのセル内で、あるものは上辺寄せあるものは下辺寄せにしたい

下記のようなソースを表示させた際に

「ABC」文字列が、10行でも100行で1000行になっても、
あいうえおのテーブルはvalign=topのようにボーダーの上に常に吸着し、かつ
img.gifをvalign=bottomのようにボーダーの下に常に吸着させる方法を
教えてください。

<html>
<body>
<table border="1">
  <tr>
    <td>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC</td>
    <td>
      <table border="1">
        <tr>
          <td>あいうえお</td>
        </tr>
      </table>
      <img src="img.gif">
    </td>
  </tr>
</table>
</body>
</html>

Aベストアンサー

 こういうことですか↓

<html>
<body>
<table border="1">
<tr>
<td valign=top>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC<br>ABC</td>
<td height="100%">
<table border="1" height="100%">
<tr>
<td valign=top height="100%">あいうえお</td>
</tr>
<tr>
<td><img src="img.gif"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Qwin IEでのtableタグを入れ子にした場合のalign指定

tableを2重で使用し、外側のtableのtdにalign="right"をつけると、内側のテーブルのテキストもrightになってしまいます。

win firefoxで確認しましたらrightになりませんでした。

この問題の回避方法を知っている方がおりましたらご教授いただけないでしょうか?

よろしくお願いいたします。

※ネットで調べようと思ったのですが、情けない事にキーワードがあいまいすぎて膨大な数しかヒットさせる事ができませんでした。

<html>
<body>
<table border="1" width="100%">
<tr>どうでしょうか?<td>
</td>
</tr>
<tr>
<td align="right">
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>

Aベストアンサー

左揃えになってますよ。内側のtableにwidthを指定してみてください。

widthを指定していないために内側のtableがtestという文字の幅になってしまっているのでは?

内側のtableにborder="1"を指定してみれば目に見える形で分かるかと思います。


人気Q&Aランキング

おすすめ情報