<HTML5+CSS3>표 관련 스타일

table-layout속성-콘텐츠에 맞게 셀 너비 지정하기

-표의 각 셀들은 <th>태그나 <td>태그를 사용해 구성된다. 하지만 이 태그에서 width속성을 이용해 셀 너비를 고정했을 때 여백없이 입력하면 셀 너비를 무시고 한 줄로 길게 입력되어 처음에 의도했던 표 레이아웃을 무너뜨린다. (545 page)

 

이 속성을 이용하면 셀 안의 내용의 양에 따라 셀 너비를 변하게 할지 고정시킬지 여부를 결정할 수 있다.

 

속성 값

(1)fixed : 셀 너비를 고정합니다. 즉 셀 안의 내용 양에 따라 셀의 너비가 달라지지 않는다.

(2)auto : 셀 안의 내용에 따라 셀의 너비가 달라진다. 기본 값

(3)inherit : 부모 요소의 table-layout 값을 상속합니다.

 

다음 예는 셀 안의 내용에 따라서 셀 너비가 바뀌지 않도록 고정하는 것입니다.

ex)table { table-layout:fixed } -> 셀 너비 고정

이렇게 하면 셀 너비보다 긴 콘텐츠는 셀 밖으로 밀려나가 표시된다. (고정하면 겹치게 표시됨)

 

셀 안의 수평 정렬과 수직 정렬

-padding속성 외에도 수평 정렬 방법과 수직 정렬 방법은 지정해서 좀 더 쉽게 내용을 배치할 수도 있습니다.

셀 안의 수평정렬 : text-align 속성 사용

셀 안의 수직 정렬 : vertical-align 속성 사용

 

text-align속성

-이 속성은 셀 안에서 텍스트의 가로 정렬 방법을 지정하는 것이다.

 

속성 값

(1)left : 왼쪽으로 정렬

(2)right :오른쪽으로 정렬

(3)center: 가운데 정렬

(4)justify : 왼쪽과 오른쪽 양쪽 끝에 맞춰 정렬

 

ex) td { text-align:center;} ->셀 안의 내용을 가운데 정렬

 

vertical-align 속성

-셀 안에서 텍스트의 세로 정렬 방법을 지정하는 것. 위 아래 가운데 등 정렬 가능

 

속성 값

(1) baseline : 셀 박스의 baseline이 첫 번째 행을 확장한 baseline과 같은 높이로 배치.

(2) top : 셀 박스의 top부분이 첫 번째 행을 확장한 top에 맞춰 배치

(3) bottom : 셀 박스의 bottom부분이 마지막 행을 확장한 bottom에 맞춰 정렬

(4) middle : 셀의 center부분이 확장한 행들의 중앙에 맞춰 정렬

(5) sub,super,text-top, text-bottom, 길이 값, 백분율 : 이 값들은 셀에 적용되지 X 셀에서는 이 값들 대신 baseline으로 대체

549 page 참고

border-style속성- 표 테두리 스타일 지정하기

-표의 셀에 border-style속성으로 테두리 스타일을 지정할 수 있다 사용할 수 있는 값은 border속성에서와 같고 일부 속성은 테두리가 collapse인지 separate인지에 따라 의미가 달라지기도 한다.

ex)td {border-style:dotted; } -> 점선으로 셀의 테두리 표시

 

 

border-collapse속성 – 테두리 통합, 분리하기

-표에 테두리를 그리기 위해 <table>태그와 <td>태그에서 border속성을 사용하면 표 전체의 바깥 테두리와 각 셀의 테두리가 모두 표시되어 화면에서는 두 줄짜리 테두리가 그려진 것처럼 보이게 된다. 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 떨어진 채로 둘 것인지 두 테두리를 하나로 합칠 것인지 결정할 수 있다.

ex) border-collapse:속성 값;

 

속성 값

(1)collapse:테두리가 통합된다

(2)separate:테두리가 분리된다. (기본 값)

(3)inherit : 부모 요소의 border-collapse값을 상속한다.

 

다음 예는 표의 테두리와 셀의 테두리를 하나로 합쳐 테두리가 하나만 그려진 것처럼 표시하는 것이다.

ex) table { border-collapse:collapse;} ->표와 셀의 테두리를 하나로 합침

 

 

 

border-spacing속성 – 인접한 셀 테두리 사이 거리 지정하기

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

 

속성 값

(1)크기 : px나 em등 직접 크기와 단위를 지정할 수 있다.

(2)inherit : 부모 요소의 border-spacing값을 상속 받는다.

 

%이 속성 값은 한 개 OR 2개를 지정할 수 있다.

값이 1개일 때 : 수평거리와 수직거리를 한꺼번에 지정한 것

값이 2개일 때 : 첫 번째 값은 수평거리 값이고 두 번째 값은 수직거리 값입니다.

 

다음 예는 표에서 테두리를 하나로 합치지 않을 때 셀과 셀 사이의 테두리 간격을 지정하는 소스이다.

ex)table { border – collapse:seperate; ->표안 테두리 합치지 않음

border – spacing:20px 10px -> 좌우 간격은 20 px, 상하 간격은 10px

}

empty-cells 속성 – 빈 셀의 표시 여부 지정하기

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

 

속성 값

(1) show : 빈 셀 주위에 테두리를 그려 빈 셀을 표시합니다. (기본 값)

(2) hide : 빈 셀 주위에 테두리를 그리지 않습니다

(3) inherit : 부모 요소의 값을 상속합니다.

 

ex) td { empty-cells:hide ; } ->빈 셀 감춤

 

caption-side속성 –캡션 위치 바꾸기

-표에 대한 제목은 <caption>태그를 이용해 캡션으로 표시한다.

캡션은 기본으로 표의 위쪽에 표시되지만 caption-side속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다.

 

속성 값

(1)top : 캡션을 표의 윗부분 표시

(2)bottom : 캡션을 아래에 표시

 

ex) caption { caption-side : bottopm;} -> 캡션을 아래에 위치