[HTML 기초] 테이블 태그로 만든 표에서 셀 합치기 및 셀 크기변환

[HTML 기초] 테이블 태그로 만든 표에서 셀 합치기 및 셀 크기변환

안녕하세요~ 친절한효자손 이에요~!

저번시간에 HTML 문서에서 표를 넣는 방법을 알아봤죠?

이번엔, 그 표를 응용하여 셀을 합치는 방법을 알아보도록 할께요^^

잠깐 저번시간의 태그를 복습을 하자면,

테이블 태그가 곧, 표를 넣는 태그라고 배웠지요?

<table> 이것으로 시작을 하게 되요.

우선, 테이블 태그는 전시간과 똑같으며,

<th> 안쪽에 보시면, clospan="3" 라고 하는 태그가 보이시나요???

네~ 저 태그가 바로, 합치기 명령어 중 가로에 해당하는 명령어구요,

이제 오른쪽으로 쭉~ 들어올 가로 셀 중에서 나를 포함하여 3칸을 합쳐라! 라는 뜻이에요.

그리고, 그 밑에 있는 rowspan="2" 라는 명령어 보이시죠??

이건 세로로 2칸을 합쳐라! 라는 태그에요^^

그렇게 되면, 지금 보시는 것 처럼, 가로로 3개, 세로로2개의 셀이 합쳐진게 보이실 거에요^^

후훗~! 정말 신기하죠????

이번엔, 셀의 크기를 변화하는 태그를 알아보도록 할까요?

저기 보시면, cellspacing, 그리고 cellpadding 이라고 나오죠???

cellpadding 은, 셀과 셀테두리선 사이 여백을 어느정도 띄울것인지 정해주는 태그구요,

cellspacing 은, 셀과 셀 사이 여백을 어느정도 띄울것인지 정해주는 태그에요^^

실험해 보도록 하지요

cellspacding="5" / cellpadding="10" 정도의 수치를 주면???

짜잔~ 이렇게 수치가 변화하는 모습을 보실 수 있어요^^

한번, 직접 조절해 보세요^^ 변화가 보일꺼에요^^

자~ 이제 배웠으니까, 한번 응용을 해 보도록 합시다~!

이런식으로, 자신이 연습삼아서, 테이블 태그 연습을 수시로 해보세요.

어렵다 어렵다 하면 더 어려운법!

쉽다고 생각해 봐요^^ 그러면 정말 쉬워요~!

네~ 제가 셀합치기를 이런식으로 한번 해 봤지요^^ 후후~~!

어떠세요??? 모두 잘 이해되시나요???

깔깔~! 어렵지 아니해요!!! 결코~!

HTML을 뭐 이런식으로 언제만드나~

그냥 나모나 웹에디터로 한방에 만들면 되지~!

라고 생각하실 꺼에요.

사실, 이걸로 홈페이지를 만든다 라기보다는,

앞으로 태그를 볼 줄 아는 능력을 키워야 한다~ 이런 의도가 숨겨져 있어요.

그러니, 기초는 정말 중요해요^^

급하게 하지말고, 시간과 여유를 두고, 탄탄히 학습해 보도록 해요~!

그러면, 다음 시간에는 더욱 알찬 학습을 해 보도록 해요~!