CSS 테이블 스타일

<목차로 돌아가기>

테이블의 테두리

테이블 테두리는 아래와 같이 설정 할 수 있습니다.

<TR>과 <TH>에 CSS 속성을 주로 적용합니다. 

Example

※ 소스 다운 받기 <-- 클릭

테이블 색은 빨간색으로 blue라고 되어 있는 부분을 바꿔주면 됩니다.^^ 

RESULT

보통 테이블이 한줄만 있는데 두 줄이라서 이상하죠? table 이나 th중 하나를 지워보고 실행해 보세요! 

이 방법 말고 한줄로 만드는 방법은 아래의 설명 참조!

어색한 두줄 한줄로 만들기

두 줄이라서 많이 당황하셨죠? border-collapse 속성을 이용하면 한 줄로 만들 수 있습니다. 걱정 ㄴㄴ!

Example

※ 소스 다운 받기 <-- 클릭

RESULT

테이블의 넓이와 높이

테이블의 넓이와 높이는  width와 height 속성으로 설정할 수 있습니다.

설정값은 '%'와 'px'로 설정이 가능합니다. ^^

Example

※ 소스 다운 받기 <-- 클릭

RESULT

---

테이블 글자 가로 정렬

테이블을 만드는 방법을 살펴보았으니 이제 테이블의 글자를 살펴 봅시다 ^^

테이블안의 글자는 왼쪽정렬이 되어 있는데 가운데로 몰아 넣을 수 있습니다.

Example

※ 소스 다운 받기 <-- 클릭

RESULT

테이블 세로 정렬

테이블 세로 정렬도 있습니다!

Example

※ 소스 다운 받기 <-- 클릭

RESULT

테이블 여백

테두리와 글자사이의 간격을 조정 할 수도 있습니다.

Example

※ 소스 다운 받기 <-- 클릭

RESULT

기타

Make a fancy table

This example demonstrates how to create a fancy table.

Set the position of the table caption
This example demonstrates how to position the table caption.