CSSの解釈違い：table要素のcellpaddingありvsなし

前へ 次へ
このQ&Aのポイント
  • tableのcellpaddingをCSSで指定する場合、HTMLのcellpaddingを0と表記すべきかどうか疑問に思うことがあります。この違いによって、ブラウザーがテーブルの表示方法を異なる解釈することがあります。
  • 例1のコードではcellpadding="0"と表記し、例2のコードではcellpaddingを指定しないでスタイルシートでセルのpaddingを指定しています。すると、例2のテーブルの方が幅が広く表示されます。
  • HTMLとCSSの相互作用によって、テーブルの表示が異なる要素に影響を与えることがあるため、適切な表記方法を選択することが重要です。
回答を見る
  • ベストアンサー

table cellpadding「有」又は「無し」でCSSの解釈違う？

IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>

  • HTML
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • edge_wind
  • ベストアンサー率55% (44/79)
回答No.1

興味があったので、上記2つのHTMLソースをコピー＆ペーストしてブラウザに表示させてみました（border="1"にしました）が、 (例1)と(例2)のテーブルの幅は全く同じでした。 Windows XP Pro SP2 のIE6 Mac OSX 10.5 のSarari 3.0.4 Mac OSX 10.5 のFireFox 2.0.0.12 いずれのブラウザでも、全く同じテーブル幅です。 個人的な環境にもよるのかもしれませんが、cellpadding="0"のあり・なしで差はありませんでした。

kitty1000
質問者

補足

edge_windさん ご回答、ありがとうございました。 ＞（border="1"にしました） .taのスタイルにbackground-color:#666666; が抜けていました。 詳細： border="1"を使用せずに、上記例1及び例2のコードの .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } を .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; background-color:#666666; } に変更してテストしていただけるでしょうか？ <table>タグにcellspacing="1"が設定してあるので、テーブルのバックグラウンドのbackground-color:#666666;が表示され、ボーダの代わりとなります。 これで、私のブラウザーの場合、tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのです。 よろしくお願いします。

その他の回答 (1)

  • edge_wind
  • ベストアンサー率55% (44/79)
回答No.2

補足いただいたHTMLソースで試してみましたが、やはり再現できませんでした。 参考までに画像にしてみましたのでご確認ください。 スタイルシート部分は共通だったので、1つのHTMLファイルに複数テーブルを載せています。 Windows XP Pro IE6 http://blog.goo.ne.jp/edge_wind/e/969915689cdece6c3565a58c8f327be3 Mac OSX 10.5 FireFox 2.0.0.12 http://blog.goo.ne.jp/edge_wind/e/80ddd4a64b60f3d85803da6eeb7f97f8 Mac OSX 10.5 Sarafi 3.0.4 http://blog.goo.ne.jp/edge_wind/e/98c6f3c0741cc60dfd8150f3caee99cf テーブル幅が変わる理由がよくわかりませんね。 お役に立てず申し訳ありません。

kitty1000
質問者

補足

edge_windさん ご回答、ありがとうございました。 ブラウザの表示画面の「右」端を記載されていますが、テーブルのcellpadding="0"を削除した場合、「左」端が切れるのです。 もしよろしければ、このページに記載しているコード（補足分も含め）のテーブル（以下「元コードのテーブル」という）を更に大きなテーブル（ただし幅は元コードのテーブルより左右1px大きいだけ）で囲って見てください。外側のテーブルは、幅が変わらないようにスタイルシートで固めてください。 そして、元コードのテーブルのcellpadding="0"を削除した場合、元コードのテーブルの幅が外側のテーブルからはみ出します。 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • テーブルの線について

    下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2">　</td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <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> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center">　<font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>

    • ベストアンサー
    • HTML
  • あるソースをあるソースに埋め込みたい

    http://www.1uphp.com/con2/menu/tab41.html このURLの一番下の「全ての書き方」を 下記のソースのメニューの右にあるテーブルに埋めたいと思っています。 しかし、上記URLのソースのスタイルシート部分を書きのソースへコピペした段階で 下記のソースのページが全て左寄せみたいになってしまいます。 どこをどう記述すれば埋め込めるでしょうか？ <html> <head> <style type="text/css"> <!-- A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } TABLE#mainTable { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid; BORDER-COLLAPSE: collapse } TD.borderAll,TD.borderNoTop,TD.borderNoBottom { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid } --> </style> </head> <body bottommargin="10" background="sozai/kabegami.gif" topmargin="10"> <table height="1817" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 1817px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"><strong><font color="#ff0000" size="5"></font></strong></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">お教室情報</font></td> </tr> <tr> <td><a class="menu" href="5_shop.html" >Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table> <p align="center"> <font ><font color="#808080" size="1" > <font ><font size="2"> <br></font></font>&nbsp; </p></font></font></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 1380px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> <p align="left"><font color="#808080"></font>&nbsp;</p></td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center">　</p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>

  • ※再度※どこが悪いのかみていただきたいです。

    以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font>&nbsp;</p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center">　<font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>

  • ※再々度※見ていただきたいです

    以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font>&nbsp;</p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center">　<font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>

    • ベストアンサー
    • HTML
  • どこが悪いのかみていただきたいです。

    下記のようなソースのHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font>&nbsp;</p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center">　<font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>

  • ＨＰ作成

    たびたびすみません。 以下のようなものをつくりました。 これでいくつか質問があります。 １．「ＴＯＰ」のブロックの縦の長さを変えるにはどこをどのようにすればいいでしょうか？ ２．「ＴＯＰ」以外のブロックの縦の長さをいっぺんに変えることはできますか？ ３．（以下のソースとは関係ありませんが）ＨＰのフォントは何を使えば だいたいのＰＣで見れることができるでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 25px; BACKGROUND-COLOR: #ff99cc; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: #666666; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 25px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 206px; FONT-FAMILY: 'Sylfaen'; HEIGHT: 94px" cellspacing="3" cellpadding="0" width="206"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href=""> Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> </table> </center> </body> </html>

  • tableにtable。table同士の間隔を拡大

    スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • テーブル内に隙間が。

    テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>

  • テーブルにCSSの枠のつけ方

    はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページ​http://www.rakuten.ne.jp/gold/royalparty/​ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • テーブルの位置指定について

    html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する