ベストアンサー

あの<TABLE>で良く使う記述と同じ意味のCSS

2001/09/29 01:03

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

kokucho81
お礼率44% (44/99)

HTML
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

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

ベストアンサー

Adams2001
ベストアンサー率67% (70/103)

2001/10/01 13:47 回答No.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の仕様書（和訳）を読んでください。かなり難解ですが(^_^;)

参考URL：: http://www.fan.gr.jp/~kaz/rec-css2/index.html

質問者

補足 2001/10/01 15:53

Adams2001さん、ありがとうございます!! （こういう回答をこそ所望しておりました。）

その他の回答 (4)

next-co
ベストアンサー率28% (43/149)

2001/10/01 09:21 回答No.4

サンプルの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>

質問者

お礼 2001/10/01 15:51

next-coさん、再びありがとうございます。＞質問は、<table>タグに「border="0" cellspacing="0" cellpadding="0"」を＞指定いないでCSSで、できないかと言うことでしょうか？そうです。もっといえば、質問にも書いておりますように、 cellspacing=0 の部分をCSSでどうかくのか？、書けるのか？ということを質問しております。

gellop
ベストアンサー率35% (19/54)

2001/10/01 02:37 回答No.3

始めまして。スタイルシートって考え方が少し違うようですね。私も思考錯誤の繰り返しですが、下記のソースを一度試してみてはどうでしょうか？少しはキッカケになると思います。 <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> 「テーブル」という考え方自体がスタイルシートには無いような気がしています。

質問者

お礼 2001/10/01 15:48

gellop さん、ありがとうございます。なかなかおもしろい発想だと思います。でも、テーブルという概念が崩れてしまうと、データとしての意味がなくなってしまいます。。。。（テーブルであれば、該当部分をCSV形式に吐き出したり、　ソートしたりすることが出来ますわけで。。。）

next-co
ベストアンサー率28% (43/149)

2001/09/30 16:00 回答No.2

セル間の隙間を空けない場合は、CSSを必要としないと思いますが。 HTMLで、<TABLE>や<TH>にサイズなど何も指定していなければ、隙間は空かないはずですが？もし隙間が空く場合は、HTMLの記述に誤りがあるのではないでしょうか？ CSSはセル内の特定の個所を空けたりするのに使用します。その場合は、<td>タグにpaddingプロパティーで間隔を空けることができます。 <TABLE>タグには、marginプロパティーは効果がないように思います。 paddingを指定した場合、<TABLE>要素と他の要素（親要素や子要素）との間隔を空けます。

質問者

お礼 2001/09/30 20:37

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)

2001/09/29 23:07 回答No.1

質問者

補足 2001/09/30 00:20

kaadiiさん早速のありがとうございます。ところで、kaadiiさんの環境では、本当にそれで border="0" cellpadding="0" cellspacing="0" と同じように見えていますか？私もはじめに border:0; margin:0; padding:0　と記述して、同じように見えなかったため投稿させていていただいたのですが。。。私の見たところ、明らかにセルとセルの間があいていると思うのですが。。。（各セルの背景に色をつければ良く分かります）もしよろしければお教えてください。この隙間をなくすにはＣＳＳでどのように記述すればよろしいのでしょうか？

あの<TABLE>で良く使う記述と同じ意味のCSS