[HTML] 테이블 테두리 변경하기 한줄, 두줄 (테이블 속성 border, CSS)

기본 테이블(표) 생성

 

아무런 속성을 지정하지 않고 그냥 테이블을 생성하면 테두리가 보이지 않습니다.

<table><tr><td> 태그만 사용 ( 예시용이라서 <th> 미사용 )

See the Pen 테이블 선 없음 by 이진하 (@nflthxvp-the-sans) on CodePen.

테이블 border 속성 

 

<table> 태그 안에 border 속성 값을 지정하면 테두리가 생성됩니다.

※ 별도 스타일을 지정하지 않으면 2줄로 표시

See the Pen 테이블 border=1 by 이진하 (@nflthxvp-the-sans) on CodePen.

테이블 스타일 solid 속성

 

<table>, <th>, <td> 태그에 style 속성을 추가하여 부분적으로 테두리를 표시할 수 있습니다.

 - 셀 병합이 아닌 선만 투명하게 표시하고 싶은 경우 사용

See the Pen 테이블만 solid by 이진하 (@nflthxvp-the-sans) on CodePen.

 

- 태그 전체에 style 속성을 부여한 모습

See the Pen 테이블 스타일 지정 by 이진하 (@nflthxvp-the-sans) on CodePen.

CSS로 스타일 지정

 

테이블의 행과 열이 많아질수록 태그마다 style 속성을 부여해 주는 것은 코드가 깔끔하지 않아, style을 한 번만 지정하여 불필요한 속성 부여 작업을 줄일 수 있습니다.

※ <style> 태그 안에 해당 css 코드를 넣으시거나, 별도 css로 저장하여 불러오시면 됩니다.

 

collapse (한줄)

See the Pen 테이블 css collapse지정 by 이진하 (@nflthxvp-the-sans) on CodePen.

 

separate (두줄)

See the Pen 테이블 css separate 지정 by 이진하 (@nflthxvp-the-sans) on CodePen.