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

테이블 테두리 모양에는 여러가지가 있습니다. 이 테두리 모양을 지정하는 명령어는 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:dashed;" 적용 <*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=색이름) 지정해 주면 아래와 같다.

출처 : ♡ inmyheartyou

글쓴이 : ♡ 하트 원글보기

메모 :