민미네 집
처음으로 갑니다.
메인페이지
민 미 소 개
민수일기장
미정일기장
추천사이트
태그자료실
태그연습장



  
  테이블 만들기
  
    
  2008-06-28 12:21:56   897 

테이블 만들기

<table border=2>
<tr><td>테이블 1</td></tr>
</table>

....................................

<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>

....................................

윗줄이 모두 한 칸으로 바뀐 것을 볼 수 있습니다.
눈치가 빠른 분은 어떻게 합치는 지 벌써 아실지도 모르겠네요.
가로 방향으로 2칸 합치기 위해서는 td 태그 안에, colspan=2 라고 써 줍니다.
만일 5칸을 합치고 싶다면, colspan=5 라고 쓰면 되겠지요..
그리고, 주의사항.. 원래 윗줄은 세 칸이고,
그래서, 윗줄엔 td 태그가 세개 있었습니다.
하지만, 맨 첫 칸에서 세 칸 합치는 명령을 내렸으니까,
뒤에 있던, 두개의 td 태그는 지워야 합니다.
자 그럼.. 머리가 좀 복잡하시겠지만, 마지막으로 한번만 더 해보겠습니다.
이번에는 좀 더 어려운 것.. 3x2의 테이블에서, 1-1 칸과 2-1 칸을 합치고,
1-2칸과 1-3칸을 합쳐보겠습니다.

<table border=2>
<tr> <br>
<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>

....................................

여기서 보셨듯이, 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=원하는색이름
내용이 들어가는 부분의 배경색을 지정.

모든 속성에 숫자는 원하시는데로 바꾸어 넣어서 실험해보세요

그럼 예를 보죠




22   이미지에 섬광주기   2010/01/05 828
21   텍스트를 세로로   2010/01/05 847
20   테이블에도 그라데이션 효과를 줄 수 있다.   2010/01/05 884
19   alpha filte 의 사용법   2009/06/07 857
18   alpha filte 의 사용법   2009/06/07 954
17   메뉴   2009/04/28 889
16   자동줄바꿈 (valign=top)과 pre   2009/04/09 920
15   포토삽 강좌 / 67가지 [펌]   2008/06/28 842
  테이블 만들기   2008/06/28 897
13   mp3파일변환/음질은 낮추고 확장자엔 영향안주는 프로그램   2008/06/19 928
12   예쁜 메뉴판   2008/06/18 890
11   책갈피가 있는 시   2008/06/18 888
10   META 태그의 속성   2008/06/18 1063
9   링크 밑줄 없애기   2008/06/18 897
8   글자가 가운데에서 튀어 나오는 소스   2008/06/18 895
7   멋진 미니달력/폼을 마우스로 클릭하면 달력이 나타나..   2008/06/18 1744
6   특정일의 남은 날짜 나타내기 (기념일 카운트다운)   2008/06/18 1048
5   이미지 슬라이드 쑈 2   2008/06/18 915
4   이미지 슬라이드 쑈 1   2008/06/18 870
3   윈도우 XP 팁 모음   2008/06/18 802

1 [2]
 

Copyright 1999-2021 Zeroboard / skin by Mely

Copyright (c) 2002 MinMi. All rights Reserved.