Information

HTML 코드중 TABLE 코드를 잘 사용해서, 테이블 테두리를 이쁘게 장식하는 법을 알아보자.

테이블의 속성은 크게, 테두리속성/배경속성/셀속성 정도로 나눌 수 있습니다.
이 글에서는 테두리 속성을 이용하여 테두리를 이쁘게 꾸민후,
셀에 내용물을 넣는 방법을 이야기 하도록 하겠습니다.


최종목적은 아래와 같은 형태의 테두리를 꾸미는 것입니다.

1. 가장 간단한 사용법
<TABLE>                 --> 테이블의 시작을 표시.
<TR>                       --> 테이블내에 새 가로줄의 시작을 표시.
<TD>                       --> 셀의 시작을 표시.
[셀에 쓰고싶은 내용]
</TD>                      --> 셀의 끝을 표시.
   ...                         --> <TR>과 </TR>사이에 여러개의 셀을 넣을수 있다.
<TD>           
</TD>
</TR>                      --> 가로줄의 끝을 표시.
</TABLE>                --> 테이블의 끝을 표시

2. 테두리 꾸미기
테이블 속성에는 외곽선 두께&색상&스타일 등을 설정할 수 있다.
이 설정들은 <TABLE  와 > 사이에 기록해주면 된다.

<TABLE
border = "3"                --> 외곽선을 3픽셀로 지정      (0을 넣으면 테두리 안보이게 됨)
bordercolor="#FF0000" --> 외곽선을 빨간색으로 지정 (초록은 #00FF00, 파랑은 #0000FF)
style="border:3px dotted;  --> 외곽선을 3px굵기의 점선으로 지정
                                          (solid, dashed, double, groove, ridge가능)
         border-color:#0000FF;"  -->외곽선을 파랑색으로 지정
cellspacing = 0           --> 셀사이 바깥여백을 0으로 지정
cellpadding = 0           --> 셀의   내부 여백을 0으로 지정
>

체크사항:
border=0 이고 border:3px dotted; 인경우 외곽선이 3px짜리 점선으로 표시
border=1 이고 border:3px dotted; 인경우 외곽선이 3px짜리 점선 + 1px짜리 실선 둘다 표시
border=5 이고 border:3px dotted; 인경우 외곽선이 3px짜리 점선 + 1px짜리 실선 둘다 표시
                                                      (style을 지정하는 경우, 외곽선 실선은 항상 1px로 설정된다)
border=5 이고 style 설정없는경우 외곽선이 5px짜리 실선으로 표시


3. 실전예제
최종 소스는 다음과 같다.

[최외각 테이블 시작]
<table border="0" bordercolor='#F1DDC4' style='border:2px dotted; border-color:#F1DDC4;' cellspacing=0 cellpadding=0>
<tr><td>

[두번째 테이블 시작]
<table border="0" bordercolor='#F4E3CE' style='border:4px dotted; border-color:#F4E3CE;' cellspacing=0 cellpadding=0>
<tr><td>

[맨안쪽 테이블 시작]
<table border="0" bordercolor='#F7C48D' style='border:6px dotted; border-color:#F7C48D;' cellspacing=0 cellpadding=0>
<tr><td>


[여기에 테이블에 들어갈 내용을 넣으세요.]

</td></tr>
</table>
[맨안쪽 테이블 끝]

</td></tr>
</table>
[두번째 테이블 끝]

</td></tr>
</table>
[최외각 테이블 끝]