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