CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 2 (21)

CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 2 (21)

오늘은 CSS3의 스물 한번째 내용으로 이전 내용에 이어 나머지 

테이블(table)스타일 

설정하는 방법에

 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 테이블의 배경색

테이블(table)태그 요소에 배경색을 입히는 내용 입니다.

테이블의 배경색과 텍스트 색상을 변경하면 상당히 다른 테이블을 만들 수 가 있는데

이 방법은 아래와 같습니다.

<html문서에 기본 테이블 작성>

먼저 위와 같이 html문서에 테이블(table)태그를 이용해 테이블을 만듭니다.

여기서 본래 첫번째 tr은 th가 들어가야 하지만 tr로 표시하겠습니다.

(위 테이블에서 인라인 스타일로 테이블에 검정 경계선 1px을 줍니다.)

        

<css를 이용한 테이블 태그(요소)의 tr, td를 지정해 배경 및 글자색 변경한 경우>

이 다음 위와 같이 css에서 테이블 태그(요소)에 속한 td, tr을 같이 선택해

배경색(background) - (파랑)과 글자색(color) - (흰색)을 적용 합니다.

이쯤 돼면 여기서 위 선택자를 사용하여 table을 바로 선택해 배경색을 입히지 않고

 tr, td 를 선택한 이유를 묻는 사람이 있을 것 같아 설명 합니다.

 

     

<css를 이용해 table태그(요소)를 바로 선택해 배경및 글자색을 입힌 경우>

위 는 css에서 바로 table태그를 선택해 배경과 글자색을 지정한 모습입니다.

보시다시피 table태그(요소)를 선택했을경우 table태그(요소)안에 있는 모든 요소까지 자동으로

선택이 되기 때문에 구분선 없이 table태그(요소)전체가 변경 됩니다. 

css 스타일 - 테이블의 캡션

테이블(table)의 캡션(caption-side)에 관련된 내용입니다.

(추가로 이전 표에 설명하지 않은 내용입니다.)

먼저 css 에서는 캡션(caption-side)이란 속성을 이용해 테이블 태그 (요소)에 속한 캡션 태그(요소)의 위치를 아래와 같이 지정 합니다.

먼저 위 테이블 태그(요소)를 css에서 table, tr, td를 한꺼번에 선택 후 

경계선(border) : 검정색 실선 1px

가로 폭(width) : 300px

세로 높이(height) : 30px 

위와 같이 적절하게 크기를 늘려 줍니다.

여기서 캡션 태그는 선택하지 않았기 때문에 변화가 없고

기본 위치 그대로 출력된 모습 입니다.

위와 같이 작업이 되었다면 아래 부터는 

위 css에 caption-side 속성을 추가하여 위치를 캡션 요소를 이동해 보겠습니다.

<css에서 캡션 태그(요소)를 선택한 뒤 caption-side속성을 이용해 캡션을 하단으로 옮기기>

위 내용 보시면 알겠지만 css에서 caption 태그를 선택한 뒤 caption-side속성의 

속성 값 bottom(아래)를 이용해 캡션의 위치를 하단으로 옮긴 방법 입니다.

여기서 caotion-side 속성의 값은 아래와 같습니다.

1. top :  캡션의 위치를 위로 옮긴다. 

2. bottom : 캡션의 위치를 아래로 옮긴다.

3. inherit : 상속 값 사용

css 스타일 - 테이블의 공백 셀 표시 여부

테이블(table)의 공백 셀 표시 여부 입니다.

이 내용은 테이블 요소 안에 내용을 가지고 있지 않은 공백의 셀의 표시 여부를 지정하는 것인데

이 속성은 empty-cells로 아래 와 같이 지정 할 수 있습니다.

먼저 위 이미지는 캡션 설명시 사용한 내용으로 성별에 텍스트를 적용하지 않고 

웹브라우저에 출력한 상태입니다 

출력 했을시 성별부분에 텍스트를 입력 하지 않아 

성별 부분에만 텍스트가 나오지 않은 상태인데 셀의 테두리는 그대로 남아 있습니다. 

위와 같은 모습일때 css에서 위와 같이 " empty-cells : hide " 를 추가 하면

테이블의 공백란에 표시된 테두리가 감춰지게됩니다. 

추가로 empty-cells 속성의 속성 값은 아래와 같습니다.

1. show : 보여주다.

2. hide : 감추다.

3. inherit : 상속 값 사용

여기까지 테이블(table)스타일 설정의 나머지 내용에 대해서 알아 보았습니다.

궁금 하신 점은 댓글을 남겨주시면 답변 해드리겠습니다. 

이상 CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 2 (21)에 관련된 포스팅을 마치도록 하겠습니다.