テーブル内のセル間にスペースを空けたい

質問

tableタグとtr、tdを使って2行2列の表を作っています。

(1)それぞれのセルとセルの間にスペースを空けたいです。
(2)セルの中の文字の開始位置を1文字分程空けたいです。

CSSでの指定でも構いません。

tdやpにmarginを指定したり、cellpadingなど色々試しましたがうまく行きません。
どうかご教授をお願いします。

回答No.3

ORUKA1951 · ベストアンサー

border-collapse:separateとborder-spacingで指定します。collpaddingは非推奨です。
セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。

tableｋborderは本来、border-collapse:separateほほ分離ボーダーモデルのはずです。
仕様書にはcollpaceのはずなのですが。
また、border-spaceは0が仕様書なのですが、ブラウザは1px空けます。
★tableの描画は仕様書どおりにブラウザが実装していないため、きちんと指定する必要があります。★

サンプル
<table summary="sample1">
　<caption>価格表</caption>
　<tbody>
　　<tr>
　　　<th abbr="name">商品名</th><th abbr="コード">商品コード</th><th abbr="price">価格</th>
　　</tr>
　　<tr>
　　　<th abbr="no1">商品1</th><td>0012</td><td>\1,200-</td>
　　</tr>
　　<tr>
　　　<th abbr="no2">商品2</th><td>0012</td><td></td>
　　</tr>
　　<tr>
　　　<th abbr="no3">商品3</th><td>0013</td><td>\1,500-</td>
　　</tr>
　</tbody>
</table>
という表があるとします。
★ひとつずつ宣言を追加して確認すること。

まずセレクタでこの表を特定します。
table[summary="sample1"]{}/* 要素セレクタを使います。*/
次に表の枠線について指定します。

/* table要素のborder */
table[summary="sample1"]{
border:solid 2px black;
}
/* table要素の背景 */
table[summary="sample1"]{
background-color:yellow;
}
/* セルの指定 */
table[summary="sample1"] th,
table[summary="sample1"] td{
border:solid 1px gray;
}
/*背景色を指定します。 */
table[summary="sample1"] th{
background-color:silver;
}
table[summary="sample1"] td{
background-color:lime;
}
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:separate;/* separate指定する */
border-spacing:10px 4px; /* 最初の値が上下 ふたつ目の値が左右、ひとつだけだと周囲 */
}
/* 内容のないセルの表示・非表示 */
table[summary="sample1"]{
empty-cells:hide;/* showで見える。 */
}
table[summary="sample1"] caption{
caption-side:left;
font-weight:bold;
}
/* 今度はくっつける */
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:collapse;/* collapseを指定する */
border-spacing:0;
}

お礼

お礼が遅くなり申し訳ありません。詳細なご回答ありがとうございました。

回答No.5

naokita

＞tdやpにmarginを指定したり、cellpadingなど色々試しましたがうまく行きません。
どこかでミスしているのでしょうが、
※ cellpading → cellpadding
※ tdのmarginは意味が違う。
それらを見つからなければ、正しい方法でも反映しませんよ・・・

一応、下記が簡単なCSSです。
---------------------------

（１）全部のテーブル
（２）全部ではないが複数のテーブル？
（３）１つだけのテーブル？

これによって考え方が変わるので、セレクタも違います。
見栄えの部分は、外部CSSで指定するのがスマートです。

padding　つまり、セルの内側に隙間を設ける事ができます。
paddingは、上下左右４カ所のスペースを値で指定します。（１カ所～４カ所可能）
この設定順は（左から書く順）
padding: 上値 右値 下値 左値; のような順で各半角スペースで区切ります。
値は、px や em など。

（１）の全テーブルの場合、
cellpadingをテーブル毎に指定するよりも、
CSS一カ所で全てのテーブルセルを指定
CSSは、
table td{padding: 0.5em 0.6em 0.3em 1em;}

（２）複数のテーブルの場合、
指定したいテーブルにclassを付ける
HTMLで、
<table summary="○○の表" class="space1">
CSSで、
table.space1 td{padding: 0.5em 0.5em 0.3em 1em;}

（３）１つだけテーブルを任意指定する場合、
#3-4さんの方法、または（２）の方法など、
通常のテーブルの他に１カ所以上（複数でもよい）の設置する場合

回答No.4

ORUKA1951

(2)セルの中の文字の開始位置を1文字分程空けたいです。
table[summary="sample1"]{padding-left:1em;}
ですが、長文が入るのでしたら、<p>に指定するようにtext-indent:1emのほうが良いかもしれません。
　emは、大文字のMに由来するfot-sizeを参照する単位です。

回答No.2

ponta1971

>cellpadingなど色々試しましたがうまく行きません。

単につづりが違うってことはないでしょうか？
cellpadding
が正しいつづりです。

スタイルシートで指定する場合はtdに
padding:1em;
を指定でどうでしょうか？

回答No.1

sutchmarco

ライン幅を太くするなら

<table border cellspacing="数値">

セル内の間隔なら

<table border cellpadding="数値">

で行けると思うのですが
質問の意図はこれで合ってますかね