액자 (테두리) 만들기

 

테이블 테두리 모양에는 여러가지가 있습니다.

이 테두리 모양을 지정하는 명령어는 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=색이름)

지정해 주면 아래와 같다.