목록 수정 삭제 쓰기

자~ border 속성을 배웠으니 이제 표의 넓이(width) 와 높이(height)를 정하는 방법을 알아보겠습니다. 표의 넓이와 높이는 뭐 자세히 설명할 것도 없을 정도로 간단합니다. 넓이를 정해줄때는 width="수치" or "수치%" 를 적어 주시면 됩니다. 높이를 정해 줄때도 height="수치" or "수치%" 를 적어주시면 끝입니다. 단, 여기서 주의 할 점은 수치를 넣을 때 "수치%"(백분율)을 사용할 수 있다는 겁니다. 그냥 "수치(픽셀)"를 사용하는 경우에는 표의 크기가 절대값이 되기 때문에 브라우져의 크기가 아무리 변해도 표의 크기에는 영향이 없죠. 하지만 표의 크기를 %(백분율) 로 하는 경우에는 브라우져의 크기에 따라 상대적으로 표의 크기도 변하기 때문에 홈페이지 제작시 주의를 해야 합니다. 이렇게 쉽게 설명을 해도 가끔씩은 모르시는 분들이 계시기 때문에 또 다시 예를 들어가며 설명을 드리겠습니다. 아래 예제를 각각 태그연습장에서 실행을 시켜보세요.
"수치(픽셀)" 일 경우 "수치%(백분율)"일 경우
<table border="2" width="400" height="400">
<tr>
<td>브라우져의 크기를 조절해도</td>
</tr>
<tr>
<td>표의 크기는 변하지 않습니다.</td>
</tr>
</table>		 <table border="2" width="50%" height="50%">
<tr>
<td>브라우져의 크기를 조절하면</td>
</tr>
<tr>
<td>표의 크기가 변합니다.</td>
</tr>
</table>

 이제 이해가 되시는지.....? ^^ 아시겠죠? 그럼 이번에는 cellspacing="수치" 와 cellpadding="수치" 에 대해서 알아보겠습니다. cellspacing 속성은 셀 구분 선의 굵기를 조정해주는 속성입니다. 그리고 cellpadding 은 셀 안쪽 여백의 간격을 조정해 줍니다. 흠....이렇게 설명하니 뭔지 잘 모르시겠죠.....? 그로므로 또한 예제를 보도록 하겠습니다. 

cellspacing="5" cellspacing="15" cellpadding="5" cellpadding="15"
<table border="1" cellspacing="5">
<tr>
<td>구분선</td>
</tr>
<tr>
<td>굵기조정</td>
</tr>
</table>		 <table border="1" cellspacing="15">
<tr>
<td>구분선</td>
</tr>
<tr>
<td>굵기조정</td>
</tr>
</table>		 <table border="1" cellpadding="5">
<tr>
<td>셀 안쪽</td>
</tr>
<tr>
<td>여백간격</td>
</tr>
</table>		 <table border="1" cellpadding="15">
<tr>
<td>셀 안쪽</td>
</tr>
<tr>
<td>여백간격</td>
</tr>
</table>
구분선
굵기조정
구분선
굵기조정
셀 안쪽
여백간격
　
셀 안쪽
여백간격

 흠......알겠죠^^ 근뎅.....제 생각에는 모르겠다는 분드 몇 분 계실 것 같은데....그런 분들은 저 한테 바로 질문하지 말고 위에 소스의 수치부분을 바꿔가면서 태그연습장에서 연습을 해보세요. 그러면 어느 순간 이해가 될 겁니다. 그래도 도저히 모르겠다....하시는 분들은 먼저 자기 IQ에 대한 의심을 한번 해보시고 질문을 남기시길......^^
 마지막으로 <table>명령어의 속성으로는 bgcolor="색명" or "RGB색상코드" 에 대해서 알아보죠. 이건 아까 넓이와 높이 조정보다 더 쉬운데....그냥 위에 명령어 적어 주시고 자기가 맘에 드는 색명을 적어 주세요. 그럼 끝입니다. 이건 다 이해하시 겠지만 혹시나 해서 예제를 올려드립니다. ^^

bgcolor="red" bgcolor="#ff0000" bgcolor="green"　 bgcolor="#008000"
　
   
   
 
　
   
   
 
   
   
   
   

 ※ RGB색상코드는 이곳을 ☞"RGB색상표" 참고하세요^^

 여기까지 <table></table> 명령어에 대한 속성을 다 알아보았네요. 참고적으로 다음 페이지에서 설명할 <tr></tr> , <td></td> 명령어의 속성도 다 위에 속성들을 포함한답니다. 그러니깐 한번 할때 확실히 해두면 좋겠죠^^  그럼 다음 페이지로 넘어가도록 하겠습니다.

                                                                                                                                                               출처 : 태그매니아

이 게시물을