- ベストアンサー
tableのcellpadding="0" cellspacing="0"をCSSで
tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、 border-collapse:collapse; border-spacing:0; というアドバイスが記載されていました。 実際に使ってみたのですが、 どうしてもセル余白とセル間隔が発生してしまいます。 どうしたらよいですか。
- niconico_1969
- お礼率54% (61/111)
- HTML
- 回答数2
- ありがとう数19
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。 http://www.htmq.com/style/border-spacing.shtml サンプルが http://www.htmq.com/style/border-collapse.shtml にあるので参考にしてください。 # それにしてもこんなプロパティがあるとは知らなかった…
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
cellpadding="0"に相当するのは セルのpadding:0;です。 IEの場合border-spacingは使えないので table{border-collapse:collapse;} th,td{padding:0;} こんな風にすればいいのかな？
お礼
ありがとうございました。 相当するのは、セルの指定だったのですか。 tableとtdの両方にCSSが必要ってことですね。
関連するQ&A
- tableとcellspacingとcellpadding
動的に生成されたHTMLに以下が記述されています。 <table class="type" border="0" cellspacing="2" cellpadding="1"> これを外部CSSを使って、cellspacing、cellpaddingをともに「0」としたいのですが、 記述方法がわかりません。 よい方法をご存じのかたはおられないでしょうか。
- ベストアンサー
- HTML
- 【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
- cellspacing="0" cellpadding="0"の推奨スタイルシート記述
初めまして。 cellspacing="0" cellpadding="0"をCSSで記述する場合。 いくつかあるかと思われますが、ブラウザ種類に対し現時点で互換性の高いと思われる、記述の仕方を教えてください。 ちょっと調べた感じでは、例えばcellspacing="0"は、一例として、 border-collapse:collapseみたいなことで、同様の意味としてスタイルシートに置き換えられるらしいです。 しかし表示結果の具合、推奨の有無を今のところ聞いていませんので、不安なんです。 現時点で、OperaやIEやFirefoxなど含め、色んな環境下で互換性が高い（推奨できる）といえる、 上級者の方から観て推奨でき得る、 よりベターなcellspacing="0"のスタイルシートへの書きかた（HTML）、 よりベターなcellpadding="0"のスタイルシートへの書きかた（HTML）、 をお教えください。 また、考え方なのですが、上記の互換性をクリアしない場合。 あらゆるユーザーのことを考えてあげれば、スタイルシートを諦め、 個別にHTMLで地道にcellspacing="0" cellpadding="0"を記述していくという考え方もあります。 ただWEBの基本原則として構造と見栄えは分離するというものがあるみたいで、 構造（HTML）に、cellspacing="0" cellpadding="0"のような見栄えを書き込んでしまうのは、 やはりNGなのでしょうか。 上級者の方から観れば、こういった構造はどのように思われますか？ もし「変」であれば、率直なご感想をお聞かせください。 しかし出来れば互換性が高いCSSの記述法が分かれば最良です。優先はスタイルシートでの解決です。 宜しくお願いいたします。
- 締切済み
- HTML
- ＜table＞の「cellpadding」と「cellspacing」のタグを、CSS2で記述する場合
＜table＞の「cellpadding」と「cellspacing」という、表のセルとセルの間隔を指定できるものがありますが、CSS2ではどのように記述すればいいのでしょうか？
- 締切済み
- HTML
- cellspacingがある理由とは。
どうしてもcellspacingがある理由がわかりません。 「セル間の余白を指定します。」と説明がありますが・・・・。 試しに、cellspacingが有るのと、無いので比較したのですが それならば、「table border=""」で間隔を、広げたり、狭めたりすればよいのでは と思ったりするんですが・・・。
- 締切済み
- HTML
- cellpadding
<table border="1" cellpadding="10" cellspacing="0"> <tr> <td>あああああ</td> </tr> </table> 上記テーブルで、「あああああ」の周りに出来る余白(空白)のピクセル数(上下左右)は それぞれ10pxなんでしょうか？それとも5pxなんでしょうか？
- ベストアンサー
- HTML
- [CSS] tableの行の間隔をあける
table { border-collapse: separate; border-spacing: 5px; } とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか？ イメージ的には以下の様な感じです <table> <tr style="margin-bottom: 5px">....</tr> <tr style="margin-bottom: 5px">....</tr> <tr style="margin-bottom: 5px">....</tr> </table> よろしくお願いします
- ベストアンサー
- CSS
- テーブルに関する質問です。
テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>
- ベストアンサー
- CSS
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- テーブルの配置
お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
補足
CSSのリファレンスサイトは結構みているつもりでしたが こちらははじめて拝見しました。使えそうですね。 サンプルもわかりやすいので、すぐに対応できました。 ありがとうございました。