[프론트엔드][CSS3] 15. <table> 의 스타일속성

border

기본적으로 표를 표현하기 위해서는 border 처리를 해야한다.

경우에 따라 초기화값을 아래처럼 설정해준다.

 

 

 

display:table-cell;

: 갯수에 상관없이 동일한 간격으로 영역을 차지하게 하는 속성

  (내용물에 따라 약간의 차이가 생길 수 있다.)

 

- <td> 태그는 display:table-cell 의 성격을 가진다.

- <table> 의 기본값 : 

 

위와 같이 기본값이 잡히므로 표와 관련된 형태를 만들 때,

관련 스타일들을 이용해서 초기화를 적용한 후에 시작하는 것이 대부분이다.

 

 

 

관련  스타일 속성

- border-collapse

: 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 합칠 것인지 그대로 둘 것인지를 조정하는 속성.

- collapse : 테두리를 하나로 합쳐 표시한다. (초기화 시킬 때 사용한다.)

- separate : 테두리를 따로 표시한다. (기본값)

 

- border-spacing 

: <table> 태그의 속성을 사용했을 때 기본값인 테두리와 셀들의 간격을 지정하는 값.

  ( px, em 등 크기나 단위를 직접 지정한다. )

  값을 2개를 지정해줘야한다. (수평거리, 수직거리)

 

- empty-cells 

: <table> 태그에서 내용이 없는 빈 셀들이 존재할 때 표시 여부를 지정한다.

- show : 빈센 주위에 테두리를 표시해서 빈 셀임을 나타낸다. (기본값)

- hide : 빈 셀에 테두리를 그리지 않고 비워둔다.

             (border-collapse: separate; 일 경우에 빈 셀의 테두리가 보이지 않는다.)

 

- vertical-align 

: 셀 안에서의 수직정렬을 어떻게 보이게 할 것인지 지정한다. 

baseline 셀의 기준선에 내용의 기준선을 맞춘다.

- top : 상단 정렬

- bottom : 하단 정렬

- middle : 중앙 정렬 (기본값)

 

 

04 부분의 내용을 비워보았다.

 

border-collapse : separate 로 틀과 셀의 테두리를 따로 표시해주었다.

 

border-spacing = 20px 40px 로 수평은 20px만큼, 수직은 40px만큼 간격을 주었다.

 

empty-cell : show 로 비어있는 셀에 테두리를 표시해서 표시해주었다.

 

<td> 태그에 vertical-align : middle 을 주어 수직으로 중앙에 위치하도록 해주었다.