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

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

A 回答 (2件)

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

この回答への補足

CSSのリファレンスサイトは結構みているつもりでしたが
こちらははじめて拝見しました。使えそうですね。
サンプルもわかりやすいので、すぐに対応できました。
ありがとうございました。

補足日時:2005/06/08 11:27
    • good
    • 0

cellpadding="0"に相当するのは


セルのpadding:0;です。

IEの場合border-spacingは使えないので
table{border-collapse:collapse;}
th,td{padding:0;}
こんな風にすればいいのかな?
    • good
    • 13
この回答へのお礼

ありがとうございました。
相当するのは、セルの指定だったのですか。
tableとtdの両方にCSSが必要ってことですね。

お礼日時:2005/06/08 11:27

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

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qアプリについてです。この前、アプリのデザインを作るアプリをダウンロードしました。そしてデザイ

アプリについてです。
この前、アプリのデザインを作るアプリをダウンロードしました。
そしてデザインを作ったのが、上の写真(右)です。
しかし、ところどころ直したい所があり、オリジナルデザインの方のアプリを消したのです。
普通(一般的)に消していいのでしょうか?消したら、もとのアプリの方も消えちゃいませんか?

Aベストアンサー

「オリジナルデザインの方のアプリを消したのです。」
「消したら、もとのアプリの方も消えちゃいませんか?」

もう、消したのですよね?
自ずと結果は出ているのでは?

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は未検証です。

Qiphone/AndloidアプリをPHPで作る

こんにちは

現在、iphone/Andloidに共通するアプリを作成したいと思っております。
一般的には
titanium mobile

phonegap
などで
javascript + html + css
で両方のアプリをコンパイルして作る方法がありますが、

これを
php + html
などで両方のアプリをコンパイルして作る方法とかが
あったりしますでしょうか?

またそういうプログラムがあったりしますでしょうか?

些細な情報でもOKですので、
よろしくお願い致します。

Aベストアンサー

>些細な情報でもOKですので、

PHPの言語仕様としてDOMをサポートしていますので、
<script type="application/php">
をサポートするブラウザを作ることができれば、
titaniumやphonegapと同じ形式で、PHPを使ったアプリが作れます。
が、phpをサポートするブラウザ(スクリプトエンジン)がありませんので、
現実的には無理ではないでしょうか。


もう一つの可能性としてtkを使う方法、こちらの方が"まだ"可能性が高いと思います。
http://php-tk.sourceforge.net/
http://sourceforge.jp/projects/sfnet_php-tk/
PHP/TKを使うと画面描画を行うアプリの作成が可能です。

PHP/TKの元になっているTcl/Tkは現在も動いていて、wikiを検索した感じではAndroidをサポートする動きがあるようですが、
PHP/TKは2004年頃で止まってるようですので、、、

Q←これをCSSでやりたい

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

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

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

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

Aベストアンサー

img {border: none; }

Q仲間内でアプリを作ることになりました

仲間同士でアプリを作ることになりました。
どんなアプリかというとまだまだ構想段階なのですが、自分たちで作った音楽を簡単にセッションさせることが出来るといったようなものです。
沢山仲間が集まりそうなので、費用は大丈夫だとして僕らには全くアプリ制作の知識が無いので、どこか開発をサポートしてくれるところは無いだろか?と思っているのですが、
開発も一緒になってやってくれるようにサイトはあるんでしょうか?
プログラミングとかが出来なくても、ある程度しっかりしたアプリを作ってくれるんでしょうか?

Aベストアンサー

前同じように仲間内でアプリを作ってみたことがあります。
アプリも費用次第で質が上下するように思えます。
結構アプリによっては数千万かけるプロジェクトとかもあるらしくて(有名なゲーム会社とか。)
僕らは一人プログラミングとか平気でやってのけちゃう人がいて、その人に全部丸投げしちゃいました(笑)
あとは自分たちで勉強して開発とかするほうがお金がかからず、思い通りになるんじゃないかなと思います。
applikaihatsu-a.com/
僕も探してみたんですけど、こんなところがありました。
他にも色々あったんですが、結構開発の初歩のところからサポートしますよってのもあったので、
利用してみてもいいかもしれませんね。

Qborder-collapse * IE8

windowsXPのIE8で、htmlのtable要素にborder-collapse:collapse;を指定した場合に、上の枠線が見えなくなってしまいます。
ブラウザのズーム機能で縮小したり拡大したりすると見えるようになります。
原因としてどのようなことが考えられるでしょうか。
お詳しい方がお見えでしたら、技術的な要因もある程度詳細に教えていただけると幸いです。
よろしくお願いいたします。

Aベストアンサー

いや、仕様書に詳しく書かれているのでそれをお読みくださいとかいえません。
とても長く複雑で、この様な掲示板で回答するには荷が重過ぎますし、可能だとしても誤解を招きます。
>CSS2.1仕様書 17 Tables ( http://www.w3.org/TR/CSS2/tables.html )
ここに、
 17.5.2 表の幅を計算する ( http://www.w3.org/TR/CSS2/tables.html#width-layout )
 17.6 ボーダー ( http://www.w3.org/TR/CSS2/tables.html#borders )
 17.6.2 結合ボーダーモデル ( http://www.w3.org/TR/CSS2/tables.html#collapsing-borders )
  17.6.2.1 ボーダーの競合を解決する( http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution )
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
が該当する部分です。
[特に]
1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
3. If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
4.If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
は、その前文と共に重要です。

 tableに関しても、現行のCSS2.1は、CSS2より、いくつか改定されていますが、残念ながら邦訳を知りません。

 CSS2の邦訳は、こちら( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )にあります。

いや、仕様書に詳しく書かれているのでそれをお読みくださいとかいえません。
とても長く複雑で、この様な掲示板で回答するには荷が重過ぎますし、可能だとしても誤解を招きます。
>CSS2.1仕様書 17 Tables ( http://www.w3.org/TR/CSS2/tables.html )
ここに、
 17.5.2 表の幅を計算する ( http://www.w3.org/TR/CSS2/tables.html#width-layout )
 17.6 ボーダー ( http://www.w3.org/TR/CSS2/tables.html#borders )
 17.6.2 結合ボーダーモデル ( http://www.w3.org/TR/CSS2/tables.html#collapsing-borders...続きを読む

Qスマートフォンのアプリを作るソフトは売っていないの

http://www.justsystems.com/jp/products/hpb/
ホームページビルダーは スマートフォンの画面は作れるようですが


まだ、スマートフォンのアプリを作るソフトは発売されていないのでしょうか?
プログラムの知識がないとアプリは作れないのでしょうか?

Aベストアンサー

>まだ、スマートフォンのアプリを作るソフトは発売されていないのでしょうか?
AndroidはAndroidSDKやADTは無料で配布されている。
iOSの開発に必要なXcodeは有料で販売されている。
Windows Phoneの開発に必要なWindows Phone SDKは無料で配布されている。

>プログラムの知識がないとアプリは作れないのでしょうか?
一応Androidの場合はApp Inventor for Android(http://www.appinventorbeta.com/ode/Ya.html)を利用することによって可能。
ただしApp Inventor for Androidで作成したアプリはAndroid Marketでは販売や公開できなかったはず。
後Adobe Flashでも開発できるけど結局これもActionScriptを知っている必要がある。

Qpopupウィンドウでborderがcollapseなテーブル利用の問題

popupウィンドウにテーブルを使用していて、
border-collapse: collapse のボーダーがある場合に、
初期表示時点で、そのボーダーのみが表示されてしまいます。
firefox,operaでは起きずIE6で起きます。
そこで非表示にするためのjavascript をonloadで動かしているのですが、
データ量の大きいページだと、表示された後に消えるのが
見えてしまい不細工です。
最初から枠が表示されないようなcssの指定方法はないでしょうか。

<html>
<head>
<script>
<!--
function PopupOn(Msg){
if(document.all){
MyMsg = document.all(Msg).style;
MyMsg.visibility = "visible";
} else if(document.layers){
MyMsg = document.layers[Msg];
MyMsg.visibility = "show";
} else if(document.getElementById){
MyMsg = document.getElementById(Msg).style;
MyMsg.visibility = "visible";
}
}
function PopupOff(Msg){
if(document.all) document.all(Msg).style.visibility = "hidden";
else if(document.layers) document.layers[Msg].visibility = "hide";
else if(document.getElementById) document.getElementById(Msg).style.visibility = "hidden";
}
//-->
</script>
<style>
<!--
#poplink {position:absolute;left:0px; top:30px;
z-index:9; visibility:hidden;}
#poplink table {border-collapse: collapse; background-color: #ffffff;}
#poplink td {border: 2px solid #00ffff; }
//-->
</style>
</head>
<body onload="PopupOff('poplink')" >
<div id="poplink">
<table width="80px" height="80px">
<tr><td>
[<a onClick="PopupOff('poplink')">閉じる</a>]<br />
ポップアップ
</td></tr></table>
</div>
<a href="#" onClick="PopupOn('poplink')">リンク</a><br />
</body>
</html>

popupウィンドウにテーブルを使用していて、
border-collapse: collapse のボーダーがある場合に、
初期表示時点で、そのボーダーのみが表示されてしまいます。
firefox,operaでは起きずIE6で起きます。
そこで非表示にするためのjavascript をonloadで動かしているのですが、
データ量の大きいページだと、表示された後に消えるのが
見えてしまい不細工です。
最初から枠が表示されないようなcssの指定方法はないでしょうか。

<html>
<head>
<script>
<!--
function PopupOn(Msg){
if(document.a...続きを読む

Aベストアンサー

visibility を visible/hiddenではなく
displayをblock/noneしてみてはいかがですか?

Qアンドロイド用アプリをphpで作る場合

GREEなどのアンドロイド用アプリをphpで作る場合
フレームワークは何を使用するのがいいのでしょうか。

Aベストアンサー

No.1さんが、なぜそんなにまどろっこしいことを言うのかわかりませんが、もしどうしてもPHPでと言うならば「PHP for Android」がいいと思います。

しかし、まともに答えれば、JavaかJavaScriptどちらかにしない理由がよくわかりません。

なぜ、PHP?
何かしっかりとした考えをお持ちなのでしょうか?

参考URL:http://www.syboos.jp/android/doc/phpforandroid.html

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を見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報