![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.3ベストアンサー
- 回答日時:
border-collapse:separateとborder-spacingで指定します。
collpaddingは非推奨です。セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。
tablekborderは本来、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
- 回答日時:
>tdやpにmarginを指定したり、cellpadingなど色々試しましたがうまく行きません。
どこかでミスしているのでしょうが、
※ cellpading → cellpadding
※ tdのmarginは意味が違う。
それらを見つからなければ、正しい方法でも反映しませんよ・・・
一応、下記が簡単なCSSです。
---------------------------
(1)全部のテーブル
(2)全部ではないが複数のテーブル?
(3)1つだけのテーブル?
これによって考え方が変わるので、セレクタも違います。
見栄えの部分は、外部CSSで指定するのがスマートです。
padding つまり、セルの内側に隙間を設ける事ができます。
paddingは、上下左右4カ所のスペースを値で指定します。(1カ所~4カ所可能)
この設定順は(左から書く順)
padding: 上値 右値 下値 左値; のような順で各半角スペースで区切ります。
値は、px や em など。
(1)の全テーブルの場合、
cellpadingをテーブル毎に指定するよりも、
CSS一カ所で全てのテーブルセルを指定
CSSは、
table td{padding: 0.5em 0.6em 0.3em 1em;}
(2)複数のテーブルの場合、
指定したいテーブルにclassを付ける
HTMLで、
<table summary="○○の表" class="space1">
CSSで、
table.space1 td{padding: 0.5em 0.5em 0.3em 1em;}
(3)1つだけテーブルを任意指定する場合、
#3-4さんの方法、または(2)の方法など、
通常のテーブルの他に1カ所以上(複数でもよい)の設置する場合
No.4
- 回答日時:
(2)セルの中の文字の開始位置を1文字分程空けたいです。
table[summary="sample1"]{padding-left:1em;}
ですが、長文が入るのでしたら、<p>に指定するようにtext-indent:1emのほうが良いかもしれません。
emは、大文字のMに由来するfot-sizeを参照する単位です。
No.2
- 回答日時:
>cellpadingなど色々試しましたがうまく行きません。
単につづりが違うってことはないでしょうか?
cellpadding
が正しいつづりです。
スタイルシートで指定する場合はtdに
padding:1em;
を指定でどうでしょうか?
No.1
- 回答日時:
ライン幅を太くするなら
<table border cellspacing="数値">
セル内の間隔なら
<table border cellpadding="数値">
で行けると思うのですが
質問の意図はこれで合ってますかね
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
テーブル内の文字をイタリック...
-
同じ幅指定のつもりなのに、ブ...
-
ホームページのテキストを折り...
-
TABLEのセルの中の文字を行単位...
-
テーブルデータを折り返して表...
-
<th>タグを使っても太字にしな...
-
HTML フォントの指定
-
tableのcellpadding="0" cellsp...
-
table表を横に並べる際の間隔指定
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
【CSS】表に線を入れる
-
(HTML)Tableを任意の位置に置...
-
フォームタグのプルタウンの隙...
-
テーブルタグの中にdivを含めて...
-
tableにul,または,olを入れられ...
-
html でのテキスト結合について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
table表を横に並べる際の間隔指定
-
テーブル内のセル間にスペース...
-
同じ幅指定のつもりなのに、ブ...
-
HTML tableのセルにtextareaを...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
(HTML)Tableを任意の位置に置...
-
tableを画面中央に配置する方法
-
画面幅に合わせてテーブルのカ...
-
textareaの外側の文字が下付き...
-
テーブルデータを折り返して表...
-
フォームタグのプルタウンの隙...
-
tableの位置がIEとその他ブラウ...
-
正規表現で「より前」と「より後」
-
tableのcellpadding="0" cellsp...
おすすめ情報