[스크랩] table

여기가지 기본 베이스라고 합시다^^ 아래는 제가 편집한 것이니 한번 비교해보세요...

슬픈 시 -서 정윤- 술로써 눈물보다 아픈 가슴을 숨길 수 없을 때는 세상에서 가장 슬픈 시를 적는다

소스입니다..

<TABLE border=2>
<TBODY>
<TR>
<TD colSpan=3>글화면 </TD></TR>
<TR>
<TD>사진1 </TD>
<TD>사진2 </TD>
<TD>사진3 </TD></TR></TBODY></TABLE>
<P>
여기가지 기본 베이스라고 합시다^^
아래는 제가 편집한 것이니 한번 비교해보세요...

<TABLE border=2>
<TBODY>
<TR>
<TD colSpan=3>
<MARQUEE scrollAmount=1 direction=up bgColor=yellow><FONT color=blue size=2>
<P align=left>슬픈 시<BR><BR><BR>-서 정윤-<BR><BR>술로써<BR>눈물보다 아픈 가슴을<BR>숨길 수 없을 때는<BR>세상에서 가장 슬픈 시를 적는다<BR></P></FONT></MARQUEE></TD></TR>
<TR>

<TD><IMG style="WIDTH: 200px; HEIGHT: 150px" onclick=window.open(this.src) alt="이미지를 클릭하시면 원본크기로 보실수 있습니다." hspace=0 src="http://blogfile.paran.com/BLOG_453980/200611/1164298568_슬로박사진%20018.jpg"> </TD>

<TD><IMG style="WIDTH: 200px; HEIGHT: 150px" onclick=window.open(this.src) alt="이미지를 클릭하시면 원본크기로 보실수 있습니다." hspace=0 src="http://blogfile.paran.com/BLOG_453980/200612/1165248192_슬로박사진%20001.jpg"> </TD>

<TD><IMG style="WIDTH: 200px; HEIGHT: 150px" onclick=window.open(this.src) alt="이미지를 클릭하시면 원본크기로 보실수 있습니다." hspace=0 src="http://blogfile.paran.com/BLOG_453980/200612/1165248192_IMGP0442.JPG"> </TD></TR></TBODY></TABLE>

<EMBED style="WIDTH: 625px; HEIGHT: 45px" src="http://mediafile.paran.com/MEDIA_9615788/BLOG/200612/1165247531_이선희 - 라일락이 질때.mp3" type=audio/x-mpeg loop="true" autostart="true">
<P>

오늘은 글 올리는 방법을 함 알아봅시다^^

안녕하세요 오늘은 <table>에 대하여 알아보겠읍니다 <table>의 설명을 글로서 표현할려니 상당히 어렵군요. 개념을 하나의 종이라고 생각할까요. 우리가 글을 쓰려면 백지가 필요한데 <table>는 백지라고 생각하죠 여기에 가로칸을 만드는게 <td>이고 세로줄을 막는게 <tr>입니다 개념이 이해 안되시더라도 그냥 따라 해보셔요 많이 해보면 이해가 갑니다 그리고 한가지만.. 연습하실때 그냥 복사해서 하지마시고 반드시 모든 명령어를 직접 치세요. 그래야 늘어요, 이해도 되고 그럼.. 아주 간단한 테이블을 우선 한번 만들어 보겠습니다. 간단한 테이블 예 <table border=2> <tr><td>테이블 1</td></tr> </table> 결과보기 테이블 1 이렇게 작은 종이가 하나 나왔어요 이번엔 그럼.. 가로 세칸, 세로 두줄의 테이블을 만들어 보겠습니다. 가로 세칸 세로 두줄 <table border=2> <tr><td>1-1</td> <td>1-2</td><td>1-3</td> </tr> <tr><td>2-1</td> <td>2-2</td><td>2-3</td> </tr> </table> 결과보기 1-1 1-2 1-3 2-1 2-2 2-3 여기에서 볼 수 있듯이, 테이블의 시작과 끝은 <table>과 </table>로 표시되고 있습니다. 그리고, 각 가로줄(=행)은 <tr>과 </tr>로 구분되고 있고, (각 세로칸(=열)은 <td>과 </td>로 구분됩니다. 그리고, 이 사이에 내용이 들어가게 됩니다. 이제 좀 더 발전해서, 칸을 합치고 싶으면 어떻게 할까요? 우선 윗줄의 세칸을 모두 합쳐 봅시다 <table border=2> <tr><td colspan=3>1-1 </td> </tr> <tr><td>2-1</td> <td>2-2</td><td>2-3</td> </tr> </table> 결과보기 1-1 2-1 2-2 2-3 윗줄이 모두 한 칸으로 바뀐 것을 볼 수 있습니다. 눈치가 빠른 분은 어떻게 합치는 지 벌써 아실지도 모르겠네요.. 가로 방향으로 2칸 합치기 위해서는 td 태그 안에, colspan=2 라고 써 줍니다. 만일 5칸을 합치고 싶다면, colspan=5 라고 쓰면 되겠지요.. 그리고, 주의사항.. 원래 윗줄은 세 칸이고, 그래서, 윗줄엔 td 태그가 세개 있었습니다. 하지만, 맨 첫 칸에서 세 칸 합치는 명령을 내렸으니까, 뒤에 있던, 두개의 td 태그는 지워야 합니다. 자 그럼.. 머리가 좀 복잡하시겠지만, 마지막으로 한번만 더 해보겠습니다. 이번에는 좀 더 어려운 것.. 3x2의 테이블에서, 1-1 칸과 2-1 칸을 합치고, 1-2칸과 1-3칸을 합쳐보겠습니다. <table border=2> <tr> <td rowspan=2> 1-1 & 2-1 </td> <td colspan=2> 1-2 & 1-3</td> </tr> <tr> <td> 2-2 </td> <td> 2-3 </td> </tr> </table> 결과보기 1-1 & 2-1 1-2 & 1-3 2-2 2-3 여기서 보셨듯이, td 태그 같은 것은 줄을 바꾸어 써도 전혀 상관이 없습니다. 가로 방향으로 합칠때는 colspan를 썼고, 세로 방향으로 합칠때는 rowspan을 사용합니다. 아래아 한글을 쓰보신분은 알겠지만 한글에서 표그리기의 셀 나누기 셀 합치기 칸 나누기 칸 합치기와와 같은 효과를 내는것입니다. 홈페이지 만들때는 꼭 알아야 할 사항 이지만 간단한 글을 올릴때나 메일 보낼때는 이런 복잡한걸 몰라도 충분해요 그럼 메일 보낼때나 아름 다운 글 올리기위한 테이블의 속성을 알아보겠읍니다 1. border=원하는수 테이블의 테두리 선 굵기를 1 에서20 픽셀로 지정(원하는 만큼 적으면 됩니다). 이 값을 0으로 놓으면, 테이블 테두리가 사라지죠. 2. width=원하는 크기의 수 테이블의 전체 폭을 픽셀로 지정합니다보통300에서800까지가 적당). 여기서 width=60%와 같은 식으로 주면, 전체 창 크기의 60%로 테이블의 크기를 정하게 되지요. 3. height=200 테이블의 전체 높이를 지정한다. 사용법은 폭 정하는 법과 같습니다. 4. cellspacing=띄우고 싶은 만큼 의 수를 넣음 칸과 칸 사이의 간격을 픽셀로 지정(5에서 50 사이가 적당). 5. cellpadding=띄우고 싶은 만큼 의 수를 넣음 "칸의 테두리"와 "그 안에 쓰여지는 내용" 사이의 간격을 지정. 6. bordercolor=원하는 색 이름 테두리의 색상을 지정. 7. bgcolor=원하는색이름 내용이 들어가는 부분의 배경색을 지정. 모든 속성에 숫자는 원하시는데로 바꾸어 넣어서 실험해보세요 그럼 예를 보죠 <table bgcolor=yellow width=400 height=300 border=20 cellspacing=10 cellpadding=5> <tr> <td> 넣고 싶은글.marquee와 font를 지금까지 배운데로 넣으면 됩니다 </td></tr></table> 결과보기 넣고 싶은글.marquee와 font를 지금까지 배운데로 넣으면 됩니다 이상이 테이블 만드는 방법입니다 크기를 마음대로 조정하여 지금까지 배우신걸 테이블속에 넣으면 훌륭한 글이 나올거예요 팁; 태그로 올린글을 연구하세요 소스를 보시고 이건 이렇게 했구나 저건 저렇게해서 된것이구나,보면 알것입니다 소스보는법은 REPLY을 눌러보면 HTML로 작성된 원본이 나옵니다 소스만 보고 답장은 안올리면 되죠 답장을 써주면 더욱 좋구요 안녕히.....

출처 : table

글쓴이 : 석란 원글보기

메모 :