2012-08-03 7 views
33

私はHTMLテーブルを持っています。 テーブルの列間にはスペースが必要ですが、テーブルの行にはスペースが必要です。HTMLテーブルには列間のスペースが必要ですが、行ではありません

私はcellspacingのCSSプロパティを使用すると、行と列の両方でそれを行います。私はまた、私がやっていることでCSSを使用することはできません。純粋なhtmlを使用する必要があります

+2

ない場合は? –

+2

余分なtdに改行なしのスペース( )を追加しますか? – rene

答えて

29

インラインスタイルを使用できる場合は、それぞれtdに左右のパディングを設定することができます。または、tdを列間に使用し、いくつかの非改行スペースを@rene親切に提案。

http://jsfiddle.net/u5mN4/

http://jsfiddle.net/u5mN4/1/

どちらもかなり醜いです; P CSS FTW

+1

私はインラインCSSを推奨しますが、空白の「​​」は補助技術を使用する人にとっては迷惑になります –

+0

私もそうですが、オプションではない場合に備えて空白の 'td'をそこに置きます。 –

5
<table cellpadding="pixels"cellspacing="pixels"></table> 
<td align="position"valign="position"></td> 

cellpaddingは= "ピクセル単位で長さ" 〜<table>タグで使用CELLPADDING属性は、どのくらいを指定します各表のセルの内容とそれぞれの境界線の間に表示する空白スペース。値はピクセル単位の長さとして定義されます。したがって、cellpadding="10"の属性と値のペアは、その表内の各セルの内容の4辺に10ピクセルの空白を表示します。

cellspacing = "ピクセル単位の長さ"〜<table>タグでも使用されるcellspacing属性は、隣接する表セル間、および表セルと表境界との間に表示する空白スペースの量を定義します。値はピクセル単位の長さとして定義されます。したがって、cellspacing="10"の属性値ペアは、それぞれのテーブル内のすべての隣接するセルを水平方向および垂直方向に10ピクセルの長さで区切ります。また、テーブルのフレームから4つの辺のすべてのセルを10ピクセルの長さだけオフセットします。

+0

注:TABLEタグのインラインCSSを使用するようにも動作しているようです。

は、右端に20ピクセルのパディングを提供します。 – Jeff

22

よりよいアプローチでは、ShredderのCSSルールを使用します。埋め込み:0 15px 0 15px インラインCSSの代わりに、すべてのtdsに適用されるCSSルールを定義します。あなたのページにスタイルタグを使用して行い :

<style type="text/css"> 
td 
{ 
    padding:0 15px 0 15px; 
} 
</style> 

または「paddingBetweenCols」のように、サイトのCSSの使用

.paddingBetweenCols td 
{ 
    padding:0 15px 0 15px; 
} 

サイトCSSのアプローチでテーブルにクラスを与えることは、中央のルールを定義しますすべてのページで再利用できます。

サイトcssのアプローチを使用している場合は、サイト全体のすべてのtdに同じルールが適用されない限り、上記のようなクラスを定義してクラスに適用するのが最善です。

Fiddle for using style tag

Fiddle for using site css

インラインスタイリングを除外注

関連する問題