테이블 테두리

Table 테두리 종류

・none------테두리 표시 없음(디폴트)

・dotted----점선

・dashed----파선

・solid------실선

・double----이중선

・groove----선이 움푹 들어간 것처럼 보임

・ridge------선이 튀어나온 것처럼 보임

・inset------선보다 안쪽이 움푹 들어간 것처럼 보임

・outset-----선보다 안쪽이 튀어나온 것처럼 보임

 

 

none

<table style="border-style:none" bgcolor="#afeeee">
<tr><td>
테두리 표시 없음
</td></tr>
</table>

브라우저 표시

↓↓↓

테두리 없음

 

 

dotted

<table style="border-color:#0000ff ; border-style:dotted ; border-width:2px ;">
<tr><td>
점선
</td></tr>
</table>

브라우저 표시

↓↓↓

점선

 

 

dashed

<table style="border-color:#0000ff ; border-style:dashed ; border-width:3px ;">
<tr><td>
파선
</td></tr>
</table>

브라우저 표시

↓↓↓

파선

 

 

solid

<table style="border-color:#0000ff ; border-style:solid ; border-width:1px ;">
<tr><td>
실선
</td></tr>
</table>

브라우저 표시

↓↓↓

실선

 

 

solid

<table style="border-color:#0000ff ; border-style:double; border-width:3px ;">
<tr><td>
이중선
</td></tr>
</table>

브라우저 표시

↓↓↓

이중선

 

 

groove

<table style="border-color:#6495ed ; border-style:groove; border-width:5px ;">
<tr><td>
선이 움푹 들어간 것처럼 보임
</td></tr>
</table>

브라우저 표시

↓↓↓

선이 움푹 들어간 것처럼 보임

 

 

ridge

<table style="border-color:#6495ed ; border-style:ridge; border-width:5px ;">
<tr><td>
선이 튀어나온 것처럼 보임
</td></tr>
</table>

브라우저 표시

↓↓↓

선이 튀어나온 것처럼 보임

 

 

inset

<table style="border-color:#daa520 ; border-style:inset; border-width:4px ;">
<tr><td>
선보다 안쪽이 움푹 들어간 것처럼 보임
</td></tr>
</table>

브라우저 표시

↓↓↓

선보다 안쪽이 움푹 들어간 것처럼 보임

 

 

outset

<table style="border-color:#daa520 ; border-style:inset; border-width:4px ;">
<tr><td>
선보다 안쪽이 튀어나온 것처럼 보임
</td></tr>
</table>

브라우저 표시

↓↓↓

선보다 안쪽이 튀어나온 것처럼 보임