테이블 테두리 스타일에 대하여 3

1. 일반적인 테이블 소스 <table border="2"width="600"height="70"> <tr><td> 일반적인 테이블 </td></tr></table> 보기: 일반적인 테이블 2. 위에 테두리에 수치를 준것 <table width=600 height=70 style=border-style:solid;border-top-width:10;> <tr><td> border-top-width:10; </td></tr></table> 보기: border-top-width:10; 위처럼 일반적인 테이블 옆에 기본적으로 style=border style:solid; 을 넣어주고 border-top-width:10;이와같이 속성-속성:지정을 넣어주면 된다 3. 오른쪽 테두리에 수치를 추가함 <table width=600 height=70 style=border-style:solid;border-top-width:10; border-right-width:20;> <tr><td> border-right-width:20; </td></tr></table> 보기: border-right-width:20; 오른쪽 테두리의 두께를 추가 해준것 4. 아래 테두리에 수치를 수치를 추가함 <table width=600 height=70 style=border-style:solid;border-top-width:5; border-right-width:10;border-bottom-width:15;> <tr><td> border-bottom-width:15; </td></tr></table> 보기: border-bottom-width:15; 아래 테두리의 두께를 추가 해준것 5. 왼쪽 테두리에 수치를 추가함 <table width=600 height=70 style=border-style:solid;border-top-width:10; border-right-width:20;border-bottom-width:30;border-left-width:40;> <tr><td> border-left-width:20; </td></tr></table> 보기: border-left-width:20; 왼쪽 테두리의 두께를 추가 해준것 6. 상,우,하,좌,방향으로 한꺼번에 지정함 <table width=600 height=70 style="border-style:solid;border-width:10 20 30 40;"> <tr><td> border-width:10 20 30 40; </td></tr></table> 보기: border-width:10 20 30 40;> 위 소스처럼 상,우,하,좌,의 방향으로 한꺼번에 지정해 줄수있다. 여기서 방향 순서가 틀리면 안된다. 7. 수치를 각각 지정한거와 한꺼번에 지정한것 비교 A 수치를 각각 정해준것 B 간단하게 한꺼번에 지정한것 A 테이블은 수치를 각각 지정해서 길고 어렵게 만든거고 B 테이블은 간단하게 한꺼번에 지정해 준것인데도 똑같은걸 알수있다. 또하나 A style="border-style:solid;border-width:10; B style="border-style:solid;border-width:5 10; 이렇게 A 테이블처럼 위치를 지정하지 않고 border-width:10 를 하나만 지정해 주면 상하좌우 모두가 똑같은 넓이로 지정이 된다. 그러나 B 테이블처럼 두군데만 지정을 하면 그 하나는 쌍으로 작용하여 5는 상,하,를 지정하고 10은 우,좌,를 지정한다는 말이지요 8. 이와같은 방법으로 border style도 적용하면 된다. <table width=600 height=70 style="border-style:solid;border-width:5 10 6 15;border-style: dashed solid dotted double;"> <tr><td> border-style:dashed solid dotted double; </td></tr></table> 보기: border-style:dashed solid dotted double; 위 소스에서 border style과 width를 한꺼번에 정해줬다. 9. 이와같은 방법으로 bordercolor도 각각 적용할수 있다. <table width=600 height=70 style="border-style:solid;border-width:5 10 6 15;border-style: dashed solid dotted double;border-color:blue red green darkblue;"> <tr><td> width..style..color을 한꺼번에 지정했음 </td></tr></table> 보기: width..style..color을 한꺼번에 지정했음 위 소스에는 border-width 속성 하나에 지정은 한꺼번에 하고 border-style 속성 하나에 지정은 한꺼번에 하고 border-color 속성 하나에 지정은 상,우,하,좌,순서로 한꺼번에 해줬다. 참고할것은 스타일 시티에서는 속성: 지정; 에서 :와 ;의 구분을 확실하게 해줘야 된다.