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

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

오늘은 CSS3의 스무번째 내용으로 

테이블(table)스타일 

설정하는 방법에

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

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

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

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

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

css 스타일 - 테이블(table) 스타일

먼저 css에서 테이블(table)스타일이란 html의 테이블 태그(요소)에 사용되는 속성을 말하며 이에 관련된 속성은 아래 표와 같습니다.

속성	내용
border	테이블의 경계선 지정 하는 속성
border-collapse	셀의 경계선을 병합 하는 속성
width	테이블의 폭, 넓이를 지정 하는 속성
height	테이블의 높이를 지정 하는 속성
border-spacing	테이블 셀사이의 거리를 지정 하는 속성
empty-cells	공백의 셀을 그릴 것인지 지정 하는 속성
text-align	테이블 안에 내용을 정렬하는 속성

여기까지 위 테이블에 관련된 속성이였으며 위 속성은 테이블에서 가장 많이 사용되는 속성입니다.

 

또 위 속성을 이용해 html의 테이블 태그(요소)를 많이 바꿀수 있는데 

위에 관련된 속성은 어떻게 사용 하는지 지금부터 하나하나 알아 보도록 하겠습니다.

css 스타일 - 테이블의 경계선 지정

테이블의 경계선 지정 입니다.

테이블의 경계선 지정은 위 표에 나와있듯이 border 속성을 사용하며 이 속성은 앞서 배운 경계선 포스팅의 border 속성과 사용법은 똑같으니 별도 설명은 생략 하도록 하겠습니다.

모르겠다 싶으신 분들은 아래 링크를 참고해 주시기 바랍니다.

 http://yangbari.tistory.com/47

<경계선에 관련된 속성 사용법 포스팅>

참고로 테이블 속성 사용시 테이블의 기본 border 속성으로

경계선을 만들어 주어야 화면에 표가 표시되니 꼭 참고 하시기 바랍니다.

css 스타일 - 테이블의 경계선 병합

테이블의 경계선 병합 입니다.

테이블의 경계선 병합은 border-collapse라는 속성을 사용하는데 이 속성의 값은 collapse, separate라는 속성 값을 사용하여 어느 부분의 경계선을 병합 시킬지 지정하는 것인데 내용은 아래와 같습니다.

<기본 테이블 출력시>

        

<border-colapse 속성의 collapse 속성 값 적용시>

1. collapse : 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시 합니다.

 

<border-colapse 속성의 separate 속성 값 적용시>

2. separate :  기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

(기본 값과 동일 합니다.)

여기까지 테이블의 경계선에 관한 내용이 였습니다.

css 스타일 - 테이블의 가로와 세로 길이 지정

테이블의 가로와 세로 길이 지정 입니다.

테이블의 가로와 세로 길이 지정은 width와 height속성을 사용하여 설정 할 수 있는데 사용법은

table, tr, td 등 테이블 태그(요소)에 적용하며 기존 width속성 height속성과 똑같이 px, % 등을 이용해 아래와 같이 사용합니다. 

<테이블 태그(요소) table와 tr에 width, height 속성 적용시>

위는 테이블의 전체 넓이을 300px로 지정하고 tr태그(요소)의 

높이를 30px로 지정한 모습 입니다

여기까지 테이블의 가로와 세로 길이 지정 이였으며 위 문구에서 바로

텍스트의 정렬에 관련된 속성을 보도록 하겠습니다.

css 스타일 - 테이블의 텍스트 정렬

테이블의 텍스트 정렬 입니다.

테이블의 텍스트 정렬은 text-aling 속성을 사용하는데 이 속성은 앞서 설명을 했기에

이 부분은 생략 하도록 하겠으며 추가된 속성인 vertical-align 속성에 대해서 

설명 하도록 하겠습니다.

http://yangbari.tistory.com/42

<text-aling 속성 사용법>

잘 모르겠다 하시는 분들은 위 링크를 참고 하시기 바랍니다.

vertical-align 속성 입니다. 

이 속성은 대표적으로 html 태그(요소)에 수직 방향의 정렬로 사용이 되는데 이에 관련된 속성값들이 너무 많아 아래 링크를 따로 걸어 두도록 하겠습니다.

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

<vertical-align 속성과 속성 값 사용 정보>

여기까지 테이블 요소의 속성에 관해 일부 알아 보았으며 

이 다음 포스팅 부터는 나머지 테이블 요소의 속성에 관하여 알아 보도록 하겠습니다.

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