표 스타일

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 표 제목 위치 지정 - caption-side

• 2) 표 테두리 스타일 결정 - border

• 3) 테두리 통합, 분리 - border-collapse

• 4) 인접한 셀 테두리 사이 거리 지정 - border-spacing

• 5) 빈 셀의 표시 여부 지정 - empty-cells

• 6) 표 너비와 높이 지정 - width, height

• 7) 콘텐츠에 맞게 셀 너비 지정 - table-layout

• 8) 셀 안의 텍스트 정렬 방법 지정 - text-align

• 9) 셀 안에서 수직 정렬하기 - vertical-align

 

표 스타일

• 표의 크기, 표의 테두리, 셀의 테두리, 여러 가지 여백 등의 표 스타일을 지정할 수 있다.

 

1) 표 제목 위치 지정 - caption-side

선택자 { caption-side: top | bottom }

속성 값	설명
top (기본 값)	캡션을 표의 윗부분에 표시한다.
bottom	캡션을 표의 아랫부분에 표시한다.

 

 

2) 표 테두리 스타일 결정 - border

CSS를 이용해 테두리를 표시할 때는 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 한다.

선택자 { border: 크기 스타일 }

 

 

3) 테두리 통합, 분리 - border-collapse

선택자 { border-collapse: collapse | separate }

속성 값	설명
collapse	테두리를 하나로 합쳐 표시한다.
separate (기본 값)	테두리를 따로 표시한다.

 

 

4) 인접한 셀 테두리 사이 거리 지정 - border-spacing

border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정한다.

속성 값으로 수평거리와 수직거리를 따로 지정(속성 값 2개)하거나, 한꺼번에 지정(속성 값 1개)할 수 있다.

선택자 { border-spacing: 크기 }

 

 

5) 빈 셀의 표시 여부 지정 - empty-cells

border-collapse: separate를 사용해 셀들을 분리했을 경우, empty-cells속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정한다.

선택자 { empty-cells: show | hide }

속성 값	설명
show (기본 값)	빈 셀 주위에 테두리를 그려 빈 셀을 표시한다.
hide	빈 셀에 테두리를 그리지 않고 비워 둔다.

 

 

6) 표 너비와 높이 지정 - width, height

속성 값으로 사용할 수 있는 값은 실제 크기를 나타내는 px이나 부모 요소를 기준으로 한 %이다.

선택자 { 
    width: 크기;  //표와 셀의 너비 지정
    height: 크기;  //표와 셀의 높이 지정
}

 

 

7) 콘텐츠에 맞게 셀 너비 지정 - table-layout

셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지 결정할 수 있다.

선택자 { table-layout: fixed | auto }

속성 값	설명
fixed	셀 너비를 고정해 셀 내용에 따라 셀의 너비가 달라지지 않도록 한다.
auto (기본 값)	셀 내용에 따라 셀의 너비가 달라진다.

 

 

8) 셀 안의 텍스트 정렬 방법 지정 - text-align

선택자 { text-align: left | right | center }

 

 

9) 셀 안에서 수직 정렬하기 - vertical-align

셀 안의 내용을 수직 정렬할 방법을 지정할 수 있다.

선택자 { vertical-align: baseline | top | bottom | middle 
                        | sub | super | text-top | text-bottom 
                        | 길이 값 | 백분율 값 
}

속성 값	설명
baseline	셀의 기준선에 내용의 기준선을 맞춘다.
top	패딩의 위쪽 가장자리에 내용의 윗부분을 맞춘다.
middle	패딩 박스의 중앙에 내용을 맞춘다.
bottom	패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춘다.