table border=0 cellspacing=0 을 css로 만드는 방법

table 태그 속성으로 cellpadding, cellspacing 을 지정하는 경우가 있다.

이건 padding 속성을 넣게 되면 cellpadding은 처리 할 수 있지만,

cellspacing은 변하지 않는다.

 

아래 그림은 스타일로 cellspacing 값을 준 경우와 뺀 경우의 결과물이다.

1. HTML 태그 작성하기

- table을 두개 만들어서 할 것이라 테이블 각각에 클래스 지정한다.

   cellspacing 값이 있는 경우는 table_border 로 하고,

   cellspacing 값이 0인 경우는 table_line 이라고 하자.

2. 각 테이블에 스타일 지정하기

- table 부분에 cellspacing을 대용할 스타일을 넣는 부분이므로 다음과 같이 2줄을 넣는다.

- border-spacing: 10; 이라고 하게 되면, cellspacing = 10 처럼 된다.

  이때 border-collapse : seperate; 를 함께 넣어줘야 한다.

- border-spacing : 0; 이라고 하게 되면, cellspacing = 0 처럼 되는 것이다.

  이때 border-collapse : collapse; 을 지정해 줘야 한다.

 

그리고 테이블 자체에 테두리 라인을 넣고 싶으면

- table 태그에 border: 1px solid gray; 과 같이 보더를 지정해주고,

 

각 컬럼에 테두리를 넣고 싶으면

- td 태그에 border: 1px solid lightblue; 와 같이 보더를 지정해주면 된다.