[HTML 기초 강좌] 9. Table 태그

1. Table

table 태그는 표라고 생각하면 쉽다.

한글이나 엑셀의 표처럼 그 표를 직접 그린다고 생각하면 이해가 빠를거라 생각된다.

홈페이지에서는 영역을 나눌 때 사용하거나 게시판 목록에서도 table 태그를 많이 사용하고,

내용을 일정한 간격과 모양을 가춰 표현할 때도 사용한다.

원하는 모양의 표를 출력하려면 속성에 대한 이해가 많이 필요하다.

속성이 조금이라도 틀어진다면 그 표는 보기 어려울 정도로 틀어져 있거나 젠가처럼 이빠진 모양으로 출력될 것이다.

 

 

홈페이지 제작에 있어서 빠질 수 없는 태그이므로 기본적인 속성과 사용법은 필히 숙지해야 한다.

 

 

기본적인 속성들은 다음과 같다.

width : table태그에 설정하면 전체 테이블의 너비가 되고, td태그에 설정하면 각 cell의 너비가 된다.
height : table태그에 설정하면 테이블 전체의 높이가 되고, tr태그에 설정하면 각 row(행)의 높이가 된다.
bgcolor : 배경색을 설정한다. (table, tr, td에 설정할 수 있다.)
background : 배경이미지를 설정한다. (table, td에 설정할 수 있다.)

cellspacing : 셀과 셀의 간격을 설정한다.(table태그에만 사용한다.)
cellpadding : 셀의 안쪽 여백을 설정한다.(table태그에만 사용한다.)
border : 테이블의 테두리선의 두께를 설정한다. (border가 0이면 모든 선이 안보이고, 1이상이면 선이 나타난다.)
bordercolor : 전체 선의 색을 설정한다. (table태그에 사용)
bordercolordark : 그림자 부분의 색을 설정한다. (table태그에 사용)
bordercolorlight : 밝은 부분의 색을 설정한다. (table태그에 사용)

align : table태그에 사용하면 table자체가 움직인다. tr, td태그에 사용하면 해당 영역의 데이터가 정렬된다. (left, center, right)
valign : tr, td태그에만 사용하고 데이터가 상,하 정렬된다. (top, middle, bottom)

 

 

 

ex) table태그.html

 

 

 

 

셀을 병합하는 속성은 다음과 같다.

colspan : 설정하는 수만큼의 가로의 칸을 하나로 합친다.

rowspan : 설정하는 수만큼의 세로의 칸을 하나로 합친다.

 

ex) table태그2.html

 

위의 table은 6 x 4 의 표이다.

셀을 병합 할 때 잘못 하게 되면 칸이 틀어지거나 젠가처럼 이가 나간 모양 또는 뒤엉켜버릴 수 있다.

전체 표를 생각하면서 보면 어떻게 칸들이 병합되는지 이해할 수 있을 것이다.