일단 가장 기본적인 테이블은 아래와 같은 것이겠죠..
앞으로 보시게 되겠지만..
왼쪽 부분(파란바탕)은 사용된 소스구요..오른쪽 부분(아이보리색바탕)은 실행 화면입니당
그러니까 왼쪽 소스대로 그대로 따라하시면 결과가 오른쪽 처럼 나온다는 말이에요..
이게 바로 테이블..
이게 바로 테이블..
자...보셨나요?
저런게 바로 테이블이란 거죠..^^
보시다 시피...한칸짜리 테이블이 만들어 졌어요..
근데..여기서 보니까.. border=1 이라고 되어있죠?
그건 테이블의 테두리 선의 두께를 설정하는 부분이에요..
border=0 라고 하면...테두리가 없어지구요..
border=5 라고 하면 테두리가 더 두꺼워 지겠죠?
한번 해볼까요?
이게 바로 테이블..
이게 바로 테이블..
보셨나요?
테두리가 훨신 두꺼워 졌죠?
대부분 깔끔한 홈페이지를 보면..
테이블로 짜놨어요...
물론 대부분의 테이블 테두리를 border=0 를 사용해서..
우리가 잘 모를 뿐이죠..
저희 홈피도 잘 보면...오로지..
테이블로 꽉 차 있어염..
태그를 잘 보시면.. 은 줄을 의미하구요..(가로줄을 의미하죠..)
는 칸을 의미해요..(세로 칸을 의미하죠..)
기본 문법은...
table 안에 tr
tr안에 td
td 안에 내용이 들어가죠..
자..그럼...테이블을 두칸짜리로 한번 만들어 볼까요?
카페지기
멋쟁이
카페지기
멋쟁이
자...
이제 보셨듯이...가로 두칸짜리 테이블이 만들어 졌죠?
이제 세로 두줄짜리 테이블을 한번 만들어 볼까요?
여기서 칸과 줄구분을 명확히 하시길 바랍니다.
위의 예와 잘 비교해보시면 알거에요..
카페지기
멋쟁이
카페지기
멋쟁이
자...그럼..
이제 가로로 나누는 것과 세로로 나누는 것을 해봤으니까..
가로로도 나누고 세로로도 나누는걸 한번 해볼까요?
가로 두칸 세로 두줄을 한번 해보도록 하죠..^^;;
카페지기
멋쟁이
너무나
멋있어
카페지기
멋쟁이
너무나
멋있어
자 보시다 시피 가로 두칸 세로 두줄이 생겼네요...
그렇죠?
^^;;
자..그럼..이제 다음 단계로 넘어갈까요? ^^;;
다음 단계는 테이블의 크기를 설정하는 방법을 알려 드릴께요..
님들이 그림의 크기를 설정하는것과 같은 방법이에요..
width 와 height 를 이용해서 테이블의 크기를 설정합니당..
그럼 일단...아래를..보세요..
width=150
height=50
width=200 height=50
width=150
width=200
height=50
height=100
width=200 height=50
위에서 보시면 오른쪽엔 테이블이 다섯개지만..
왼쪽에 소스는 세가지 밖에 없죠?
그건...-.-;; 그냥..^^;;
대표적인것만 보여 드리려고 그런거니..이해하세염..
자..모두 잘 비교해 보셨나요?
width=200 은 가로넓이 200픽셀을 의미하구요..
height=50 은 세로길이 50픽셀을 의미합니당..
크기비교는 위의 예제를 잘 보시면..이해 되실거에요..
보통...야후코리아나...하이텔...같은곳을 가보시면..
width=800 즉, 가로넓이 800픽셀 구조로 되어 있어염..
다음은.. 테이블 합치기를 한번 해보죠...
아래 예를 먼저 보셔야 겠죠? ^^;;
colspan=3>호랑이
고양이
얼룩말
강아지
독수리
비둘기
물고기
호랑이
고양이
얼룩말
강아지
독수리
비둘기
물고기
자..위에서 보신대로..
호랑이...부분을 보시면..가로 세칸이 한칸으로 합쳐졌죠?
칸을 합칠때는 colspan 을 사용합니다.
colspan=3 은 세칸을 합치라는 말이구요..
colspan=10 이라고 한다면...10칸을 합치라는 말이 되겠죠..
흐음...이해가 되셨는지 모르겠네염..-.-;;
아래를 보시면...세로 세줄이 합쳐져서 한줄이 됩니다..
자알 보세요..
rowspan=3>호랑이
고양이
얼룩말
독수리
비둘기
강아지
물고기
호랑이
고양이
얼룩말
독수리
비둘기
강아지
물고기
위를 잘 보시면..
줄을 합칠때는.. rowspan을 사용하구요..
주의 할점은...줄을 합칠때는...그 줄을 합치는...호랑이 보이죠?
그 호랑이와...고양이 얼룩말이...한줄로 취급 되네요..
그리고 나서 나머지가 각각 한줄씩 되구요..
결과는 보시는 바와 같지만요...-.-;;
rowspan=3 은 세줄을 합치라는 말이구요..
만약 rowspan=10 을 한다면...10줄을 합치라는 말이 되겠죠...^^;;
그렇다면...rowspan과 colspan 을 함께 사용해볼까요?
아래의 예는 원래 가로 4칸 세로 4줄 짜리 테이블을 합치기를 이용해서 어떻게 변하는지 보여드리는거에요..
일단 하나의 td 안에 rowspan과 colspan을 함께 사용한것을 한번 보도록 하죠..
rowspan=2 colspan=2>호랑이
고양이
얼룩말
독수리
비둘기
뻐꾸기
강아지
회오리
오지명
쓰리랑
김희선
아리랑
고등어
호랑이
고양이
얼룩말
독수리
비둘기
뻐꾸기
강아지
회오리
오지명
쓰리랑
김희선
아리랑
고등어
그리고 아래는 하나의 td 안에 함께 사용한 것이 아니라 각각 사용한 예를 보여드리죠..^^;;
역시 4 X 4 테이블을 예로 들었읍니다.
colspan=4>호랑이
rowspan=2>고양이
얼룩말
부엉이
슈퍼맨
독수리
비둘기
까마귀
쓰리랑
김희선
아리랑
고등어
호랑이
고양이
얼룩말
부엉이
슈퍼맨
독수리
비둘기
까마귀
쓰리랑
김희선
아리랑
고등어
여기까지.....이제 테이블 합치기는 모두 끝났어요..
뭔가 아쉬움이 남지만..걍 넘어갈께염..^^
이제 테이블 안에 배경색을 넣는것을 한번 해보죠..
테이블 배경색은 bgcolor 라는 태그를 사용합니다.
아래 예는 가로 120픽셀 세로 120픽셀의 테이블에 색을 넣는거에요..
bgcolor=orange>orange색 배경
bgcolor=pink>pink색 배경
orange색 배경
pink색 배경
자...그럼 여러칸의 테이블에 각 칸마다 색상을 다 다르게 주려고 한다면..
어떻게 하면 될까요?
물론 각 td 마다 bgcolor 를 넣어주면 되겠지요..
일단 한번 보도록 하죠..
bgcolor=orange> orange
bgcolor=lightskyblue> lightskyblue
bgcolor=pink>pink
bgcolor=red>red
bgcolor=blue>blue
bgcolor=green> green
bgcolor=cyan>cyan
bgcolor=yellow> yellow
bgcolor=gray>gray
orange
lightskyblue
pink
red
blue
green
cyan
yellow
gray
그런데 위에 한줄만 핑크색으로 하고 싶을때...
각 td 마다 모두 bgcolor=pink 라고 하시겠어요?
물론 그렇게 해도 되지만...
그건 엄청난 노동력 손실이죠..
tr 보이죠?
tr이 뭐라고 했죠? 줄이라고 했죠?
네..그래요.. tr 안에다가 bgcolor 를 넣어주면..그 줄은 모두 한가지 색으로 칠해지게 되죠..
일단 한번 보시죠..
bgcolor=pink>
아저씨
아줌마
어머니
아버지
할머니
하루방
미친개
장미꽃
들국화
아저씨
아줌마
어머니
아버지
할머니
하루방
미친개
장미꽃
들국화
자 지금까지 보셨듯이..
bgcolor 라는 태그가 td 에도 들어갈수 있고.. tr 에도 들어 갈수 있다는걸 알았죠?
물론 table 에 바로 들어갈수도 있어요..
일단 한번 보시구요...차이점을 한번 찾아보세요..
bgcolor=pink>
아저씨
아줌마
어머니
아버지
할머니
하루방
미친개
장미꽃
들국화
아저씨
아줌마
어머니
아버지
할머니
하루방
미친개
장미꽃
들국화
table 에 바로 bgcolor 를 넣으면...모든 줄과 칸이 table 에 넣어준 bgcolor로 채워지게 되는거죠..
근데 table 에 바로 bgcolor를 넣으니 칸과 줄을 구분해 주는 선까지 색이 채워지죠?
이점 유의 하세요..
물론 table 에 bgcolor 를 넣고 tr 에도 bgcolor를 넣을수도 있어요..물론..td 도 마찬가지죠..
한번 보시죠..
bgcolor=pink>
아저씨
아줌마
어머니
bgcolor=yellow>
아버지
할머니
하루방
미친개
bgcolor=lightskyblue>장미꽃
들국화
아저씨
아줌마
어머니
아버지
할머니
하루방
미친개
장미꽃
들국화
여기서 색이 채워지는 가장 우선순위는..
td 에서 지정해준 색이 가장 최우선이구요..
다음이 tr..
젤 끝발이 약한것이 table 에서 지정해준 색이네요..^^
다음은...
테이블 안에 배경 그림 넣기를 해보도록 해요..
먼저 배경 그림 넣기를 할때 배경 그림을 미리 준비 해야겠죠?
일단 배경그림 두개만 준비해 보도록 해요..^^
보시다 시피..배경 그림넣기는 배경 색넣기와 똑같아요..
다른점이 있다면.. bgcolor 대신 background를 사용하구요..
red, pink, blue 라는 색상명 대신에 그림의 경로를 준다는것의 차이죠..
이것 외의 적용법은 배경색 넣기와 동일합니당
여기까지만 하면 배경그림은 된거죠?
위의 배경색 넣기를 보신후..이걸 보시면..금방 이해 될거에요..
다음은 테이블 안의 내용 정렬하기를 한번 해보도록 해요..
아래는 가로60픽셀 두칸 세로 60픽셀두칸..그러니까..2 X 2 테이블을 예로 든거에요..
아리랑
어머니
아버지
천리안
아리랑
어머니
아버지
천리안
자 위에서 보신것은 전혀 정렬을 안한 default 형태입니다..
아래는...좌우 정렬을 align 태그를 사용해서 정렬로 한것입니다.
align 태그는 좌우 정렬에 사용되죠..
하나의 td 아리랑은 가운데 정렬을 시켜보도록 하구요..
또하나의 td 어머니는 오른쪽 정렬을 시켜보도록 하구요..
또다른 하나의 td 아버지는 왼쪽 정렬을 시켜보도록 하자구요..
그럼 남은 하나의 td 천리안은 머하냐구요?
그냥 원래 default 값으로 놔두자구요..
align=center>아리랑
align=right>어머니
align=left>아버지
천리안
아리랑
어머니
아버지
천리안
보셨듯이..
align=center 는 가운데 정렬
align=right 는 오른쪽 정렬
align=left 는 왼쪽 정렬을 나타냅니다.
align=left를 한것과 아무런 정렬을 안한것과 결과가 같죠?
아래를 보시면..
td 에 align 태그를 넣지 않고..
tr 에 align 태그를 사용하면..
그 줄은 모두 동일한 정렬 형태를 가지게 됩니다.
한번 볼까요?
align=center>
바보
천재
바다
align=right>
하늘
태양
나비
바보
천재
바다
하늘
태양
나비
그런데 아까전에 저기 위에서 말하길..
align=left는 아무런 정렬도 안한것과 똑같다고 했죠?
아래 예는...
왜 align=left 가 필요한지 이유를 보여줄거에요..p>
바로 위에서 본 tr 안에 align을 사용한 경우..
꼭 필요하다고 할수 있죠..
일단 보시죠..
align=center>
바보
align=left>천재
바다
align=right>
하늘
태양
align=left>나비
바보
천재
바다
하늘
태양
나비
만약 가로 열칸이라면...그 칸마다 모두 가운데 정렬을 하고 싶을때...
각 칸마다...그러니까 각 td 마다 모두 align=center 를 넣어준다면..
얼마나 노동력의 낭비일까요..
그래서 tr 에다가 align=center 를 넣어준거죠..
그런데 그중에 한칸만 왼쪽 정렬이나 오른쪽 정렬을 하고 싶다면...
정렬 하고 싶은 칸의 td 에다가 align=center 혹은 align=right 혹은 align=left 를 넣어주면 되겠죠?
아차참...
여기서 앞 강의 시간에 빼먹고 지나간걸 말씀 드릴께요..
테이블의 가로넓이와 세로길이를 설정할때..
만약 가로 열칸 세로 열줄을 만든다고 할때..
각 칸마다...즉 각 td 마다 모두 width=값 height=값 이렇게 해줄 필요 없구요..
젤 윗줄에 가로넓이를 지정해 주면...아래는 모두 같은 넓이를 가지게 되구요..
제일 앞칸.....밑으로 주욱 내려가면서..
제일 앞칸들만 세로 길이를 지정해 주면..
그 오른쪽 칸들은 모두 같은 높이를 가지게 되요..
다시 테이블 정렬로 넘어와서..
align은 좌우 정렬을 한다고 했쟎아요..
valign 이라고 있는데..이것은 아래 위 정렬을 하는거에요..
align=(center,right,left) 이런 값들이 있었다면..
valign 에는 valign=(top,center,bottom) 이런 값들이 있어요..
top 은 제일 위에 정렬..
center 는 default 값과 똑같이 가운데 정렬..
bottom 은 제일 아래 정렬...되요..
valign 의 예는 아래를 보세염~
아래는 가로 한칸 세로 네(4)줄짜리 테이블이에요..
valign=top width=60 height=60>바보
valign=bottom height=60>천재
valign=center height=60>바다
하늘
바보
천재
바다
하늘
자 보셨나요?
보셨듯이 아래위 정렬을 해주는 valign 태그였어요..
그리고 valign 은 align 과 함께 사용할수도 있어요..
또한 valign 과 align 모두 tr 에도 들어갈수 있고.. table 에도 들어갈수 있어요..
table 안에 align 이나 valign 이 들어가면...테이블 안의 모든 줄과 칸이 table 안의 align 과 valign 이 지정해준 정렬방식을 따르게 되죠..
물론 우선순위는 알죠?
td 안의 정렬이 최우선이구요..
tr 안의 정렬이 다음..
table 안의 정렬이 가장 끝발이 낮아여~
그럼 아래는 valign 과 align 을 함께 사용한 예를 보여 드리죠..
원래 default 값을 생각하시면서 보세요..^^
valign=top align=right width=60 height=60>바보
valign=top align=left height=60>바보
valign=bottom align=right height=60>바보
valign=bottom align=left height=60>바보
valign=center align=center height=60>바보
바보
바보
바보
바보
바보
이제.. 테이블 안에 여백은 어떤건지 한번 보도록 해요..
아래의 오른쪽 테이블 여백예제는 보기 쉽게 하기위해 테이블 배경색을 pink 색으로 했어요..
cellspacing=30>
아리랑
cellpadding=30>
아리랑
아리랑
아리랑
보신것처럼..차이점을 잘 살펴보세요..알았죠?
이 카페지기가 무식해서..
저런 여백을 뭐라고 해야 할지는 잘 모르겠지만..-.-;;
여하튼 위의 오른쪽 예제 테이블에서..
위에꺼는 cellspacing=30 을 사용했구요..
아래꺼에는 cellpadding=30 을 사용했어요..
확실한 비교를 위해서..^^;;
여하튼 잘 보시면 차이점을 발견 하실수 있겠죠?
더 확실한 차이점을 보기 위해 아래 예를 하나 더 보죠..
이번엔 2 x 2 테이블을 예로 보여드릴께요..
cellspacing=10>
아리랑
아리랑
아리랑
아리랑
cellpadding=10>
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
위에서 보셨듯이 이제..
cellspacing 과 cellpadding 의 차이점을 이해하셨나요?
^^;; 모두들 두눈이 있으니까..다른점 발견하셨겠죠? ^^;;
그리고 cellspacing=30 과 cellspacing=10 의 차이점도...발견하셨죠?
또한 cellpadding=30 과 cellpadding=10 의 차이점도 발견 하셨죠?
아래는 cellpadding 과 cellspacing 을 함께 사용할수 있다는 것을 보여드립니다.
자알 보세요..^^
cellspacing=20 cellpadding=20>
아리랑
아리랑
아리랑
아리랑
cellspacing=10 cellpadding=10>
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
아리랑
위에서 보셨듯이..
cellpadding 과 cellspacing 을 함께 사용하니 어떻게 다른지 아셨나요?
두개를 함께 사용하니 여백이 함께 커지죠? ^^;;
두눈 크게 뜨고 살펴보시면 알수 있을 거에요..^^
그리고 두개를 cellspacing=20 cellpadding=20 과 cellspacing=10 cellpadding=10 의 차이도 보셨으리라 생각되네요..
이것이 테이블 여백의 모든것이네요..
다음은 테이블 테두리 색을 넣는 것에 대해서 한번 보도록 해요..
아래는 일반적인 테이블의 테두리를 보여 드립니다.
아무런 색을 지정하지 않은 default 값을 보여 드려요..
아리랑
아리랑
아리랑
아리랑
위의 에제는 border=1 과 border=10 의 경우를 보여 드린거에요..
자 그럼 여기기본 테두리에다가 테두리색을 한번 넣어 보도록 하죠..^^;;
아래는 border=1 인 경우를 보여 드립니다.
bordercolor=red>
bordercolor=red
bordercolor=blue>
bordercolor=blue
bordercolor=green>
bordercolor=green
bordercolor=red
bordercolor=blue
bordercolor=green
보셨죠?
선의 색은 반드시 border=1 이상이어야 하며..
bordercolor=red 를 비롯해서 blue, green, 등등 원하는 색을 넣어주면 되죠..
border=0 이면 선이 없으니 선의 색또한 없겠죠?
border=10 으로 주었을때 어떻게 되는지 한번 볼까요?
bordercolor=red>
bordercolor=red
bordercolor=blue>
bordercolor=blue
bordercolor=green>
bordercolor=green
bordercolor=red
bordercolor=blue
bordercolor=green
선의 두께는 바로 border=1 이 결정 합니다. 여기의 숫자가 클수록 테두리선의 두께가 커지겠죠?
그런데 여기 까지 보시다 보니까..
어? 왜 선이 두개지?
하는 분이 계시겠죠?
border=1 일때는 얇은 선이 두줄..
border=10 을 주니까 굵은선 한줄 그 안에 얇은 선 한줄...이렇게 나오죠?
^^;;
이 두줄의 선을 한줄로 만드시려면...cellspacing=0 cellpadding=0 로 주면...
한줄만 나옵니다.
한줄로 만드는 또다른 방법은...밑에 설명이 따로 있어요...나중에 참고하세요..
그리고 이 테이블 테두리 색에 어두운쪽 밝은 쪽에 색을 따로따로 줄수도 있어요..
아래는 그 예라고 할수 있죠..
보기에 좋게하게 하기위해...border=10 을 사용하겠어요..
bordercolorlight=red bordercolordark=blue>
light=red - dark=blue
bordercolorlight=green bordercolordark=black>
light=green - dark=black
bordercolorlight=pink bordercolordark=plum>
light=pink - dark=plum
light=red - dark=blue
light=green - dark=black
light=pink - dark=plum
우와~ 위의 테두리와 아래 테두리 선을 서로 다르게도 줄수 있네요? 그렇죠?
신기하당..^^;;
여기서 보셨듯이..
bordercolorlight=red 이건 위테두리를 붉은색으로..
bordercolordark=blue 이건 아래 테두리를 파랑색으로..
맞죠?
light 는 밝은쪽 색상을..
dark 는 어두운쪽 색상을 지정해 주죠..
잘 살펴보세요...
소스와 예제를 비교하면서 살펴보시는게 중요해요..
자~ 그럼..이제 여기서 진짜진짜 중요한것...
테이블 테두리선의 백미라고 할수 있는 설명을 드릴께요..
난 테이블 선이 두개있는것을 참을수가 없다는분...
이런분을 위해서...이중 테이블이 존재 합니다.
하나의 큰테이블 안에 또다른 하나의 테이블........
제가 주로 사용하는 방법인데요..
아래 예를 보시고 설명 드릴께요..
아래는 1 x 1 한칸짜리 + width=60 height=60 테이블입니다.
bgcolor=pink>
bgcolor=white>
아리랑
bgcolor=pink>
bgcolor=white>아리랑
아리랑
아리랑
자 위의 예를 잘 보시면..
하나의 큰 테이블 안에 또 하나의 테이블이 들어간것을 알수 있을 거에요..
물론 소스에 그렇다는 말이죠..
위의 오른쪽 예에서 보시면..
위의 것은 테두리 선이 얇은데 밑에 것은 테두리 선이 두껍죠?
왜 그런지는 왼쪽의 소스부분에서 노란색으로 된 부분 보이죠?
그게 table 안에 있는지... td 안에 있는지 잘 살펴 보시면..차이를 알수 있을거에요..
그리고 큰테이블의 td 안에 즉, td bgcolor=pink 보이죠?
그것이 실제 테이블 테두리가 되는 부분이에요..
그러니까..저게 어떻게 된거냐면..
일단 하나의 테이블의 칸을 핑크색으로 채워요..
그리고 그 안에 또 하나의 테이블을 넣어서 하얀색으로 채운거죠..
결과적으로는 테이블 테두리를 두른 것 처럼 되어 버렸지만..
저것을 잘 연구해 보시면..
좋은 결과 있을듯...^^;;
저희 카페 대문 테이블의 테두리는 모두 저런 방법으로 만들어 진거에요..
이건 많은 연습이 필요할거에요..
능숙하게 되려면...^^;;
그리고 님들이 하나하나 응용해서 더 멋진 테이블 꾸미시길 바래요..
그럼..테이블 테두리 선에 색넣기는 여기서 마치구요..
아마도 테이블은 이게 전부인것 같아요..
이제부터 님들이 할것은..
스스로 이것을 더 연마해서 능수능란하게 사용할수 있게 되는거죠..
전..이것보다 더 못배우고도 테이블을 익혔으니깐..
님들께서는 지금까지의 강의를 열심히 연마하시면...
멋진 테이블 만드실수 있을거에요..
이것들을 응용하면 어떻게 되냐면...제 홈페이지처럼 꾸밀수가 있답니다.
복잡한 프레임도 필요없고..테이블만으로도...^^