테이블 만들기 - 2

자~ 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> 명령어의 속성도 다 위에 속성들을 포함한답니다. 그러니깐 한번 할때 확실히 해두면 좋겠죠^^  그럼 다음 페이지로 넘어가도록 하겠습니다.

                                                                                                                                                               출처 : 태그매니아