• 締切済み

tableをCSSで書き直すには(HTMLソース付き)

よろしくお願いします。 <table cellpadding="0" cellspacing="0"> このHTMLをそのまま、CSSしたらどのようになりますか? paddingを0pxにしても、なぜか同じになりません。 以上、どうぞよろしくお願い申し上げます。

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

みんなの回答

回答No.3

まずは自分がどのように書いて希望する結果が得られなかったのか、 CSS及びHTMLのソースコードを提示するべきだと思いますよ。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

HTMLをCSSにするのではなく、 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^意味不明ですよ? tableのプレゼンテーションに関わる属性(attribute)、cellpadding="0" cellspacing="0"をCSS側で指定する方法ということですね。 table{ border-collapse: collapse; border: ridge gray 3px; } table tr td{ border: solid 1px black; padding: 0px; /*デフォルトなので指定しなくても良い */ }

  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.1

table { border-collapse:collapse; } td { padding:0px; } ですね。 cellspacingは、tableに対してborder-collapseをcollapse(隣のセルの枠線と重ねて表示)にすることで、セル間の余白を消します。 cellpaddingは、tableではなくtd(各セル)に対してのpaddingを0に設定することで、同様の表示になります。

関連するQ&A

  • ●tableをCSSで書き直すには Part.2(HTMLソース付き)

    よろしくお願いします。 <table cellpadding="0" cellspacing="0"> このHTMLをそのまま、CSSしたらどのようになりますか? paddingを0pxにしても、なぜか同じになりません。 以上、どうぞよろしくお願い申し上げます。

  • ●tableをCSSで書き直すには(HTMLソース付き)

    いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 上の表の枠のように少し立体感があるようにしたいと思います。 これを、CSSにしたいのですが、border-styleをいろいろ試しても同じようになりません。 どのようにすれば良いでしょうか? <html> <STYLE TYPE="text/css"> <!-- .TTT { border-style:ridge; padding:0px; border-width:1px; } --> </STYLE> <body bgcolor="#FF88FF"> <table width="270" border="1" cellpadding="0" cellspacing="0" > <tr> <td>こんな感じにしたいです。</td> <td>BBB</td> </tr> </table> <br> <table style="width:270px;" class="TTT"> <tr class="TTT"> <td class="TTT">なぜか、こんな感じになってしまいます。</td> <td class="TTT">DDD</td> </tr> </table> <br> </body> </html>

  • HTMLをCSS

    ●<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> ●<table cellpadding="0" cellspacing="0"> 上記HTMLをCSSで設定するにはどういうソースになるのでしょうか? 教えて下さい。

    • ベストアンサー
    • HTML
  • table cellpadding「有」又は「無し」でCSSの解釈違う?

    IE6,7 tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか? 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例2のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例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
  • CSSでテーブルを表示させるには

    CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。

    • ベストアンサー
    • CSS
  • 【HTML&CSS】テーブルの正しい作り方

    はじめまして。 Webページで、テーブルを作成する際の正しい手順について迷ってしまっているので、ご助力いただければ幸いです。 現在、XHTML1.0TとCSSでページを作成しています。 テーブルの作成は以前からしていましたが、CSSが絡むようになってから、どの方法がベストなのかがわかりません。 作成はDreamweaverとテキストエディタでの手書きと両方行っています。 疑問を抱いているのは、以下の点です。 ☆ HTMLの<table>に対するborder属性、width属性、cellspacing属性、cellpadding属性は使用するべきなのか? 今現在は、<table><tr><th><td>のみで骨格を作成し、属性指定は行っておりません。するとすればthのscope属性くらいです。 ボーダーの指定には、table th tdそれぞれにCSSで上下左右のボーダー指定を行い、border-collapseプロパティで、セル間の隙間をなくしています。横幅もCSSのwidthプロパティを使用しています。 セル内の余白については、thやtdに対してpaddingプロパティで指定をしております。 この方法で特に問題なくできてはいるのですが、実際にwidth border cellpadding cellspacingの属性がいまだに非推奨になっていないようですし、ちょっと不安です。 みなさんはどのように作成しているのでしょうか? Dreamweaverの参考書などでは、tableに対して上と左のボーダー、tdに対して、右と下のボーダーを指定して、border-collapseで隙間をつぶす方法が紹介されていたりもしました。 ただ、自分は、tdの上下左右のボーダーを指定してborder-collapseで隙間をなくしていますが、結果は同じ表記になります。 tableに上と左のボーダー、tdに右と下のボーダーと指定すること自体にはどのような意味があるのでしょうか? 混乱しているため、少々文章がおかしくなっているかもしれません。 意味が分かりづらい部分がありましたら、補足させていただいたいと思っています。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • tableとcellspacingとcellpadding

    動的に生成されたHTMLに以下が記述されています。 <table class="type" border="0" cellspacing="2" cellpadding="1"> これを外部CSSを使って、cellspacing、cellpaddingをともに「0」としたいのですが、 記述方法がわかりません。 よい方法をご存じのかたはおられないでしょうか。

    • ベストアンサー
    • HTML
  • CSS中央そろえについて

    CSSを使用し、中央そろえを行っているのですが、winNN、winOperaでテーブル事態がセンターによりません。テーブルを寄せるのには無理があるのでしょうか ▼CSSファイル -------------------- /*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
  • あの<TABLE>で良く使う記述と同じ意味のCSS

    よくつかうテーブルの記述、 <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> これと同じ意味合いをもつCSSの記述の方法はどうかくのでしょうか? border:0とpadding:0の指定だけでは、明らかに足りてない(CELLSPACINGに相当する部分が不足している)と思うのですが、、、どのように記述したら良いのでしょう。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • MAC版IEのCSS、paddingを適用すると崩れてしまいます。

    質問いたします。 下記内容のHTMLを打ちますと、Windows環境では、問題なく左側に余白ができ、右側は何も無く表示されます。ですが、このHTMLをMAC版IEで表示させますと、右側にも余白が表示され、レイアウトが崩れてしまいます。何か、MAC版IEのバグでしょうか?誰か解る方、アドバイスを頂けると、助かります。 それでは、よろしくお願いします。m(__)m <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>実験用</title> <style type="text/css"> <!-- .padding { font-family: "MS Pゴシック", "Osaka"; font-size: 14px; padding-left: 40px; text-align: left; } --> </style> </head> <body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table width="500" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか?</td> </tr> </table> </td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML