일반적으로 테이블의 테두리 넓이를 지정할때 border="수치"로 작성합니다.
<table border=10 width=500 height=80>
<tr>
<td>
일반적인 예 border=10
</td>
</tr>
</table>
이렇게 하면
일반적인 예 border=10
이렇게 나오죠
사방이 모두 같은 넓이로 나옵니다.
테이블의 테두리를 각각 다르게 표현하고 싶을때도 있겠죠.
이럴때 스타일을 지정해주면 모든 프레임을 다른 넓이로 할수 있습니다.
style내에
border-top-width:수치;
border-right-width:수치;
border-bottom-width:수치;
border-left-width:수치;
로 넣어주면 테두리의 넓이가 각각 지정됩니다.
예를 보면서 설명하겠습니다.
지금까지 배운것을 적용하면서 해보지요
기본적인 테이블 스타일과 보드 칼라는
border-style:은 solid; 로 하고 border-color:#003366 로 하겠습니다.
4번의 복잡한 소스로 만든 예와 똑 같습니다.
border-width:10 과 같이 수치를 하나만 넣으면 모든 테두리 넓이가 동일하게 됩니다.
border-width:5 10 이렇게 두개의 숫자로 지정하면 첫번째 숫자는 상하의 프레임 넓이로 나타나고
두번째 숫자는 오른쪽과 왼쪽으로 나타 납니다.
정리를 해보면
1. 넓이를 모두 똑 같이 지정 할려면
border-width:수치 와 같이 하나만 넣으면 되고.
2. 상하 와 좌우를 같은 넓이로 할경우는
border-width:수치 수치 과 같이 두개의 수치를 넣으면 됩니다.
3. 모든 프레임의 넓이를 달리할 경우
border-width:5 10 15 20; 이렇게 4개의 원하는수치를 넣어야 겠죠.
종합해볼까요
첫시간에 border-style:
두번째 border-color:
이번시간에 border-width:
에 대하여 배우셨습니다.
스타일과 칼라 그리고 프레임 넓이를 모두 정할수 있게 되었죠
모든것을 종합해서 나름대로 꾸며 보세요.
간단한 예
border-style:dashed solid dotted double; border-color:yellow green orange blue;
border-width:5 10 6 15;
이렇게 한번 해볼까요?
결과 보기
