24.table-tag의 보충설명-

풍란의 향기 2012. 2. 8. 12:30

Table 태그의 보충설명 [1]

홈페이지를 제작하는데 있어서 표를 빼놓고는 홈페이지를 만든 다는 생각을 할 수 없을 정도로 table 태그는 아주 중요합니다. 또한 table 태그만 잘만 사용해도 웹 디자인은 따로 할 필요가 없을 정도로 유용한 태그입니다. 표를 잘 이용하면 홈페이지를 아주 간결하고 산뜻하게 꾸밀 수 있답니다. 이러한 table 태그를 잘 하기 위해선 몇가지 속성만 잘 이해하시면 됩니다.

기본명령어

속성

테이블 태그에 맨처음과 맨 끝에 들어갑니다.

한 행을 만들어 줍니다.

표에 제목을 나타냄

한 셀을 만들어 줍니다.

셀 제목을 나타냅니다.

부가적 속성	기능
CELLSPACING=수치	<--셀과 셀사이의 간격 조정
CELLPADDING=수치	<--셀 내부에 간격 조정
WIDTH=수치	<--가로 넓이를 지정한다.
HEIGHT=수치	<--세로 높이를 지정한다
border=수치	<--표에 테두리 두께 조정
<TD COLSPAN=가로셀수 ROWSPAN=세로셀수>	<--셀을 가로,세로로 합치고 싶을때 사용

기본뼈대	설명
<table> <tr> <td> </td> </tr> </table>	<--표를 시작한다는 의미 <--표의 한 행의 시작을 의미 <--표의 한 셀(칸)을 시작한다는 의미 <--표의 한 셀(칸)을 종료한다는 의미 <--표의 한 행을 종료한다는 의미 <--표를 종료한다는 의미

<table> <-- 여기서 부터 표를 만들기 시작해서 </table> <--여기서 표를 끝내준다는 의미를 해줍니다." 그러나 <html></html> 과는 다른 점이 있다면 <table> 에는 부가적인 속성이 붙는 다는 겁니다. 그럼 속성을 한번 봐 볼까요?

속성	기능
border="수치"	표의 테두리 두께를 조정해줍니다.
WIDTH="수치" or "수치%"	표의 가로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능
HEIGHT="수치" or "수치%"	표의 세로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능
CELLSPACING="수치"	셀의 구분 선굵기를 조정합니다.
CELLPADDING="수치"	셀의 안쪽여백의 간격을 조정합니다.
bgcolor="색명" or "색상코드명"	표의 배경색을 정해줍니다.

보통 사용할 때

<table border="수치" width="수치" height="수치" cellspacing="수치" cellpadding="수치" bgcolor="색명">

그럼 하나하나 설명해 보죠^^ 먼저 border="수치" 는 설명드린대로 표의 테두리 두께를 조정해줍니다.

border="0"

border="1"

border="5"

border="15"

표	만
기	들

표	만
기	들

표	만
기	들

표	만
기	들

표	만
기	들

흠......더 이상 설명 안해도 이해가 되시겠죠^^ 근뎅....다른 건 다 이해가 되는데 맨 끝에 있는 색깔이 들어 있는 표는 어떻게 한거냐구요? 테두리 선에 색을 넣는 것은 그렇게 흔하게 사용되는 것이 아니지만 , 태그에....
bordercolorlight="색명" bordercolordark="색명" 만 넣어 주시면 됩니다.
굳이 해석하자면 "밝은 테두리색"," 어두운테두리색" 이 되겠지만....밝은 테두리색이 위부분에 오는 거구요.....어두운 테두리색이 아래쪽에 오는 겁니다.^^