あなたの映画力を試せる!POPLETA映画検定(無料) >>

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

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

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

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

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

A 回答 (5件)

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;
}
    • good
    • 0
この回答へのお礼

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

お礼日時:2013/06/16 23:05

>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カ所以上(複数でもよい)の設置する場合
    • good
    • 0

(2)セルの中の文字の開始位置を1文字分程空けたいです。


table[summary="sample1"]{padding-left:1em;}
ですが、長文が入るのでしたら、<p>に指定するようにtext-indent:1emのほうが良いかもしれません。
 emは、大文字のMに由来するfot-sizeを参照する単位です。
    • good
    • 0

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



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

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

ライン幅を太くするなら



<table border cellspacing="数値">

セル内の間隔なら

<table border cellpadding="数値">

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

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

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

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

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

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

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qテーブルの中にスペースを入れたい

こんにちは。
テーブルについての質問です。
例えば
<TABLE CELLPADDING="0"CELLSPACING="0">
<TR><TD>アートオブライフ</TD><TD>サディスティックデザイア</TR></TR>
<TR><TD>ウィークエンド</TD><TD>スタッブミーインザバック</TR></TR>
<TR><TD>オルガスム</TD><TD>ダリア</TR></TR>
<TR><TD>紅</TD><TD>ブルーブラッド</TR></TR>
<TR><TD>サイレントジェラシー</TD><TD>ラスティネール</TR></TR>
</TABLE>
のようなソースの場合、左列の幅は最長の「サイレントジェラシー」に統一されるのですが「CELLPADDING="0"CELLSPACING="0"」オプションを使用しているため「サイレントジェラシーラスティネール」のように右列の文が、くっついて表示されてしまうのです。
そこでテーブル内にスーペス文字を記述して「サイレントジェラシー」と「ラスティネール」の間に空白を設けようとしたのですが、どうもインターネットエクスプローラでは、それが反映されないようです。
文の中に空白が混じっているのであれば正常に表示されるようですが分の先頭や語尾に空白を記述してもブラウザでは表示されないのです。
しかし何とかして「サイレントジェラシー」と「ラスティネール」の間に空白を入れたいのですが何か良い方法はありますか。

こんにちは。
テーブルについての質問です。
例えば
<TABLE CELLPADDING="0"CELLSPACING="0">
<TR><TD>アートオブライフ</TD><TD>サディスティックデザイア</TR></TR>
<TR><TD>ウィークエンド</TD><TD>スタッブミーインザバック</TR></TR>
<TR><TD>オルガスム</TD><TD>ダリア</TR></TR>
<TR><TD>紅</TD><TD>ブルーブラッド</TR></TR>
<TR><TD>サイレントジェラシー</TD><TD>ラスティネール</TR></TR>
</TABLE>
のようなソースの場合、左列の幅は最長の「サイレントジェラシー」に統一されるのですが「CE...続きを読む

Aベストアンサー

こんばんは。#7です。

> HTMLのネームエンティティに「水平タブ」を表示させるものが存在すれば、かなり使えると思っているのですが、そのようなものはあるのでしょうか。

というわけで、興味があったので調べてみました。
下のURLに、
horizontal tab

というのがあったのですが、どうも対応していないっぽいですね。

含めて、いろんな記号、文字のネームエンティティが存在するのですが、すべてが対応していないし、ブラウザごとに対応が違うようです。
&hearts;とか&spades;とかもIE、ネスケ6なら出ますけど、ネスケ4じゃだめですものね・・・。

やはりテーブル+ですかね。

参考URL:http://www.hotwired.co.jp/webmonkey/reference/special_characters/

Q[CSS] tableの行の間隔をあける

table {
 border-collapse: separate;
 border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか?

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Q空白行について(できればCSS)

こんにちは!

デザイン上、どうしても2行分以上の空白行が欲しいときがあります。
現状でやってる方法としては<hr>タグの高さで調節か<pre>タグで間に改行を入れて誤魔化しています
<br>タグの連続はいけないと言われました。これは改行タグであって空白行を作るものではないと

CSS使ってて、これからなくなるタグなんかも排除しているところなので
間違いのない方法を知りたいのです。
そこで、2行分とか3行分とかの改行をする際に、他にどんな方法があるか教えてください!

なんとなく今自分がやってる方法は自信がありません。

Aベストアンサー

こんにちは、じゃんぬねっと です。

margin とかで空の空間を作れば良いのでは?

<p style="margin-bottom:20px">
 うんたらかんたら。<br>
 ほげほげ、ふーばー。
</p>

<p>
 おんどぅるるらぎったんでぃすかー!!<br>
 ダヂヤーナザーーーン。
</p>

とか。

CSS で定義するのも可能。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング