表の行の高さを変える方法とは？
- 表の行の高さを変える方法について調べています。質問者はサイン用のレイアウトを表を使って作りたいと考えていますが、行の高さが文字にピッタリくっついてしまい、上に高さを持たせたいとのことです。
- 質問者はhightやスタイルシートのMargin, Line-heightなどを試しましたが、うまくいかなかったようです。もしかしたら<TD>タグの中に<p>を複数個入れる必要があるのかもしれません。
- この問題についての解決策や他の方法を知っている方がいれば、アドバイスをお願いします。
- ベストアンサー
表の行の高さを変えるには
初歩的に質問で恐縮ですが、表を使って、サイン用のレイアウトを作ろうと思っています。１行の左に「サイン」というタイトル、右にサインをする場所を取りたいと思っていますが、行の高さは文字にピッタリくっついてしまいます。希望する結果は、サインする場所の上に、３行分ほど高さがあるというものです。 hightという要素を使えば高さが変わるかと思って試してみたり、スタイルシートのMargin, Line-hightなども試してみたのですが、うまくいきません。 やはり<TD>タグの中に<p>を複数個入れるしかないのでしょうか？ よろしくお願いします。 <table width = 600 cellspacing=0 border=1> <tr><td width=100 class=lightgray align=right>サイン:</td> <td>_______________________________________</td></tr> </table><p>
- harutomo777
- お礼率68% (49/72)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
×hight ○height <table width = 600 cellspacing=0 border=1> <tr> <td width=100 height=300 class=lightgray align=right>サイン:</td> <td>_______________________________________</td> </tr> </table>
関連するQ&A
- ヤフオクのテンプレートでバックグラウンドを使いたい
今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>
- ベストアンサー
- オークション
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- safariで特定条件下でデーブル幅が効かなくなります
safariでcolspanでセルを結合し、その中に大きい要素（下の例ですとwidth500pxの画像や、文字数60のテキスト領域）を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"> </td> </tr> </table>
- ベストアンサー
- HTML
- Mac IEのバグなのでしょうか？
TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか？ どう表示されたかという結果とブラウザ名を教えて下さい。
- ベストアンサー
- HTML
- 添付のような飾り枠内に箇条書きを配したものを作ったところ、１行目が枠の
添付のような飾り枠内に箇条書きを配したものを作ったところ、１行目が枠の下端に近づくのですが、枠の内側に均等に余白を入れ、文章全体が中央に行くようにするにはどうしたらよいでしょうか。 <TABLE cellspacing="3" bgcolor="#dfe8bd"> <TBODY> <TR> <TD> <TABLE background="red.gif"> <TBODY> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> <TR> <TD width="10"></TD> <TD align="center"> <TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2"> <TBODY> <TR> <TD bgcolor="#e6ffe6" width="649" height="147"> <IMG src="tyoutin.gif" width="70" height="90" border="0" hspace="15" vspace="20" align="right"> <dl> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </dl> </TD> </TR> </TBODY> </TABLE> </TD> <TD width="10"></TD> </TR> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE></center>
- ベストアンサー
- レンタルサーバ・ASP
- 項目名が勝手に折れる・・・
HTML超初心者です。 上司から電子書類のHTMLを作るように言われたのですが、項目名が勝手に折れて表示されてしまいます。どうしたらちゃんと一行に表示されるのでしょうか？ 下のソースで、「１２３」の下に「１.たいとる」を一行で表示させたいのですが… 申し訳ありませんが、よろしくお願い致します！！ <TABLE width="100%"><TR><TD> <TABLE width="10%" border=1 align=left> <TBODY> <TR> <TD noWrap align=middle>１２３</TD> <BR></TD> </TBODY> </TABLE> <TABLE width="50%" border=1 align=right> </TABLE> </TD></TR></TABLE> <P><BR> <table> <tr> <TD width="91">1.たいとる</TD>
- ベストアンサー
- HTML
- テーブルの上下線を消したい
タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか？ 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。
- ベストアンサー
- 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
- エクセルでのHTMLの表の切替(行・列切替も)
こんにちは。 お世話になります。 ショッピングサイトで表示中のサイズ表を新たなデザインに変えることにしました。 具体的には下記に記載の通りです。 元は横に伸びる表記だったものをこのタイミングで縦に伸びる表記に変えます。 また、デザインもよりシンプルなものになります。 このアイテム１点であればこれにて作業完了なのですが、 1000点ともなると、仕組みを作った方がはるかに早いのですが、 手法が頭に浮かびません。 新レイアウトにするのは、エクセル上でひな形の表を作って、それをマクロでボタンを押せば 一気にHTMLのTABLEタグ付きで出力すればイケるかも、と思いました。 ではそのひな形の表を現在のHTMLタグから起こすには… 想像ができませんでした。 それともそもそもまったく違う手法の方が簡易…？難しいです。 よろしければご教示いただけないでしょうか。 ちなみに袖丈があるものもあったり、アイテムによって形状・揃えているサイズ展開が違うため、 テーブルの行や列はアイテムによって変わってきてしまい、○行○列のものです、と いうことはできません。 -------------------- ※現在のサイズ表である↓を <font color=#000000 size=3><b>サイズ表</b></font><br><table width=300 cellspacing=0 cellpadding=2 bgcolor=#FFFFFF><tr><td bgcolor=#66CC66><table width=100% cellspacing=1 cellpadding=1 bgcolor=#FFFFFF><tr><td bgcolor=#99CC99><table width=100% cellspacing=0 cellpadding=20 bgcolor=#FFFFFF><tr><td bgcolor=#FFFFFF align=left><font color=#000000 size=3><table border=1 width=420><tr><td width=60></td><td width=60>92cm</td><td width=60>98cm</td><td width=60>104cm</td><td width=60>110cm</td><td width=60>116cm</td><td width=60>122cm</td></tr> <tr><td width=60>総丈</td><td width=60>54cm</td><td width=60>57cm</td><td width=60>60cm</td><td width=60>63cm</td><td width=60>66cm</td><td width=60>69cm</td></tr> <tr><td width=60>身幅</td><td width=60>26cm</td><td width=60>27cm</td><td width=60>28cm</td><td width=60>29cm</td><td width=60>30cm</td><td width=60>31cm</td></tr></table><br>※平置きでの採寸になるので、若干の誤差はご了承ください。<br></font></td></tr></table></td></tr></table></td></tr></table> 新しい以下のサイズ表表記に切り替えたいです。 【サイズ表】 <table> <tr> <th scope="row">年齢・身長</th> <th scope="row">総丈</th> <th scope="row">身幅</th> </tr> <tr> <th scope="row">92cm</th> <td>54cm</td> <td>26cm</td> </tr> <tr> <th scope="row">98cm</th> <td>57cm</td> <td>27cm</td> </tr> <tr> <th scope="row">104cm</th> <td>60cm</td> <td>28cm</td> </tr> <tr> <th scope="row">110cm</th> <td>63cm</td> <td>29cm</td> </tr> <tr> <th scope="row">116cm</th> <td>66cm</td> <td>30cm</td> </tr> <tr> <th scope="row">122cm</th> <td>69cm</td> <td>31cm</td> </tr> </table> ※平置きでの採寸になるので、若干の誤差はご了承ください。 <br> ちなみに、新しいサイズ表は、サイズ表以外の他の商品情報とともに 以下のスタイルで定義されています。 <style> .sc-table-01{width: 320px;font-size: 0.9em;} .sc-table-01 table{ border-collapse:collapse; margin: 5px; width: 100%; } .sc-table-01 th{ font-style: normal; font-size: 0.9em; color: #000; background-color: #FFD6C1; border: 1px solid #999; padding: 6px; white-space: nowrap; line-height: 150%; } .sc-table-01 td{ border: 1px solid #999; font-size: 0.9em; padding: 10px; line-height: 150%; } </style> <div class="sc-table-01">
- 締切済み
- Excel（エクセル）
- CSS中央そろえについて
CSSを使用し、中央そろえを行っているのですが、winNN、winOperaでテーブル事態がセンターによりません。テーブルを寄せるのには無理があるのでしょうか ▼ＣＳＳファイル -------------------- /*TABLE*/ body { border: 0; margin: 0; padding: 0; font-family:Verdana,Arial,Helvetica,sans-serif; color:#333333; background:#fff; text-align: center; } #layout #frame{ border: 0; margin: 0; padding: 0; width: 300px; background: #ccc; } -------------------- ▼HTMLファイル <div id="layout"> <table cellspacing="0" cellpadding="0" summary=" " id="frame"> <tr> <td>aaa</td> <td>aaa</td> </tr> </table> </div>
- ベストアンサー
- CSS
お礼
おっしゃるとおり、hightじゃなくてheigtでした。 バカな質問にちゃんとお答え頂きありがとうございます。