Ｐａｇｅ 606 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼TDのセルと文字の間を指定したい はゆ 04/5/5(水) 4:36 ┗Re:TDのセルと文字の間を指定したい カヅサツ 04/5/5(水) 14:08 ┗Re:TDのセルと文字の間を指定したい はゆ 04/5/6(木) 21:15 ┗Re:TDのセルと文字の間を指定したい はゆ 04/5/6(木) 22:48 ─────────────────────────────────────── ■題名 ： TDのセルと文字の間を指定したい ■名前 ： はゆ ■日付 ： 04/5/5(水) 4:36 -------------------------------------------------------------------------
| いろいろ探して調べてみたのですが、わからないので教えてください。 テーブルを作成しています。そのTDのセルと文字の間を特定したいのですが、 いろいろ属性とか見た限りではTDの間は特定できないような気がしてきたので ここで確認させていただきたいんです。 <table cellpadding="3" style="border-collapse:collapse; color:#696969;" width="500"><tbody> <tr> <td style="border:1px dashed #CCCC00" bgcolor="#f8ffe8" colspan="3">ここに文字</td> </tr> <tr> <tr><td style="border:1px dashed #CCCC00" bgcolor="#ffffff" rowspan="6"> <img src="../../cur234-61.gif" border="0" alt="cur234-61.gif(15152 byte)" width="234" height="61"><br> ここに文字</td> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD></TR> <TR> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">月</TD></TR> <TR> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">月</TD></TR> <TR> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD></TR> <TR> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD></TR> <TR> <TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD><TD style="border:1px dashed #CCCC00" bgcolor="#ffffff">ここに文字</TD></TR> <tr> <td style="border:1px dashed #CCCC00" bgcolor="#ffffff" colspan="3"> <p> <img src="../sozai/button/p2815.gif" border="0" alt="p2815.gif(365 byte)" width="16" height="16"><br> ここに本文 </p> </td> </tr> </tbody> </table> 上記のテーブルで、「ここに本文」のところの文字と、ここの部分のTDセルの間を開けたいのですが上手くいきません。そのまま書くと、ぴったりセルに文字がくっつく感じなのです。 Table Paddingでやったら、空間を開けたくないセルまで大きくなってしまいます。ここに本文のセルと文字の間だけを指定したいのですが、方法はあるでしょうか？ 後、テーブル内に<p>は書けないのでしょうか？ わかりにくい説明ですいませんが、よろしくお願いします。 また、今作りかけでどこにもアップしてないので、アドレスはありません。 |
| そのための paddingプロパティです。 <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja" dir="ltr"> <head> <title>test</title> <style type="text/css"> table.menu{ border-collapse:collapse; width: 500px; } table.menu td{ color:#696969; background: #ffffff; border:1px dashed #CCCC00; } table.menu th{ color:#696969; background: #f8ffe8; font-weight: normal; text-align: left; border:1px dashed #CCCC00; } tbody.test1 td{ padding: 30px 100px 30px 100px; /* 上右下左の順で余白を指定 */ } </style> </head> <body> <table class="menu" cellpadding="3"> <thead> <tr> <th colspan="3">ここに文字</th> </tr> </thead> <tbody> <tr> <tr> <td rowspan="6"><img src="../../cur234-61.gif" alt="cur234-61.gif(15152 byte)" width="234" height="61"><br> ここに文字</td> <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>ここに文字</td> </tr> <tr> <td>ここに文字</td> <td>ここに文字</td> </tr> </tbody> <tbody class="test1"> <tr> <td colspan="3"><img src="../sozai/button/p2815.gif" alt="p2815.gif(365 byte)" width="16" height="16"><br> ここに本文</td> </tr> </tbody> </table> </body> </html> >後、テーブル内に<p>は書けないのでしょうか？ table要素直下にはp要素は置けませんが、td,th要素の直下には置くことが出来ます。 もっとも、p要素は上下に余白を付けるための要素ではありません。 |
| カヅサツさん、ありがとうございました！ 無事、本文に空間を開けることができましたm__m ・・ですが、その後問題が発生しました。 「ここに本文」のところで、文字を長く書くと、 画像の右側に大きく空白が出来、その右に作ったセルが縮まってしまうんです。 右側のセルの中の文字が改行してないのに下に下りてしまうんです。 「ここに本文」のところを、短くすれば、画像の右側の空白も小さくなります。 いろいろ調べましたが、わかりません。どうすればこの画像の右側の空白を なくせるでしょうか？ ▼カヅサツさん： >そのための paddingプロパティです。 > ><!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01//EN" > "http://www.w3.org/tr/html4/strict.dtd"> ><html lang="ja" dir="ltr"> ><head> ><title>test</title> ><style type="text/css"> >table.menu{ > border-collapse:collapse; > width: 500px; >} >table.menu td{ > color:#696969; > background: #ffffff; > border:1px dashed #CCCC00; >} >table.menu th{ > color:#696969; > background: #f8ffe8; > font-weight: normal; > text-align: left; > border:1px dashed #CCCC00; >} >tbody.test1 td{ > padding: 30px 100px 30px 100px; /* 上右下左の順で余白を指定 */ >} ></style> ></head> ><body> ><table class="menu" cellpadding="3"> ><thead> > <tr> > <th colspan="3">ここに文字</th> > </tr> ></thead> ><tbody> > <tr> > <tr> > <td rowspan="6"><img src="../../cur234-61.gif" alt="cur234-61.gif(15152 byte)" width="234" height="61"><br> > ここに文字</td> > <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>ここに文字</td> > </tr> > <tr> > <td>ここに文字</td> > <td>ここに文字</td> > </tr> ></tbody> ><tbody class="test1"> > <tr> > <td colspan="3"><img src="../sozai/button/p2815.gif" alt="p2815.gif(365 byte)" width="16" height="16"><br> > ここに本文</td> > </tr> ></tbody> ></table> ></body> ></html> > >>後、テーブル内に<p>は書けないのでしょうか？ > >table要素直下にはp要素は置けませんが、td,th要素の直下には置くことが出来ます。 >もっとも、p要素は上下に余白を付けるための要素ではありません。 |
| すいません、解決しました・・！ <td>に幅を指定すると、大丈夫になるみたいです。 ありがとうございました。 ▼はゆさん： >カヅサツさん、ありがとうございました！ >無事、本文に空間を開けることができましたm__m > >・・ですが、その後問題が発生しました。 >「ここに本文」のところで、文字を長く書くと、 >画像の右側に大きく空白が出来、その右に作ったセルが縮まってしまうんです。 >右側のセルの中の文字が改行してないのに下に下りてしまうんです。 >「ここに本文」のところを、短くすれば、画像の右側の空白も小さくなります。 >いろいろ調べましたが、わかりません。どうすればこの画像の右側の空白を >なくせるでしょうか？ > |