태그♡소스방

테이블(테두리)에 대하여(6)

탤런트 2007. 1. 26. 11:51
Table 에관하여 6신
Table 테두리 여섯번째 시간입니다.
오늘은 테이블 테두리(frame)를 frame의 속성을 이용하여 제어 하는 방법에 대하여 알아보겠습니다. 이 frame의 속성은 홈페이지 제작시 활용하시면 많은 도움이 될듯합니다.

테이블의 프레임 속성에는 void, above, below, hsides, vsides, lhs, rhs 이렇게 6가지가 있습니다. 테이블 명령어내에 frame="속성" 을 넣어주면 됩니다. 하나씩 예를 보아 가면서 설명을 드리죠.

  1. frame=void
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=void>
            <tr align="center"> 
            <td>table</td>
            <td>table</td>
          </tr>
          <tr align="center"> 
            <td>table</td>
            <td>table</td>
          </tr>
        </table>

   결과 보기
table table
table table

이렇게 테이블 내의 선만 나타나고 테이블 외곽 테두리는 모두 나타나지 않습니다.


  2. frame=above
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=above>
            <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
          <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
        </table>

   결과 보기
테이블 테이블
테이블 테이블

frame=above를 사용하면 이렇게 나옵니다.

  3. frame=below
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=below>
            <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
          <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
        </table>

   결과 보기
테이블 테이블
테이블 테이블


  4. frame=hsides
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=hsides>
            <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
          <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
        </table>

   결과 보기
테이블 테이블
테이블 테이블


  5. frame=vsides
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=vsides>
            <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
          <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
        </table>

   결과 보기
테이블 테이블
테이블 테이블


  6. frame=lhs
         <table width="300" cellspacing="0" cellpadding="5" border="1" bordercolor="#888888" frame=lhs>
            <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
          <tr align="center"> 
            <td>테이블</td>
            <td>테이블</td>
          </tr>
        </table>

   결과 보기
테이블 테이블
테이블 테이블

이렇게 테이블 프레임을 제어하는 방법이 있습니다.
알아두면 홈페이지 작성시나 문서 작성시 유용하게 사용하실수 있을 겁니다.

다음 시간에는 스타일을 이용하여 테이블에 배경 그림넣는법을 알아보겠습니다.
아름다운글 올리는방법중에도 테이블 배경 그림 넣는법이 있습니다.
다음시간의 배경 올리는법을 이해 하실려면 우선 기본적인 배경넣는법을 아름다운글 올리는방법 11신 에서 충분히 익힌다음에 보시면 좀더 이해가 쉬울겁니다. 다음 시간까지 안녕히