- 締切済み
テーブルのセルの高さ
テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルＡ</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルＢ－１</TD><TD>セルＢ－２</TD></TR> <TR><TD>セルＢ－３</TD><TD>セルＢ－４</TD></TR> <TR><TD>セルＢ－５</TD><TD>セルＢ－６</TD></TR> <TR><TD>セルＢ－７</TD><TD>セルＢ－８</TD></TR> <TR><TD>セルＢ－９</TD><TD>セルＢ－10</TD></TR> <TR><TD>セルＢ－11</TD><TD>セルＢ－12</TD></TR> <TR><TD>セルＢ－13</TD><TD>セルＢ－14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルＣ</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルＡとセルＣの境界はセルＢの高さの真中くらいに なると思います。 それで、セルＡとセルＣの内容は固定なのですが、セルＢ内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルＢの大きさにかかわらず、セルＡの高さを固定したいのです。 セルＣはセルＢの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか？ セルＡにHEIGHT指定してもなぜか、無視（？）されてしまいます・・・ よろしくお願いします。
- enzo_5150
- お礼率100% (67/67)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- gellop
- ベストアンサー率35% (19/54)
急いでいるのでしたら、とりあえず下記のHTMLをお試しになられては？ ★…‥‥━━━━━━━━━━━━━━━━━━‥‥…★ <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top"> <TABLE BORDER=1> <TR><TD HEIGHT="24px">セルＡ</TD></TR> <TR><TD HEIGHT="100%">セルC</TD></TR> </TABLE> </TD> <TD VALIGN="top"> <TABLE BORDER=1> <TR><TD>セルＢ－１</TD><TD>セルＢ－２</TD></TR> <TR><TD>セルＢ－３</TD><TD>セルＢ－４</TD></TR> <TR><TD>セルＢ－５</TD><TD>セルＢ－６</TD></TR> <TR><TD>セルＢ－７</TD><TD>セルＢ－８</TD></TR> <TR><TD>セルＢ－９</TD><TD>セルＢ－10</TD></TR> <TR><TD>セルＢ－11</TD><TD>セルＢ－12</TD></TR> <TR><TD>セルＢ－13</TD><TD>セルＢ－14</TD></TR> </TABLE> </TD></TR> </TABLE> </BODY> </HTML> ★…‥‥━━━━━━━━━━━━━━━━━━‥‥…★ どうしてもレイアトに完璧なものを求めるのでしたら、 スタイルシートでしょうね。 参考になれば幸いです。
- yatokesa
- ベストアンサー率40% (201/496)
セルの高さや幅を固定するのによく使うのがスペーサーと呼ばれる透明の画像を入れる方法です。 １ピクセルＸ１ピクセルの透明 GIF画像を用意して、高さを指定したいセルの先頭で <img src="spc.gif" width=1 height=100> のように入れます。幅を指定する場合に使うこともあります。 ブラウザによって処理が異なり、どうしようもないときによく使う方法です。
お礼
回答ありがとうございました。 現在の内容をあまり変更したくないので、セルＣをある程度高くしておいて 対応することにしました。参考になりました。
- 387
- ベストアンサー率66% (40/60)
セルＣも高さを指定すればいいと思いますよ。 ↓のように。 <HTML> <BODY> <TABLE BORDER=1> <TR><TD HEIGHT="24px" VALIGN="top">セルＡ</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルＢ－１</TD><TD>セルＢ－２</TD></TR> <TR><TD>セルＢ－３</TD><TD>セルＢ－４</TD></TR> <TR><TD>セルＢ－５</TD><TD>セルＢ－６</TD></TR> <TR><TD>セルＢ－７</TD><TD>セルＢ－８</TD></TR> <TR><TD>セルＢ－９</TD><TD>セルＢ－10</TD></TR> <TR><TD>セルＢ－11</TD><TD>セルＢ－12</TD></TR> <TR><TD>セルＢ－13</TD><TD>セルＢ－14</TD></TR> </TABLE> </TD></TR> <TR><TD HEIGHT="150px" VALIGN="top">セルＣ</TD></TR> </TABLE> </BODY> </HTML>
お礼
回答ありがとうございました。 現在の内容をあまり変更したくないので、セルＣをある程度高くしておいて 対応することにしました。参考になりました。
補足
返答ありがとうございます。 はい、それも試してたんですが、セルＢの高さが、セルＡ、セルＣの合計の高さよりも 高くなった時にセルＡのサイズが指定よりも高くなってしまい固定されないのです・・・。 セルＣの高さを、（セルＢの高さ－セルＡの高さ）のこれ以上はないと思われる高さに 指定しておけばいいのでしょうが、その場合セルＢが短いと余白ができてしまいますし・・・ どうしたらよいものでしょう・・・
関連する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
- テーブル内のテーブルの高さを揃えたい。
CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
- ベストアンサー
- 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"> <tr> <td align="center" valign="top"> <table border="1"> <tr> <td>hogehoge</td> </tr> </table> <br> <br> <table border="1"> <tr> <td>mogomogo</td> </tr> </table> </td> </tr> </teble> テーブル内の一つ目のテーブルをテーブルの上部に、もうひとつのテーブルをテーブル内の下部に表示したいのですがよい方法があるでしょうか？
- ベストアンサー
- 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="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2"> </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- tableの中にtableを作ると上部によらない
tableの中に更にtableを作りたいのですが、内側のtableが上のほうに配置されず真ん中に出てしまいます。valign=topを使ったのですがうまくいきません。何か方法はありますでしょうか？ <table height=500> <tr><td> ---------- ここと ------------ <table height=250> <tr><td></td></tr> <tr><td></td></tr> </table> ---------- ここにかなりスペースが出来てしまう(*_*) </tr></td> </table>
- 締切済み
- HTML
- tableセルに色を付ける
tableセルに色を付けます。 で、行で指定しようとtrタグにbgcolorをいれました。 ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> <td>あ</td> </tr> <tr> <td>い</td> </tr> <tr bgcolor="red"> <td>２</td> <td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございました。 現在の内容をあまり変更したくないので、セルＣをある程度高くしておいて 対応することにしました。参考になりました。