Set cellpadding and cellspacing in CSS?

In HTML, the table styles cellpadding and cellspacing can be set

HTML에서 cellpadding과 cellspacing스타일을 설정할 수 있었다.

<table cellspacing="1" cellpadding="1">

How would this be accomplished using CSS?

문제는 어떻게 css를 사용하느냐는 것인데..

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

css에서 cellpadding을 제어하기 위해서는 단순히 테이블 셀인 td 에 padding을 사용하면 된다.

예를 들어 10px 만큼의 cellpadding을 원하면 다음과 같이.

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

cellspacing의 경우 테이블 경계 간격에 css 속성을 적용할 수 있는데 예를 들면 10px 의 cellspacing을 적용하려면,

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

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

예전 방법의 cellspacing으로는 할 수 없던 수평,수직 분리를 css에 border-spacing을 사용하면 가능하다.

( border-spacing:10px 20px;  가로10간격, 세로20간격 )

Issues in IE <= 7

문제는 익스7 이하의 비표준 브라우저이다.

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, 

where you're almost out of luck.

위에서 상기한 방법들은 거의 모든 브라우저에서 작동하는데, 익스7에서는 거의 운 없게도 작동하지 않을  수 있다.

I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells.

"거의" 라고 말한 이유는 이 브라우저는 여전히 인접한 데이블 셀의 테두리 경계를 병합하고 붕괴하는 속성을 

지원하기 때문인데,

 If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. 

cellspacing을 제거하려 하는 경우(즉 cellspacing='0'인 경우) border-collapse:collapse 를 사용하여 

테이블 셀 사이의 공간 : 붕괴 같은 효과를 가질 수 있다.

This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

table 엘리먼트 속성에 cellspacing 이 존재하면 재정의 되므로 버그가 생길 수 있다.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. 

한마디로 비 인터넷 익스인 5~7의 경우, border-spacing으로 사용이 가능하고,

For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

익스의 예를 들면 상황이 맞는 경우

(0 cellsapcing을 원하는 테이블이 이미 정의 되어있지 않음) border-collapse:collapse를 사용할 수 있다.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Default

The default behavior of the browser is equivalent to:

table {border-collapse: collapse;}
td    {padding: 0px;}

         

Cellpadding

Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;}
td    {padding: 6px;}

        

Cellspacing

Controls the space between table cells

table {border-spacing: 2px;}
td    {padding: 0px;}

        

Both

table {border-spacing: 2px;}
td    {padding: 6px;}

Both (special)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

Try it yourself!

Here you can find the old html way of achieving this.

source : http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css