테이블(3신)

오늘은 테이블 테두리에 색상을 넣어 보고
응용법도 함께 해보겠습니다.
일반적으로 가장많이 알려지고 또 사용되고 있는것이
bordercolor입니다.
조금더 신경을 쓰시는분이라면 
borderColorLight와borderColorDark 의 변수를 사용 하시기도 하지요.
bordercolor로 지정하면 모든 테두리가 하나의 색상으로만 표현됩니다
borderColorLight와borderColorDark를 사용하면 두가지 색으로 표현되지요.
이밖에도 테두리 각각 모두 다른 색으로 지정할려면 style을 사용 합니다.
이중에 오늘은 일반적인 
borderColorLight와borderColorDark의 사용법과 응용법을 알아보겠습니다.

borderColorLight란 밝은곳의 색상을 지정하는것이고
borderColorDark는 어두운부분의 색상입니다.

  1. 입체감을 가진 테이블 입니다
     bordercolordark="white" bordercolorlight="black"로 정해 보았습니다

    <table border="1" cellpadding="0" cellspacing="0" width="350" bordercolordark="white" bordercolorlight="black">
        <tr>
            <td height="26" bgcolor="lightsteelblue" align="center">
                     입체감을 가진 테이블

           </td>
       </tr>
       <tr>
          <td height="26" valign="top" bgcolor="white">
 
          </td>
       </tr>
   </table>

   결과 보기

 결과에서 보듯이 
테이블의 테두리에는 상단과 좌측 프레임에 bordercolorlight가 표시되고
각각의 셀에는 하단과 우측 프레임에 bordercolorlight의 색이 나타납니다. 
이런 특성을 이용 하기에 돌출된 효과가 연출되지요.
테두리가 작아서 구분하기가 힘드세요?
테두리를 좀크게 하나 더 해보겠습니다.

   결과 보기

이런것은 홈페이지를 만들때 많이들 활용하지요.
강조의 효과가 필요한곳에 응용하면 좋을것입니다.
몇가지의 샘플을 보여 드리겠습니다. 

 음영을 같은쪽으로 하기 위하여 td에 dark와 light색상을 바꾸었습니다.
 
 <table bgcolor=#006666 border=1 bordercolordark=black cellpadding=5 width="250">
    <tr>
       <td bordercolordark=white bordercolorlight=black>
         <b>bgcolor=#006666</b>
         포토샵을 사용하지 않아도 이렇게 버튼이미지를 만들수 있습니다. 
        </td>
    </tr>
 </table>
  

   결과 보기

  색상을 바꾸어 보겠습니다.
  푸른색과 붉은계통으로 바꾸어보죠.
  <table bgcolor=#202222 border=3 bordercolorlight=blue bordercolordark=red cellspacing=3 cellpadding=5>
    <tr>
       <td bordercolordark=green bordercolorlight=brown>
        
          bordercolorlight=blue bordercolordark=red
          bordercolordark=green bordercolorlight=brown  
       </td>
    </tr>
  </table>

   결과 보기

좀이상하죠?
역시 입체감 나는 테이블은 색상대비가 가장 심한
흰색과 검은색이 어울립니다.

일부분에만 바꾸어 보겠습니다.
여러칸을 나누고 특정부분에 넣어보죠.
  예1 : tr 에넣기.
           <TABLE cellSpacing=0 cellPadding=5 width=250 bgColor=#f0f0f0 border=4  bordercolor=black>
                 <TR bordercolordark=white bordercolorlight=black>
                      <TD width=20 bgColor=#808080>
                        <p>&nbsp;
                      </TD>
                      <TD bgColor=#c0c0c0>
                         ▶ 입체 테이블
                      </TD>
                </TR>
                <TR>
                      <TD width=20 bgColor=#c0c0c0>
                        <p>&nbsp;
                      </TD>
                      <TD>
                         여기엔 tr에만 사용되었습니다. . 
                      </TD>
               </TR>
          </TABLE>
  예2 : 이것은 처음 td에만 
        bordercolordark=white bordercolorlight=black 을 넣었습니다.

   결과 보기

   예1

   예2

글을 작성하다 보니깐 이상하게 입체감 나는 테이블에만 집중된것 같네요.
방금 생각 났는데
생각난김에 팁을 하나 더 알려 드릴께요.
SPACER TYPE="BLOCK"
이라는것을 알고 있으세요? 
테이블공간을 지정해주고 타입을 지정해 주는 태그입니다.
음--
테이블로 선을 만들때 height를 1 px로 지정해도 깨어지고 예상보다 크게 나옵니다.
공백문자를 넣어도 마찬가지로 크게 나오죠.
이걸 방지하기위하여 1px 투명 이미지를 만들어 사용하기도 합니다.
좀 어려우신가요?
홈 만들어 보신분은 이해 하실수 있을겁니다
SPACER TYPE="BLOCK" 의 명령어를 이용하면 쉽게 1px의 테이블을 만들수 있어요.
다시말해서 테이블로 선의 효과를 나타낼때 공간 지정을 하는 명령어 입니다. 
이건 홈만들때 유용하게 사용 할수 있습니다
이글을 보시는분은 아름다운글 올리는방법의 테이블편을 모두 알고 있다는 가정하에 설명합니다.

 예
      <TABLE cellSpacing=0 cellPadding=0 border=0>
          <TR>
             <TD vAlign=bottom width=147 bgColor=hotpink height=18>
                <p>&nbsp;&nbsp;<FONT color=white><B>아름다운글</B></FONT></TD>
             <TD width="273" height=18>
                <p> </TD>
          </TR>
          <TR>
             <TD width="420" bgColor=hotpink colSpan=2 height=1>
              <p><SPACER HEIGHT="1" TYPE="BLOCK">
             </TD>
          </TR>
          <TR>
             <TD width="420" colSpan=2 height=10>
               <p><SPACER HEIGHT="1" TYPE="BLOCK">
             </TD>
          </TR>
      </TABLE>

   결과 보기

오늘글은 어쩐지 두서가 없어 보이는군요.
아래에 예가 하나 있습니다
연구해보시고
적당히 수정하셔서
사랑하는 사람에게 메일로 보내 보세요

다음에는 style을 이용한 테이블 테두리의 색상 설정에 대하여 알아 보겠습니다.

더위가 연일 계속 되네요.
잠못 이루는 열대야가 괴롭히는 시간들
부디 건강 조심 하시고 다음 시간까지 안녕히~~