[CSS] 표 스타일

caption-side : 표 제목의 위치 지정

caption-side: top | bottom

 

표 제목은 <caption> 태그를 이용해서 캡션으로 표시하는데, 캡션은 기본적으로 위쪽 중앙에 표시되지만 caption-side 속성을 이용해서 표 아래쪽으로 옮길 수 있다.

• top : 캡션을 표 윗부분에 표시한다. (기본값)
• bottom : 캡션을 표 아랫부분에 표시한다.

 

<style>
  table {
    caption-side: bottom;
  }
</style>

 

 

border : 표 테두리 지정

표 바깥 테두리와 셀 테두리를 각각 지정한다.

 

<style>
  table {
    border: 1px solid black;
  }
</style>

 

 

border-spacing : 셀 사이의 여백 지정

border-spacing: 수평거리 수직거리

 

표와 셀에 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생기는데, border-spacing 속성을 사용해서 여백을 조절할 수 있다.

수평거리와 수직거리의 값이 같다면 1개만 지정해도 된다.

 

 

border-collapse : 표와 셀 테두리 합치기

표와 셀에 테두리를 지정했을 때 여백이 생기면서 두 줄로 표시되는데, 이때 두 줄로 둘 것인지아니면 합쳐서 하나로 표시할 것인지를 결정한다.

• collapse : 표와 셀의 테두리를  합쳐서 하나로 표시
• separate : 표와 셀의 테두리를 따로 표시 (기본값)

 

<style>
  table {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>