- 締切済み
tableタグ、heightタグについて
下記のようなテーブルを組んだのですが うまくセルの高さを指定できなくて困っています。 セルの高さを固定せずに作成することは可能でしょうか？ 宜しくお願いします。 <html> <head> </head> <body> <table width="500" border="1"> <tr> <td rowspan="2" height="200" width="40" valign="top"> </td> <td colspan="2"> </td> </tr> <tr> <td width="230" valign="top">１</td> <td rowspan="2" width="230" valign="top"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> </body> </html>
- yamada1207
- お礼率50% (2/4)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- enuenuenu
- ベストアンサー率57% (12/21)
１の下まで伸ばしたい、とはつまり「１」という文字の下に余白を作りたくないということかな、と思ったのですが、左上のセル（下記タグの「A」にあたる部分）に高さの指定が入っていますので、それを取り去らない限りは「1」のセルもAのセルと同じ高さになってしまいます。 <html> <head> </head> <body> <table width="500" border="1"> <tr> <td rowspan="2" width="40" valign="top"> A </td> <td colspan="2"> B </td> </tr> <tr> <td width="230" valign="top">１</td> <td rowspan="2" width="230" valign="top"> C<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> </body> </html> Aの部分の高さの指定には何か理由があるのでしょうか？ 1の部分の文章が長くなればおのずのAの高さにも影響が出ます。 <table width="500" border="1"> <tr> <td rowspan="2" width="40" valign="top"> A </td> <td colspan="2"> B </td> </tr> <tr> <td width="230" valign="top">１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１</td> <td rowspan="2" width="230" valign="top"> C<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> 上記のような形以外の回答を希望されているのでしたら、ちょっと私には読み取れないです…… 完成予定図を絵に描いてどこかのアップローダーにのせていただけたら解決策を思いつくかもしれませんが…… アップローダーサイトへのリンクはgooでは禁止されているのかな……？イメぴたとか……
- abril
- ベストアンサー率69% (388/560)
申し訳ないのですが、No.1の回答者様へのレス（補足）を見ても今ひとつ質問者様のやりたい事が把握できないのですが。 tableのセルの高さに限らず、Webコンテンツの垂直方向のデータ量、というのは本来流動的なものですのでそのブロックにスクロールバーを出すのでもない限り、固定する事自体無意味です。例えば質問者様がこのテーブル内にどの様なデータを入れたいのか不明ですが、全て画像（heightが固定値となるデータ）というわけではないですよね？もし、テキストが入るセルが一つでもあれば、そのセルの高さはデータ量に応じて変動を余儀なくされます。更に、テキスト・データの場合、クライアント側（閲覧者）の環境次第でいくらでもフォントのスタイルもサイズも変更できる為、垂直方向のボリュームというのは同じテキストを見ていても表示結果は異なります。 > え～と、「１の下」というのは「１」という文字の下という事です。 > めちゃくちゃわかりにくいですね。。。。 > > <td colspan="2" height="300" valign="top">このセルの高さを１の下まで伸ばしたい</td> > > ↑は「height="300"」を加えたものです。 > イメージとしてはこの様な表が表示されてほしいんです。 > ですが「height="300"」と固定はしたくないのでどうすれば良いのか。。。 ここから先は説明の便宜上、「このセル」を「２」とした上で、No.1の回答者様のサンプルを元にさせて頂きます。また、各セルのパディングは初期化されて"0"になっているものとします。また、先に説明した理由により、下記で言う「データ量」とはデータの性質・閲覧者の環境の違いも含めた相対的なものでしかないという事もご了承下さい。 もしこれが「２」のセルに、「２」に入るデータの下に常に「height="300"」以上ぐらいの余白を出したい、という意味であれば、「２」のセルのpadding-bottomに300px以上の値"X"を設定してやれば、rowspanで「１」と「２」の各行を連結させた「C」のデータ量が「１」と「２」のデータ量＋padding合計"１＋２＋X"より相対的に少なければ「２」のデータの下には"X"の余白ができ、逆に「C」のデータ量の方が"１＋２＋X"より多い場合は「２」のデータの下には"X"より更に大きい余白ができます。 各セルにはそれぞれ、どういうデータが入る事をイメージされていらっしゃるのでしょうか？
- abril
- ベストアンサー率69% (388/560)
何がなさりたいのでしょうか…質問の意味が不明です。 > セルの高さを固定せずに作成することは可能でしょうか？ ？「セルの高さを固定」したくないのであれば、高さを指定しなければ各セル内のデータ量に応じて成り行きになりますが。 > このセルの高さを１の下まで伸ばしたい これも？なのですが。一応確認の為、質問者様の提供されたコードをそのままHTMLファイルに挿入して表示させてみましたが、「このセル」と仰っているセルは、既に「１」のセルの下の行にあります。「１」のセルの下に位置しているものを「１の下まで伸ばす」とはどういう意味でしょうか？ ※ちなみに"height"は「タグ（tagname）」ではありません、（この場合は）"td"というタグの「属性（option）」です。 「タグ」は<td>～</td>という形式で存在しますが、「属性」は（属性、というぐらいですから）は<height>～</height>とは成り得ない、という事です。
- shimix
- ベストアンサー率54% (865/1590)
ちょっと空白だとわかりにくいので、書き直してみました <table width="500" border="1"> <tr> <td rowspan="2" height="200" width="40" valign="top"> A </td> <td colspan="2"> B </td> </tr> <tr> <td width="230" valign="top">１</td> <td rowspan="2" width="230" valign="top"> C </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> 「このセルの高さを１の下まで伸ばしたい」というセルはAと1の下でCの左ですよね？「1の下まで」というのはいったいどこまででしょうか？このセルの高さはCの高さで決まると思いますけど（「Cの高さ-1の高さ」になる）。
お礼
え～と、「１の下」というのは「１」という文字の下という事です。 めちゃくちゃわかりにくいですね。。。。 <td colspan="2" height="300" valign="top">このセルの高さを１の下まで伸ばしたい</td> ↑は「height="300"」を加えたものです。 イメージとしてはこの様な表が表示されてほしいんです。 ですが「height="300"」と固定はしたくないのでどうすれば良いのか。。。 回答ありがとうございます！ あと説明下手ですみません。
関連するQ&A
- テーブルレイアウト
テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように１列目のセルに長い文章を入れると、２列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか？ Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。
- ベストアンサー
- HTML
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
- テーブル内でのランダムな並べ変え
全然知識がないのですがよろしくお願いします。 タグで <table border="0"> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> <tr> <td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff"> ◆タイトル</font></td> </tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td> <td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td> </tr> </table> このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？ 今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。 jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。 よろしくお願いします。 http://www.finefinefine.jp/web/kiji2068/ ここを見れとも言われたのですが、スクリプトは私には不明です・・・
- ベストアンサー
- JavaScript
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルのレイアウトがおかしくなります・・・
先ほども質問して教えていただいたのですが、少し対応できないことが出来てしまったので 再び質問いたします。 <table border="1" width="100%"> <tr> <td width="20" rowspan="2">1</td> <td width="30"> </td> <td> </td> </tr> <tr> <td colspan="2"> aaaaaaaaaaaaaaaaaaaaaa</td> </tr> </table> 1)先ほどtable-layout:fixedを教えてもらったのですが、一番左のセルの番号の桁数が増えた場合には幅を増やして表示したい （つまり最大の幅にしたい） 2)width=30の部分を書かないとcolspanのセルに影響を受けないのですが、width=30を書くととたんにcolspanのセルに影響されて びよ～んと幅が大きくなってしまいます。ずばりhtmlのバグでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- tableのあるセルに無駄な空間が出来てしまいます。
tableのあるセルに無駄な空間が出来てしまい、全くの足踏み状態で困っています。 3兼4列目（あるセル）の中身が終わるとすぐに3列目、4列目がくっついてくるようにしたいです。 <TABLE border=1> <TBODY> <TR> <TD colSpan=3>あああああああああ</TD> <TD>いいいいい</TD></TR> <TR> <TD rowSpan=2 valign="top">1列目</TD> <TD rowSpan=2 valign="top">2列目<br> 2列目<br>2列目<br>2列目<br>2列目<br>2列目<br>2列目<br> 2列目<br>2列目<br>2列目<br>2列目<br>2列目<br>2列目<br> <br><br><br> </TD> <TD colSpan=2 valign="top"> 3兼4列目 <br> このセルと下の3列目、4列目を近づけさせたいです。<br> ↓この空間をなくす方法を教えてください。 </TD></TR> <TR> <TD valign="top">3列目</TD> <TD valign="top">4列目</TD></TR></TBODY></TABLE> 宜しくお願いします。
- ベストアンサー
- HTML
- テーブル内にスペースができてしまうのはなぜ？
テーブル内にさらにテーブルを入れた際、一部のセルだけ上部にスペースが空いてしまい 困っています。 下記のhtmlですが、左はテーブル内にテーブルを入れてもスペースができませんが 真ん中だけどうしても上にスペースが空いてしまいます。 全角スペースが隠れていないか確認しましたが無理でした。 ネットでもいろいろ調べましたが分かりませんでした・・・。 これは何が原因なのでしょうか？ よろしくお願いします。 --------------------------------------------------------- <html> <head> </head> <body> <table border="1" width="750"> <tr><td width="150" valign="top"> <table border="1" cellspacing="0" cellpadding="0" width="140"> <tr align="center"><td bgcolor="#green">menu</td></tr> </table> </td> <td valign="top" width="480"> <table border="1" cellspacing="5" cellpadding="0" width="480"> <tr><td bgcolor="#d8de97" height="15" align="left" colspan="2">見出し</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> <tr><td bgcolor="#FFFFCC" width="240">項目名</td> <td bgcolor="#FFFFCC" width="240">項目名</td></tr> </table> </td> <td width="120" valign="top">広告部分</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございます！ 説明下手でホントすみません。 タグと属性の違いを詳しく教えていただきありがとうございます！