|
오늘 첫번재 시간은 테이블의 테두리 스타일에 관하여 알아 보겠습니다.테이블 테두리 모양에는 여러가지가 있습니다. 이 테두리 모양을 지정하는 명령어는 style로 정의 합니다.테이블 명령어 내에 style="border-style:변수;"라고 넣으면 변수의 정의 대로테이블 테두리모양이 바뀌어 집니다.
|
1.일반적으로 많이 사용하는 테이블 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80> <tr> <td> 일반적인 테이블 테두리 </td> </tr> </table>
|
결과보기
이렇게는 많이 사용하고있지요? |
2. style="border-style:solid;" 을 적용해 보겠습니다 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:solid;"> <tr> <td> style="border-style:solid;" </td> </tr> </table>
|
결과 보기
style="border-style:solid;" | |
3. style="border-style:double;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:double;"> <tr><td> style="border-style:double;" </td> </tr> </table>
|
결과 보기
style="border-style:double;" | |
4. style="border-style:dashede;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:dashed;"> <tr> <td> style="border-style:dashed;"</td> </tr> </table>
|
결과 보기
style="border-style:dashed;" | |
5. style="border-style:groove;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:groove;"> <tr> <td> style="border-style:groove;" </td> </tr> </table>
|
결과 보기
style="border-style:groove;" | |
6. style="border-style:ridge;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:ridge;"> <tr> <td> style="border-style:ridge;"</td> </tr> </table>
|
결과 보기
style="border-style:ridge;" | |
7. style="border-style:dotted;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:dotted;"> <tr> <td> style="border-style:dotted;" </td> </tr> </table>
|
결과 보기
style="border-style:dotted;" | |
8. style="border-style:inset;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:inset;"> <tr> <td> style="border-style:inset;" </td> </tr> </table>
|
결과 보기
style="border-style:inset;" | |
9. style="border-style:outset;" 적용 <table border=10 cellpadding=0 cellspacing=0 width=500 height=80 style="border-style:outset;"><tr> <td> style="border-style:outset;" </td> </tr> </table>
|
결과 보기
style="border-style:outset;" | |
이상이 테이블 테두리 모양을 지정하는것이었습니다.bordercolor를 지정하지않으면 이렇게 기본색으로 나옵니다. bordercolor를 지정하고 border의 width를 조절하여 응용한다면멋진 테이블이 나올수 있겠죠.응용편도 만들어볼 생각 입니다. 다음편에는 테이블 테두리 모양을 상하좌우로 각각 지정하는 방법에 대하여알아보기로 하고 1신을 마칩니다. 연구 과제 입니다.가급적 소스 보지 마시고 직접 만들어 보세요.잘안될때만 소스보기하면 설명이 있습니다
|
|
|
|
|
|
네가 그리우면 나는 울었다
고정희
| |
|
|
|
| |