태그 소스 자료

[스크랩] 테이블 테두리 스타일에 대하여 2

다사랑해 2006. 12. 9. 15:34 


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-<b><center><font color=dark>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 속성 하나에 지정은 상,우,하,좌,순서로 한꺼번에 해줬다.
참고할것은 스타일 시티에서는 속성: 지정; 에서 :와 ;의 구분을 확실하게 해줘야 된다.
출처 : 테이블 테두리 스타일에 대하여 2
글쓴이 : Acts 원글보기
메모 :

'태그 소스 자료' 카테고리의 다른 글

[스크랩] 전체배경 소스만드는 법..  (0) 2006.12.15
[스크랩] 테이블 테두리 스타일에 대하여 1  (0) 2006.12.09
[스크랩] ※★HTML사용색상표★※  (0) 2006.10.08
[스크랩] 무료계정, 유료계정 만들기  (0) 2006.10.08
[스크랩] 배경화면 많이 있는 곳!  (0) 2006.10.08

'태그 소스 자료'의 다른글

  • 현재글[스크랩] 테이블 테두리 스타일에 대하여 2

관련글

Copyright © Kakao Corp. All rights reserved.

티스토리툴바