OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.142978
  • 閲覧数184
  • ありがとう数4
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 44% (44/99)

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

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

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

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

よろしくお願いします。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.5
レベル10

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

表(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の仕様書(和訳)を読んでください。かなり難解ですが(^_^;)
補足コメント
kokucho81

お礼率 44% (44/99)

Adams2001さん、ありがとうございます!!
(こういう回答をこそ所望しておりました。)
投稿日時 - 2001-10-01 15:53:12
-PR-
-PR-

その他の回答 (全4件)

  • 回答No.1
レベル6

ベストアンサー率 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> これを貼り付けてください。テーブ ...続きを読む
<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
-----------------
補足コメント
kokucho81

お礼率 44% (44/99)

kaadiiさん早速のありがとうございます。

ところで、kaadiiさんの環境では、本当にそれで
border="0" cellpadding="0" cellspacing="0"
と同じように見えていますか?

私もはじめに
border:0; margin:0; padding:0 と記述して、同じように見えなかったため
投稿させていていただいたのですが。。。

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


  • 回答No.2
レベル10

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

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

お礼率 44% (44/99)

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:12
  • 回答No.3
レベル8

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

始めまして。 スタイルシートって考え方が少し違うようですね。 私も思考錯誤の繰り返しですが、下記のソースを一度 試してみてはどうでしょうか? 少しはキッカケになると思います。 <STYLE TYPE="text/css"> .blue{ color:#999900; line-height:100%; width:100px; padding ...続きを読む
始めまして。

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

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

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

「テーブル」という考え方自体がスタイルシートには無いような気がしています。
お礼コメント
kokucho81

お礼率 44% (44/99)

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

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

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

(テーブルであれば、該当部分をCSV形式に吐き出したり、
 ソートしたりすることが出来ますわけで。。。)
投稿日時 - 2001-10-01 15:48:37
  • 回答No.4
レベル10

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

サンプルのHTML記述では、確かにセルに隙間が入ります。 下記のように、<table>タグを変更すればなくなると思いますが? 質問は、<table>タグに「border="0" cellspacing="0" cellpadding="0"」を指定いないでCSSで、できないかと言うことでしょうか? IEの場合、< ...続きを読む
サンプルの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>
お礼コメント
kokucho81

お礼率 44% (44/99)

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

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

そうです。もっといえば、質問にも書いておりますように、
cellspacing=0 の部分をCSSでどうかくのか?、書けるのか?
ということを質問しております。
投稿日時 - 2001-10-01 15:51:37
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ