[CSS]테이블,이미지 테두리 스타일 설정

테이블, 이미지 테두리 스타일

테이블 태그나 이미지등 테두리선에 대한 스타일을! 특히 점선이나 한편을 다르게 표현하고자 할 때 CSS 이용한다. border-style : 테이블이나 이미지 테두리선 스타일을 다양하게 표현한다. none, dotted, dashed, solid, double, groove, ridge, inset, outset 등. 4개의 테두리선을 각각 다르게 적용하려면 border-top-style, border-bottom-style, border-right-style 을 따로 지정한다. border-color : 색상 border-width : 테이블 선의 두께 margin : 바깥쪽 여백 padding : 안쪽 여백

태그 : <table style="border-style:dotted;">

CSS border-style 테스트 dotted

태그 : <table style="border-style:dashed;">

CSS border-style 테스트 dashed

태그 : <table style="border-style:solid;">

CSS border-style 테스트 solid

태그 : <table style="border-style:double;">

CSS border-style 테스트 double

태그 : <table style="border-style:groove;">

CSS border-style 테스트 groove

태그 : <table style="border-style:ridge;">

CSS border-style 테스트 ridge

태그 : <table style="border-style:inset;">

CSS border-style 테스트 inset

태그 : <table style="border-style:outset;">

CSS border-style 테스트 outset

태그 : <table style="border-style:dashed;border-color=orange;
border-width=3;padding=5;">

border-style:dashed; border-color=orange; border-width=3; padding=5(안쪽 여백)

태그 : <table style="border-style:solid;border-color:#006699;
border-width=1;margin:3px;">

border-style:solid; border-color:#006699; border-width=1; margin:3px(바깥 여백)

태그 : <table style="border-top-style:dashed;border-bottom-style:dotted;
border-right-style:double;border-left-style:ridge;border-color=orange;
border-width=3;width=400;height=50">

border-top-style:dashed; border-bottom-style:dotted; border-right-style:double; border-left-style:ridge; border-color=orange; border-width=3; width=400;height=50

태그 : <img src="xxx.gif" style="border-style:outset;border-color:saddlebrown;
border-width=5;">

태그 : <img src="xxx.gif" style="border-style:dotted;border-color:#000000;
border-width=3;">