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

<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と関連する良く見られている質問

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qtableとcellspacingとcellpadding

動的に生成されたHTMLに以下が記述されています。
<table class="type" border="0" cellspacing="2" cellpadding="1">
これを外部CSSを使って、cellspacing、cellpaddingをともに「0」としたいのですが、
記述方法がわかりません。
よい方法をご存じのかたはおられないでしょうか。

Aベストアンサー

> 外部CSSを使って、cellspacing、cellpaddingをともに「0」としたいのですが、

CSSが適用された時の見た目が上記の場合と同様になればよい、という事ですね?

table.type {
border-collapse: collapse;
}
table.type th,
table.type td {
padding: 0;
}

としておけばHTML側でcellspacing属性やcellpadding属性に0以外の値が入っていてもCSSのスタイルの方が優先されると思いますが、いかがですか?
#IEは未検証です。

Qの一括指定

ファイルの中に、<img src=** border=0>のタグが複数あり、
少しでも、ページを軽くしたいので、
cssなどを使用して、border=0というのを一括指定することは可能でしょうか?
わかる方が居りましたら、ぜひ、教えて下さい。
それでは、宜しくお願いします。

Aベストアンサー

できます
参考URLを参照(画像に枠線をつける)なさって下さい。

ただし!!
ネスケ4.7系を使用されている方々には、このCSSでは画像の周りに
青く太い線が表示されてしまいます。
もし、万人向けに作成されるのでしたら、border="0"は指定された方が
いいかと思います。

参考URL:http://www.tees.ne.jp/~maruo/webpage/css/css-html.html

Q←これをCSSでやりたい

製作しているサイトに小さい画像が沢山あります。
今までは<img src="00.gif" border="0">と普通に書いていたんですが、
なにせ画像の数が多いのでいちいち記述すると見直す際に見にくくて邪魔なんです。

この部分のborder="0"をCSSで記述し 、一括で各イメージのボーダーを0pxにする方法って何かありますか?

もちろんborder="5"と記述したらボーダーが5pxになります。

以上宜しく教えて下さい。

Aベストアンサー

img {border: none; }

Qborderとcellspacingの違い

<table border=0 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table cellspacing=0 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table cellspacing=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 cellspacing=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 cellspacing=0 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

いろいろサンプルを作ってみたのですが、
結局borderとcellspacingは、どう違うのでしょうか?

<table border=0 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table cellspacing=0 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table cellspacing=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 cellspacing=1 bordercolor="#ff0000">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

<table border=1 cellspa...続きを読む

Aベストアンサー

今はbordercolor,cellspacingは使うこと無いですよ。
bordercolorという属性は存在しません。
cellspacing、 cellpadding は今は使われなくなりましたが、それぞれの関係は長くなるので
11.3.3 コマのマージン( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.3 )
を読んでください。

★現在は、プレゼンテーションはスタイルシートで指定するのが基本です。
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』
 下記に簡単なサンプル上げておきます。
 ご覧のように、細かい設定や複雑な設定がスタイルシートで自在にできます。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 のDATA入力で確認済みのHTML4.01strictです。
★タブは_に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* table関連 */
th,td{padding:0.5em 1em;}
table+table{margin:10px;}
table[summary="test1"]{border-collapse:collapse;}

table[summary="test2"]{border: red dotted 5px;}
table[summary="test2"] th{border: solid 2px blue;}
table[summary="test2"] td{border: solid 2px green;}

table[summary="test3"]{
border:outset 5px gray;
border-collapse: separate;
border-spacing: 15px 5px;
}
table[summary="test3"] th,
table[summary="test3"] td{
border:inset gray 5px;
}

table[summary="test4"]{
border-top:dashed 5px aqua;
border-right:double 10px gray;
border-bottom:groove 5px red;
border-left:ridge 5px lime;
border-collapse: separate;
border-spacing: 5px;
box-shadow:10px 10px 10px 10px rgba(0,0,0,0.4);
}
table[summary="test4"] th,
table[summary="test4"] td{
border:inset gray 5px;
}
table[summary="test4"] td+td{border-color:maroon;}
table[summary="test4"] td+td+td{border-color:orange;}
table[summary="test4"] td+td+td+td{border-color:teal;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<table border="1" summary="test1">
___<tbody>
____<tr>
_____<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th>
____</tr>
____<tr>
_____<td>abc</td><td>efg</td><td>hij</td>
____</tr>
___</tbody>
__</table>
__<table border="1" summary="test2">
___<tbody>
____<tr>
_____<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th>
____</tr>
____<tr>
_____<td>abc</td><td>efg</td><td>hij</td>
____</tr>
___</tbody>
__</table>
__<table border="1" summary="test3">
___<tbody>
____<tr>
_____<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th>
____</tr>
____<tr>
_____<td>abc</td><td>efg</td><td>hij</td>
____</tr>
___</tbody>
__</table>
__<table border="1" summary="test4">
___<tbody>
____<tr>
_____<th abbr="a">abc</th><th abbr="e">efg</th><th abbr="h">hij</th><th abbr="k">klm</th>
____</tr>
____<tr>
_____<td>abc</td><td>efg</td><td>hij</td><td>klm</td>
____</tr>
___</tbody>
__</table>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

今はbordercolor,cellspacingは使うこと無いですよ。
bordercolorという属性は存在しません。
cellspacing、 cellpadding は今は使われなくなりましたが、それぞれの関係は長くなるので
11.3.3 コマのマージン( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.3 )
を読んでください。

★現在は、プレゼンテーションはスタイルシートで指定するのが基本です。
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。...続きを読む


人気Q&Aランキング

おすすめ情報