본문 바로가기
정보창고/블로그 정보

24.table-tag의 보충설명-

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

'정보창고 > 블로그 정보' 카테고리의 다른 글

Table 태그의 보충설명 [1]

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

기본명령어 속성
<table></table>  테이블 태그에 맨처음과 맨 끝에 들어갑니다. 
<tr></tr>  한 행을 만들어 줍니다. 
<caption></caption>  표에 제목을 나타냄
<td></td>  한 셀을 만들어 줍니다. 
<th><th> 셀 제목을 나타냅니다. 
 부가적 속성  기능
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" border="15"
표 만
기 들
표 만
기 들
표 만
기 들
표 만
기 들
표 만
기 들

흠......더 이상 설명 안해도 이해가 되시겠죠^^ 근뎅....다른 건 다 이해가 되는데 맨 끝에 있는 색깔이 들어 있는 표는 어떻게 한거냐구요? 테두리 선에 색을 넣는 것은 그렇게 흔하게 사용되는 것이 아니지만 , 태그에....
 bordercolorlight="색명"  bordercolordark="색명" 만 넣어 주시면 됩니다.
굳이 해석하자면 "밝은 테두리색"," 어두운테두리색" 이 되겠지만....밝은 테두리색이 위부분에 오는 거구요.....어두운 테두리색이 아래쪽에 오는 겁니다.^^
22.프레임 나누기  (0) 2012.02.08
23.프레임 응용하기  (0) 2012.02.08
25.table-tag의 보충설명-  (0) 2012.02.08
26.table-tag의 보충설명-  (0) 2012.02.08
27.태그-프레임 나누기- end  (0) 2012.02.08

'정보창고/블로그 정보' Related Articles

티스토리툴바