- 締切済み
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"」と固定はしたくないのでどうすれば良いのか。。。 回答ありがとうございます！ あと説明下手ですみません。
お礼
回答ありがとうございます！ 説明下手でホントすみません。 タグと属性の違いを詳しく教えていただきありがとうございます！