지혜의 방/태그연습

[스크랩] 테이블 테두리 모양

가온찍기 2007. 4. 19. 12:58 


    
테이블 테두리 모양에는 여러가지가 있습니다.
    
이 테두리 모양을 지정하는 명령어는 style로 정의 합니다.
    
테이블 명령어 내에  style="border-style:변수;"라고 넣으면 
    
변수의 정의 대로 테이블 테두리모양이 바뀌어 집니다.
    

    

    
1.일반적으로 많이 사용하는 테이블
    
<table border=10 bordercolor=green cellpadding=0 cellspacing=0 width=500 height=80>
    
<tr><td>
    
일반적인 테이블 테두리
    
</td></tr></table>
    

    
결과보기
    


    일반적으로 많이쓰는 테두리

    
★밝은면과 어두운면(light,dark)의 구분이 확실하고 튀어나온 느낌이다.
    

    

    
2. style="border-style:solid;" 을 적용해 보겠습니다
    
<table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:solid;">
    
<tr><td>
    
style="border-style:solid;"
    
</td></tr></table>
    

    
결과보기
    

    


    style="border-style:solid;"

    
★대체적으로 사각 모두가 평면으로 단단한 느낌이다.
    

    

    
*표 빼고사용
    
3. style="border-style:double;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:double;">
    
<*tr><*td>
    
style="border-style:double;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:double;"

    
★두겹으로 겹친 한쌍으로 나온다.
    

    

    
4. style="border-style:dashede;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:dashed;">
    
<*tr><*td>
    
style="border-style:dashed;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:dashed;"

    
★톱니 바퀴처럼 나온다.
    

    

    
5. style="border-style:groove;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:groove;">
    
<*tr><*td>
    
style="border-style:groove;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:groove;"

    
★홈이 패인듯한 느낌을 준다.
    

    

    
6. style="border-style:ridge;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:ridge;">
    
<*tr><*td>
    
style="border-style:ridge;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:ridge;"

    
★5번과는 반대로 튀어나온  느낌이다.
    

    

    
7. style="border-style:dotted;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:dotted;">
    
<*tr><*td>
    
style="border-style:dotted;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:dotted;"

    
★동그란 점 선으로 나온다
    

    

    
8. style="border-style:inset;" 적용
    
<*table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:inset;">
    
<*tr><*td>
    
style="border-style:inset;"
    
<*/td><*/tr><*/table>
    

    
결과보기
    

    


    style="border-style:inset;"

    
★밝은면과 어두운면(light,dark)의 구분이 확실하고 안쪽으로 들어간 느낌이다.
    

    

    
9.위에 8 가지 테이블을 종합해서 만들면 아래와 
    
같은 모양이 된다.
    

    




    

    

    
10.여기에 각각 테두리 색깔(bordercolor=색이름)
    
지정해 주면 아래와 같다.



출처 : 58우리들의 은하수
글쓴이 : 분이 원글보기
메모 :

'지혜의 방 > 태그연습' 카테고리의 다른 글

[스크랩] 이미지 자료실  (0) 2007.04.19
[스크랩] 음악태그 쉽게 이해하기  (0) 2007.04.19
[스크랩] [색상표] 한눈에 볼수있는 색상표  (0) 2007.04.19
[스크랩] 글자데그 총집합  (0) 2007.04.19
[스크랩] 태그의 기초-아름다운 글 올리기  (0) 2007.04.19

'지혜의 방/태그연습'의 다른글

  • 현재글[스크랩] 테이블 테두리 모양

관련글

Copyright © Kakao Corp. All rights reserved.

티스토리툴바