size="2">12. Table Tag에서 사용되는 옵션
Table에 대한 전반적인 설명을 마쳤으니
이번에는 Table에 들어가는 옵션에 대해서 알아보도록 하겠습니다.
1) Table Tag의 옵션
- border="n" size="2">
표(Table)의 외곽 선의 두께를 결정합니다. n은 물론 숫자겠죠.
n은 픽셀(Pixel) 단위랍니다. n 값을 입력하지 않거나 border 옵션을
주지 않으면 기본 값으로 1이 들어가게 됩니다.
- cellspacing="n" size="2">
표 안에 위치하는 각 셀의 간격을 조절할 수 있게 하는 Tag입니다.
단위는 물론 픽셀입니다. 위에 있는 border="0"을 주고
cellspacing="0이 아닌 숫자"를 주면 각 셀간의 간격을
조절할 수 있습니다.
- cellpadding="n" size="2">
표 안에 위치하는 셀의 외곽선과 셀 안에 위치한 글자나 이미지
사이의 간격을 조절하는 옵션입니다. 쉽게 이야기해서 표의 안쪽
여백을 조절하는 것입니다. 여기서도 n은 픽셀 단위입니다.
- width="n" heignt="n" size="2">
표의 폭과 높이 그리고 각 셀의 폭과 높이를 조절하게 해주는 옵션입니다.
여기서의 n은 픽셀 단위가 될 수도 있고 퍼센트(%)가 될 수도 있습니다.
여기서 주의해야 할 것은 width와 height를 너무 작게 주면 그 값이
무시됩니다. 예를 들어 셀 안의 글자 크기를 <h1>...</h1>으로
표현한 후 width="1" height="1"로 주면 그
값이 무시됩니다.
위의 옵션에서 ""는 생략해도
됩니다. 만약 ""를 넣을 때는 border="0 과 같이 되면
큰일 납니다. " 하나를 빼먹었는데, 어떤 일이 벌어질까요? 아마도
그 이후의 화면이 나타나지 않을지도 모릅니다.
width와 height에서 n이 픽셀 단위일
경우에는 그냥 숫자만 적으면 됩니다. %일 경우는 100%가 전체화면이므로
적당하게 표현하면 됩니다. 화면의 절반을 나타내고 싶으면 width="50%"
와 같은 식으로 나타내 주면 됩니다.
<HTML>
<HEAD>
<TITLE>Table 예</TITLE>
</HEAD>
<BODY>
<TABLE border="0" cellspacing="5"
cellpadding="5" width="600" height="400">
<TR>
<TD>
예제 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기
여기서 자세한 예는 생략하도록 할께요.
여러분들이 직접해보시고 궁금한 사항이 있으면 묻고 답하기 게시판을
이용해 주시면 성심껏 답해드릴께요. 그리고 Table에 대한 강좌가 끝날
때 쯤에는 Table을 이용해서 이력서나 아니면 다른 문서 하나를 만들어
보도록 하겠습니다.
2) TD 또는 TH Tag의 옵션
- align="left"
or "center" or "right" size="2">
표(Table)의 셀 안에 위치하는 +글자나 이미지 등의 내용의 수평
위치를 조절할 수 있습니다.
- valign="top"
or "middle" or "bottom" size="2">
align은 수평 위치를 조절하지만 valign을 이용하면 수직 위치도
조절할 수 있습니다. valign은 "middle"이 기본 옵션입니다.
- width="n" heignt="n" size="2">
각 셀의 폭과 높이를 조절하게 해주는 옵션입니다. 나머지는 표(Table)에
있는 설명과 동일합니다.
- colspan="n" size="2">
표의 열을 n개의 수만큼 하나로 합치는 옵션입니다. 그러니까 여기서
n은 셀의 수를 의미합니다.
- rowspan="n" size="2">
표의 행을 원하는 수만큼 하나로 합치는 옵션입니다. 여기서 n은
열의 수를 의미합니다.
3) 옵션을 사용하지 않은 Table
예
<HTML>
<HEAD>
<TITLE>옵션을 사용하지 않은 Table
예</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TD>
면용 </TD>
<TD>
인희 </TD>
<TD>
주형 </TD>
<TD>
규일 </TD>
</TR>
<TR>
<TD>
상욱 </TD>
<TD>
효일 </TD>
<TD>
원희 </TD>
<TD>
우성 </TD>
</TR>
<TR>
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
영주 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기
여기서 border 옵션을 주지 않으면
Default 값이 border="0" 이 되고 위와 같이 border 만 상용하게
되면 Default 값이 border="1" 과 같게 됩니다.
<HTML>
<HEAD>
<TITLE>옵션을 사용한 Table 예</TITLE>
</HEAD>
<BODY>
<TABLE border>
<TR>
<TD
colspan="2"> 면용, 인희 </TD>
<TD>
주형 </TD>
<TD>
규일 </TD>
</TR>
<TR>
<TD>
상욱 </TD>
<TD>
효일 </TD>
<TD
rowspan="2"> 원희<BR>영주 </TD>
<TD>
우성 </TD>
</TR>
<TR>
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기
글쎄 면용이하고 인희하고 결혼을
하고 원희랑 영주도 결혼을 했대요. 후후.. 대강 이해가 가시죠?
직접 메모장에 써보시던지 아님 카피해서
넣은 후 html 파일로 저장한 후 직접 한번씩 해 보세요. |
[펌 강의] 12. Table Tag에서 사용되는 옵션 
