よくつかうテーブルの記述、

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

これと同じ意味合いをもつCSSの記述の方法はどうかくのでしょうか?

border:0とpadding:0の指定だけでは、明らかに足りてない(CELLSPACINGに相当する部分が不足している)と思うのですが、、、どのように記述したら良いのでしょう。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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

この回答への補足

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

補足日時:2001/10/01 15:53
    • good
    • 0

サンプルの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>
    • good
    • 0
この回答へのお礼

next-coさん、再びありがとうございます。

>質問は、<table>タグに「border="0" cellspacing="0" cellpadding="0"」を>指定いないでCSSで、できないかと言うことでしょうか?

そうです。もっといえば、質問にも書いておりますように、
cellspacing=0 の部分をCSSでどうかくのか?、書けるのか?
ということを質問しております。

お礼日時:2001/10/01 15:51

始めまして。



スタイルシートって考え方が少し違うようですね。
私も思考錯誤の繰り返しですが、下記のソースを一度
試してみてはどうでしょうか?

少しはキッカケになると思います。

<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>

「テーブル」という考え方自体がスタイルシートには無いような気がしています。
    • good
    • 0
この回答へのお礼

gellop さん、ありがとうございます。

なかなかおもしろい発想だと思います。

でも、テーブルという概念が崩れてしまうと、
データとしての意味がなくなってしまいます。。。。

(テーブルであれば、該当部分をCSV形式に吐き出したり、
 ソートしたりすることが出来ますわけで。。。)

お礼日時:2001/10/01 15:48

セル間の隙間を空けない場合は、CSSを必要としないと思いますが。


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

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>

というようにした場合、これをセル間があいているというのではないでしょうか?
テーブルには、背景色以外何も指定していませんが、
セル間があいているのではないでしょうか?
(「現実的な意味でのデファクトスタンダードである」IE基準として考えて)

next-coさんの環境では、テーブルのデフォルトではセル間が詰まっておりますでしょうか?

お礼日時:2001/09/30 20:37

<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 と記述して、同じように見えなかったため
投稿させていていただいたのですが。。。

私の見たところ、明らかにセルとセルの間があいていると思うのですが。。。
(各セルの背景に色をつければ良く分かります)
もしよろしければお教えてください。
この隙間をなくすにはCSSでどのように記述すればよろしいのでしょうか?

補足日時:2001/09/30 00:20
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング