테이블(테두리)에 대하여(4)

Table 에관하여 4신 Table 테두리 네번째 시간입니다. 스타일을 이용한 테이블 테두리(frame)색지정에 관하여 알아봅니다.

테두리 색 지정은 style내에 border-top-color:색상코드; border-right-color:색상코드; border-bottom-color:색상코드; border-left-color:색상코드; 로 넣어주면 테두리의 색이 각각 지정됩니다. 예를 보면서 설명하겠습니다.

1. 테두리 상단색 지정. border-top-color:색상코드; 보드 스타일은 solid로 하고 상단 프레임색을 orange로 해보겠습니다. style="border-style:solid; border-top-color:orange; <table border=10 width=500 height=80 style="border-style:solid; border-top-color:orange;"> <tr> <td> style="border-style:solid; border-top-color:orange; </td> </tr> </table>

결과 보기 style="border-style:solid; border-top-color:orange;

결과에서 보듯이 테이블의 상단만 색이 정해지고 정의하지 않은 다른 테두리는 기본적인 색이 나옵니다.

2. 테두리 오른쪽 프레임색 지정. 1번의 예에서 border-right-color:색상코드; 를 추가 하면 됩니다. 오른쪽은 프레임색을 green으로 해보겠습니다. style="border-style:solid; border-top-color:orange; border-right-color:green; <table border=10 width=500 height=80 style="border-style:solid; border-top-color:orange; border-right-color:green;"> <tr> <td> style="border-style:solid; border-top-color:orange; border-right-color:green; </td> </tr> </table>

결과 보기 style="border-style:solid; border-top-color:orange; border-right-color:green;

3. 테두리 아래쪽 프레임색 지정. 2번의 예에서 border-bottom-color:색상코드; 를 추가 하면 됩니다. 아래쪽은 프레임색을 blue으로 해보겠습니다. style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; <table border=10 width=500 height=80 style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue;"> <tr> <td> style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; </td> </tr> </table>

결과 보기 style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue;

4. 테두리 왼쪽 프레임색 지정. 3번의 예에서 border-left-color:색상코드; 를 추가 하면 됩니다. 왼쪽은 프레임색을 red으로 해보겠습니다. style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; border-left-color:red; <table border=10 width=500 height=80 style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; border-left-color:red;"> <tr> <td> style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; border-left-color:red; </td> </tr> </table>

결과 보기 style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; border-left-color:red;

이 테이블 테두리 색상도 스타일을 한꺼번에 지정할수 있습니다. border-color:상단색코드 오른쪽색코드 하단색코드 왼쪽색코드; 전번 시간에 배우신 테이블 테두리형태를 지정하는방법과 같아요. 상단 오른쪽 하단 왼쪽순으로 표현 합니다. 예 : border-color:orange green blue red; <table border=10 width=500 height=80 style="border-style:solid; border-color:orange green blue red;"> <tr> <td> border-color:orange green blue red; </td> </tr> </table> 결과 보기 style="border-style:solid; border-color:orange green blue red; 4번의 복잡한 소스로 만든 예와 똑 같습니다. border-color:orange 와 같이 색을 하나만 넣으면 모든 테두리 색이 동일하게 됩니다. border-color:orange green 이렇게 두가지의 색을 지정하면 orange는 상하로 나타나고 green은 오른쪽과 왼쪽으로 나타 납니다. border-color:orange 와 같이 색을 하나만 넣었을때 결과 style="border-style:solid; border-color:orange border-color:orange green 이렇게 두가지의 색을 지정한 결과 style="border-style:solid; border-color:orange green 정리를 해보면 1. 한가지색으로 지정 할려면 border-color:orange 와 같이 하나만 넣으면 되고. 2. 상하 와 좌우를 다른색으로 할경우는 border-color:orange green 과 갚이 두개의 색 코드를 넣으면 됩니다. 3. 모든 프레임의 색을 달리할 경우 border-color:orange green blue red; 이렇게 4개의 색 코드를 넣어야 겠죠. 다음 시간엔 테두리의 넓이를 조절하는 방법에 관하여 알아 보겠습니다. 안녕히~~