- ベストアンサー
あの<TABLE>で良く使う記述と同じ意味のCSS
よくつかうテーブルの記述、 <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> これと同じ意味合いをもつCSSの記述の方法はどうかくのでしょうか？ border:0とpadding:0の指定だけでは、明らかに足りてない（CELLSPACINGに相当する部分が不足している）と思うのですが、、、どのように記述したら良いのでしょう。 よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
表（TABLE)要素のスタイルシートについては、CSS Level2で定義されています。実装されているのはIE5.0以降とNetscape6などGecko系だけだと思います（どちらも完璧ではないようです）。 仕様上は分離ボーダーモデルで border-spacing:0 を指定すればボーダー間の隙間が0になります。が、IEもGeckoも実装が完璧ではないのでちょっと小細工した記述をしてやる必要があるようです（IEは分離ボーダーモデルの動作が仕様通りではなく、Geckoは結合ボーダーモデルがサポートされていない、と思う）。 <style type="text/css"> table { border-collapse:collapse;border-spacing:0 } </style> ボーダーを指定しなければ違いがわかりませんが、実際にはIEは結合ボーダーモデル、Geckoは分離ボーダーモデルでボーダー間0でレンダリングされるようです。以下のCSSではセルに1pxのボーダーが与えられますので、違いがわかるかと思います。 <style type="text/css"> table {border-collapse:collapse;border-spacing:0 } td {border:1px solid black;} </style> 細かい説明は省略というか荷が重いので、参考URLのCSS2の仕様書（和訳）を読んでください。かなり難解ですが(^_^;)
その他の回答 (4)
- next-co
- ベストアンサー率28% (43/149)
サンプルのHTML記述では、確かにセルに隙間が入ります。 下記のように、<table>タグを変更すればなくなると思いますが？ 質問は、<table>タグに「border="0" cellspacing="0" cellpadding="0"」を指定いないでCSSで、できないかと言うことでしょうか？ IEの場合、<table>がデフォルトの時、cellspacingに値が入っているように思います。 CSSですと、td { margin: 1px }のように。 CSSの優先度はIEの場合、CSS->HTMLのはずですが<TABLE>はHTMLが優先されているようです。 <table width="200" cellspacing="0"> <tr> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> </tr> <tr> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> <td>A</td> </tr> <tr> <td>A</td> <td>A</td> <td>A</td> </tr> </table>
お礼
next-coさん、再びありがとうございます。 ＞質問は、<table>タグに「border="0" cellspacing="0" cellpadding="0"」を＞指定いないでCSSで、できないかと言うことでしょうか？ そうです。もっといえば、質問にも書いておりますように、 cellspacing=0 の部分をCSSでどうかくのか？、書けるのか？ ということを質問しております。
- gellop
- ベストアンサー率35% (19/54)
始めまして。 スタイルシートって考え方が少し違うようですね。 私も思考錯誤の繰り返しですが、下記のソースを一度 試してみてはどうでしょうか？ 少しはキッカケになると思います。 <STYLE TYPE="text/css"> .blue{ color:#999900; line-height:100%; width:100px; padding:10px; text-align:center; background-color:#000099; } .yellow{ color:#000099; line-height:100%; width:100px; padding:10px; text-align:center; background-color:#999900; } .matome {line-height:100%;} </STYLE> </HEAD> <BODY> <P> <DIV CLASS="matome"><SPAN CLASS="blue">blue</SPAN><SPAN CLASS="yellow">yellow</SPAN></DIV> <DIV CLASS="matome"><SPAN CLASS="yellow">yellow</SPAN><SPAN CLASS="blue">blue</SPAN></DIV> </P> </BODY> <HTML> 「テーブル」という考え方自体がスタイルシートには無いような気がしています。
お礼
gellop さん、ありがとうございます。 なかなかおもしろい発想だと思います。 でも、テーブルという概念が崩れてしまうと、 データとしての意味がなくなってしまいます。。。。 （テーブルであれば、該当部分をCSV形式に吐き出したり、 ソートしたりすることが出来ますわけで。。。）
- next-co
- ベストアンサー率28% (43/149)
セル間の隙間を空けない場合は、CSSを必要としないと思いますが。 HTMLで、<TABLE>や<TH>にサイズなど何も指定していなければ、隙間は空かないはずですが？ もし隙間が空く場合は、HTMLの記述に誤りがあるのではないでしょうか？ CSSはセル内の特定の個所を空けたりするのに使用します。 その場合は、<td>タグにpaddingプロパティーで間隔を空けることができます。 <TABLE>タグには、marginプロパティーは効果がないように思います。 paddingを指定した場合、<TABLE>要素と他の要素（親要素や子要素）との間隔を空けます。
お礼
next-co さん、ありがとうございます。 ＞セル間の隙間を空けない場合は、CSSを必要としないと思いますが。 ＞HTMLで、<TABLE>や<TH>にサイズなど何も指定していなければ、 ＞隙間は空かないはずですが？ しかし、例えば、 <style type=text/css>table{ border:0px margin:0px }</style> <body> <table width="200"> <tr> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> </tr> <tr> <td bgcolor="#204060">A</td> <td bgcolor="#204060">A</td> <td>A</td> </tr> <tr> <td>A</td> <td>A</td> <td>A</td> </tr> </table> </body> というようにした場合、これをセル間があいているというのではないでしょうか？ テーブルには、背景色以外何も指定していませんが、 セル間があいているのではないでしょうか？ （「現実的な意味でのデファクトスタンダードである」ＩＥ基準として考えて） next-coさんの環境では、テーブルのデフォルトではセル間が詰まっておりますでしょうか？
- kaadii
- ベストアンサー率18% (2/11)
<style type=text/css>table{ border-top-width : 0em; border-right-width : 0em; border-bottom-width : 0em; border-left-width : 0em; margin:0px }</style> これを貼り付けてください。テーブルだったら上と同じですよ。 他にもtableをspanやulに変えることも出来ますよ。 ▼詳細 －BORDER=0－－－－－－－－－－－－ border-style : solid; /*ボーダースタイルを実線*/ border-color : #0000ff; /*ボーダーカラーを青*/ border-top-width : 1em; /*上ボーダーをフォントサイズの 1倍*/ border-right-width : 2em; /*右ボーダーをフォントサイズの 2倍*/ border-bottom-width : 1em; /*下ボーダーをフォントサイズの 1倍*/ border-left-width : 2em; /*左ボーダーをフォントサイズの 2倍*/ －－－－－－－－－－－－－－－－－ －CELLSPACING=0 CELLPADDING=0－ 要素の各マージンを一括:margin:0px 上マージン :margin-top:0px 下マージン :margin-bottom:0px 左マージン :margin-left:0px 右マージン :margin-right:0px －－－－－－－－－－－－－－－－－
補足
kaadiiさん早速のありがとうございます。 ところで、kaadiiさんの環境では、本当にそれで border="0" cellpadding="0" cellspacing="0" と同じように見えていますか？ 私もはじめに border:0; margin:0; padding:0 と記述して、同じように見えなかったため 投稿させていていただいたのですが。。。 私の見たところ、明らかにセルとセルの間があいていると思うのですが。。。 （各セルの背景に色をつければ良く分かります） もしよろしければお教えてください。 この隙間をなくすにはＣＳＳでどのように記述すればよろしいのでしょうか？
補足
Adams2001さん、ありがとうございます!! （こういう回答をこそ所望しておりました。）