목록

Table 에관하여 5신
Table 테두리 다섯번째 시간입니다.
스타일을 이용한 테이블 테두리(fream)넓이지정에 관하여 알아보겠습니다. 



일반적으로 테이블의 테두리 넓이를 지정할때 border="수치"로 작성합니다.
     <table border=10 width=500 height=80>
        <tr>
          <td>
            일반적인 예 border=10
          </td>
        </tr>
   </table>
이렇게 하면

     
일반적인 예 border=10 


이렇게 나오죠
사방이 모두 같은 넓이로 나옵니다.
테이블의 테두리를 각각 다르게 표현하고 싶을때도 있겠죠.
이럴때 스타일을 지정해주면 모든 프레임을 다른 넓이로 할수 있습니다.

 style내에
border-top-width:수치;
border-right-width:수치;
border-bottom-width:수치;
border-left-width:수치;
로 넣어주면 테두리의 넓이가 각각 지정됩니다.
예를 보면서 설명하겠습니다.
지금까지 배운것을 적용하면서 해보지요
기본적인 테이블 스타일과 보드 칼라는
border-style:은 solid; 로 하고 border-color:#003366 로 하겠습니다.


  1. 테두리 상단 프레임 넓이 지정. border-top-width:수치;
     보드 스타일은 solid 상단 프레임색을 #003366.
     style="border-style:solid; border-color:#003366; border-top-width:10

     <table width=500 height=80 style="border-style:solid; border-color:#003366; border-top-width:10;">
        <tr>
          <td>
            style="border-style:solid; border-color:#003366; border-top-width:10;"
          </td>
        </tr>
   </table>



   결과 보기
style="border-style:solid; border-color:#003366; border-top-width:10 





  2. 테두리 오른쪽 프레임 넓이 지정. 
     1번의 예에서 border-right-width:수치; 를 추가 하면 됩니다.
     
     style="border-style:ridge; border-color:yellow; border-top-width:10; border-right-width:20; 

     <table width=500 height=80 
          style="border-style:ridge; border-color:yellow;border-top-width:10; border-right-width:20;">
        <tr>
          <td>
           border-top-width:10; border-right-width:20; 
          </td>
        </tr>
   </table>



   결과 보기

            border-top-width:10; border-right-width:20;
          


  3. 테두리 아래쪽 프레임 넓이 지정. 
     2번의 예에서 border-bottom-width:수치; 를 추가 하면 됩니다.
     
     style="border-style:solid; border-color:#003366; 
            border-top-width:10; border-right-width:20; border-bottom-width:30;


     <table width=500 height=80 style="border-style:solid; border-color:#003366;
        border-top-width:10; border-right-width:20; border-bottom-width:30;">
        <tr>
          <td>
           border-top-width:10; border-right-width:20; border-bottom-width:30; 
          </td>
        </tr>
   </table>



   결과 보기
border-top-width:10; border-right-width:20; border-bottom-width:30; 


  4. 테두리 왼쪽 프레임 넓이 지정. 
     3번의 예에서 border-left-width:수치; 를 추가 하면 됩니다.
     
     style="border-style:solid; border-color:#003366; 
     border-top-width:10; border-right-width:20; border-bottom-width:30; border-left-width:40;


     <table width=500 height=80 style="border-style:solid; border-color:#003366;
     border-top-width:10; border-right-width:20; border-bottom-width:30; border-left-width:40;">
        <tr>
          <td>
           border-top-width:10; border-right-width:20;  
           border-bottom-width:30; border-left-width:40; 
          </td>
        </tr>
   </table>



   결과 보기
border-top-width:10; border-right-width:20; border-bottom-width:30; border-left-width:40; 




이 테이블 테두리 넓이도 스타일을 한꺼번에 지정할수 있습니다.
border-width:상단 넓이 수치 오른쪽 넓이 수치 하단넓이 수치 왼쪽넓이 수치;
전번 시간에 배우신 테이블 테두리형태를 지정하는방법과 같아요.
상단 오른쪽 하단 왼쪽순으로 표현 합니다.

예 : border-width:5 10 15 20;
     <table border=10 width=500 height=80 style="border-style:solid; border-width:5 10 15 20;">
        <tr>
          <td>
               border-width:5 10 15 20;
          </td>
        </tr>
   </table>


   결과 보기

  style="border-style:solid; border-color:#003366; border-width:5 10 15 20;
          


 4번의 복잡한 소스로 만든 예와 똑 같습니다.

 border-width:10 과 같이 수치를 하나만 넣으면 모든 테두리 넓이가 동일하게 됩니다.
 border-width:5 10 이렇게 두개의 숫자로 지정하면 첫번째 숫자는 상하의 프레임 넓이로 나타나고
              두번째 숫자는 오른쪽과 왼쪽으로 나타 납니다.


     
border-width:10 과 같이
숫자를 하나만 넣었을때 결과

  style="border-style:solid; 
   border-color:orange: 
   border-width:10;
          

border-width:5 10;
이렇게 두가지의 숫자를 지정한 결과

  style="border-style:solid; 
  border-color:green 
  border-width:5 10;
          







정리를 해보면
 1. 넓이를 모두 똑 같이 지정 할려면
    border-width:수치 와 같이 하나만 넣으면 되고.
 2. 상하 와 좌우를 같은 넓이로 할경우는
    border-width:수치 수치 과 같이 두개의 수치를 넣으면 됩니다.
 3. 모든 프레임의 넓이를 달리할 경우
    border-width:5 10 15 20; 이렇게 4개의 원하는수치를 넣어야 겠죠.

종합해볼까요
첫시간에   border-style:
두번째     border-color:
이번시간에 border-width:
에 대하여 배우셨습니다.
스타일과 칼라 그리고 프레임 넓이를 모두 정할수 있게 되었죠
모든것을 종합해서 나름대로 꾸며 보세요.

간단한 예
border-style:dashed solid dotted double; border-color:yellow green orange blue;
 border-width:5 10 6 15; 
이렇게 한번 해볼까요?


   결과 보기




     
  style="border-style:dashed solid dotted double; border-color:yellow green orange blue;
 border-width:5 10 6 15; 
          




이런건어떨까요




style="border-style:dotted dotted dotted ridge; border-width:2 5 8 12; border-color:orange;" 




스타일을 이용하면 색다른 테이블이 나오겠죠
응용은 각자의 몫입니다.

다음 시간엔 프레임을 제어하는 다른 방법에 관하여 알아 보겠습니다.
안녕히~~



 
이 게시물을