웹제작 강의/HTML

HTML 13강 table에 효과주기

vonzone 2009. 4. 4. 01:31
오늘은 HTML 13강으로 table에 효과주는 방법에 대해서 알아보도록 하겠습니다.
오늘은 cellspacing 과 border의 차이를 설명하면서 많이 실수를 했는데요...ㅜ.ㅜ
용서해 주세요...ㅜ.ㅜ 댓글 달아주시면 답변드리겠습니다.^^


<table 강의 1>

html13 from Lee Jun Ho on Vimeo.






<table 강의 2>
 


 

 

< table의 속성 >



1. <table> 태그의 속성

 1) 배경색  

      table 전체에 걸쳐 배경색을 지정할 수가 있다.

      ex)  <table width=500 bgcolor=#003366>


 2) 가로세로 길이

   1. width : 표 전체의 가로길이를 픽셀값으로 지정할 수 있다.

   2. height : 표 전체의 세로길이를 픽셀값으로 지정한다.

  ex)  <table width=500 height=800 align=center>


 3) 정렬

    align : left, right, center를 지정할 수 있다.

      ex)  <table width=500 align=center>


 4) 테두리 색상 : bordercolor 로 테두리의 색상을 지정할 수 있다.

   ex) <table width=500 align=center border=1 bordercolor=#000000>


 6) 셀간격

   1. cellspacing : 셀과 셀 사이의 간격을 지정한다.(기본 값 : 1)


   2. cellspacing=0, border=0 으로 지정하면 칸과 칸 사이에 간격이 안 생긴다. 


 7) 셀안쪽 여백

    cellpadding : <td></td> 사이에 들어가는 글과 셀과의 간격



2. <tr> 태그와 <td>태그의 공통속성

 1) bgcolor : 배경색을 지정할 수 있다.

 2) 가로세로 정렬 

   1. align : left / right / center을 지정할 수 있다.

   2. valign : up / bottom / middle을 지정할 수 있다.



* 참고사항
작은 단위에 주는 효과가 우선순위로 선택된다. ( <table>  
<  <tr>   <   <td> )


<table width=500 bgcolor=#000000 border=1>

<tr bgcolor=#ffffff>

  <td bgcolor=#003366>

       내용

  </td>

</tr>

</table>


의 경우에서 테이블의 배경색깔은 #003366이 될 된다.