만당 최신 글
TABLE 실기 (첫번째)
위의 본글이 너무 간단히 설명 되어 있어 이해 하려면 상당히 어려움이 있을겁니다
몇차례에 걸쳐 답글로 하나씩 풀어 나가겠습니다.
비결은, 읽기만 하시지 말고 "태그연습장" 에
부지런히 연습 하는 수 밖에 없습니다.........방랑객..
(아래의 예제를 이용 하여 연습 하세요...............................................)
1]
| TABLE(테이블) |
소스는
<TABLE border=1>
<TBODY>
<TR>
<TD>TABLE(테이블)</TD></TR></TBODY></TABLE>
TABLE--글 혹은 그림 을 정해진 공간 안에 쓰게 하는 명령.(Table=밥상을 차리다 라고 생각 하면..)
border--테두리의 굵기....값을 0 으로 하면 테두리가 보이지 않게 설정 됨
TBODY--본문 시작
TR--줄 (아래로 이동) 을 만들어 줌
TD--간 (옆으로 이동) 을 만들어 줌
**<TABLE><TBODY><TR><TD> 순서로 명령 했기에 반드시
**</TD></TR></TBODY></TABLE> 역순으로 닫아 주어야 함
2]
한가지씩 더하며 위의 TABLE 모양을 변형 시켜 나갑시다.
| TABLE(테이블) | 오른쪽 두번째 간 |
소스는 아래와 같습니다
<TABLE border=1>
<TBODY>
<TR>
<TD>TABLE(테이블)</TD>
<TD>오른쪽 두번째 간</TD></TR></TBODY></TABLE>
"(테이블)" 뒤에</TD>로 막고 다시<TD>로 옆으로 만들어질 간을 지정 하고 "오른쪽 두번째 간"을 넣었음
3]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
소스
<TABLE border=1>
<TBODY>
<TR>
<TD>TABLE(테이블)</TD>
<TD>오른쪽 두번째 간</TD><TD>다시 한간더</TD></TR></TBODY></TABLE>
4]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 |
소스
<TABLE border=1>
<TBODY>
<TR>
<TD>TABLE(테이블)</TD>
<TD>오른쪽 두번째 간</TD>
<TD>다시 한간 더</TD></TR><TR><TD>줄 바꿔 아래로</TD></TR></TBODY></TABLE>
"다시 한간 더" 뒤에</TD></TR>간과 줄을 막고 <TR><TD>로 아래 줄과 간을 지정 하고 "줄 바꿔 아래로" 를 넣음
5]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
아랫줄 두번째간과 세번째간은 직접 만들어 보시길...
6]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#A82800 border=1> 테두리 색상을 지정 했음. (아래 게시물 "색상표" 참조)
7]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#A82800 bgColor=#f5f5f5 border=1> 바닥 색상을 지정 했음
8]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 cellPadding=5 bgColor=#f5f5f5 border=1> 간을 키웠음
9]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 cellSpacing=6 cellPadding=5 bgColor=#f5f5f5 border=1>
테두리와 내용의 간격 (선과 선의 간격) 을 넓혔음.
10]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 cellSpacing=6 cellPadding=5 bgColor=#f5f5f5 border=6>
테두리를 굵게 했음
11]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 cellSpacing=6 cellPadding=5 bgColor=#f5f5f5 border=0>
테두리를 감추었음....
12]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 cellSpacing=6 cellPadding=5 width=500 bgColor=#f5f5f5 border=0>
테이블의 넓이를 넓혔음.
13]
| TABLE(테이블) | 오른쪽 두번째 간 | 다시 한간 더 |
| 줄 바꿔 아래로 | 아래두번째 | 아래세번째 |
<TABLE borderColor=#a82800 height=120 cellSpacing=6 cellPadding=5 width=500 bgColor=#f5f5f5 border=0>
테이블의 높이도 높혔음
13]의 전체 소스는
<TABLE borderColor=#a82800 height=120 cellSpacing=6 cellPadding=5 width=500 bgColor=#f5f5f5 border=0>
<TBODY>
<TR>
<TD>TABLE(테이블)</TD>
<TD>오른쪽 두번째 간</TD>
<TD>다시 한간 더</TD></TR>
<TR>
<TD>줄 바꿔 아래로</TD>
<TD>아래두번째</TD>
<TD>아래세번째 </TD></TR></TBODY></TABLE>
각 명령어에 주어진 값을 바꾸어 보며 연습.......
다음은 <TD>에 부가되는 여러가지 명령어의 실기를 올릴 예정.