본문 바로가기

■ 블로그꾸미기/HTML/css

[ HTML ] 테이블 테두리/색상/cellspacing/cellpadding

 테이블의 두께와 색상을 바꿔보겠습니다.

<table border="3" bordercolor="red"><tr><td>
희야의 웹하우스
</td></tr></table>
결과물

border="3" 은 테두리의 두께를 정하는 것입니다.
bordercolor="red" 테두리의 색상을 정합니다.



 cellspacing 칸과 칸사이의 여백

<table border="3" bordercolor="red" cellspacing="7"><tr><td>
희야의 웹하우스
</td></tr></table>
결과물

숫자가 커질수록 간격이 더 넓어지겠지요~



 cellpadding 칸 안에서의 여백 조정

<table border="3" bordercolor="red" cellpadding="7"><tr><td>
희야의 웹하우스
</td></tr></table>
결과물

숫자가 커질수록 칸 안쪽의 여백이 넓어집니다.



이젠 위 속성들을 이용하여 , 같이 사용해 보겠습니다.
<table border="5" bordercolor="blue" cellspacing="4" cellpadding="7"><tr><td>
희야의 웹하우스에 어서오세요^^
</td></tr></table>
결과물


속성을 조금 넣었는데도 제법 깔끔한 테이블이 만들어 졌습니다.
여백과 색상 두께를 잘 조절해서 깔끔한 테이블을 만들어 보세요 ^^