▣ table(테이블)에 대하여(2)
이번 시간에는 테이블에 대한 두 번째 시간으로
정렬하기와 칸 합치기 등에 대하여 알아보겠습니다.
1. 내용 정렬하기
테이블의 칸에 들어갈 내용을 정렬할 수 있는 속성으로
align과 valign이 있습니다.
<td> 태그 안에 작성하며 글자나 이미지(그림, 사진 등)를
넣어 정렬합니다. 아무런 명령을 주지 않을 경우에는 기본정렬인
왼쪽과 위쪽으로 정렬됩니다.
(1) align
align 옵션은 내용의 좌우 정렬을 조절하는 기능을 합니다.
align=center는 중앙에 align=right는 오른쪽에 위치하게 만든다.
align=left는 왼쪽 정렬인데 명령을 주지않으면 왼쪽이라고 했죠?
(2) valign
valign 옵션은 내용의 상하 정렬을 조절하는 기능을 합니다.
valign=middle은 중단에 valign=bottom은 하단에 위치하게 만든다.
valign=top은 상단인데 명령을 주지 않을 경우에도 상단정열임
2. 칸을 나누자
칸을 나눈다기보다는 칸을 만든다는 표현이 더 좋을 것
같은데 다음에서 칸을 합치기 하는 방법을 배우려니까
반대 개념으로 칸 나누기라 하겠습니다.
이제부터는 여러 행 또는 여러 칸이 있는 테이블도 공부해 봅시다.
한 개의 행에 두개의 칸이 있는 테이블을 먼저 볼까요?
태그 작성 예시
<table border=4 width=100% height=60>
<tr>
<td>첫번째 칸입니다</td>
<td>두번째 칸입니다</td>
</tr>
</table>
그냥 <td&glt;구문을 하나 더 붙인 것에 불과합니다.
3칸짜리 테이블을 만들려면 <td&glt;를 3개 넣고 100칸짜리 테이블은
<td&glt;를 100개 넣기만 하면 된다는 것이죠.
단, 앞의 칸을 만든 다음에 반드시 종료태그인 </td&glt;을 붙이고 다시
<td&glt;로 시작하고 또 마치고 즉 시작태그 쓰고- 내용 쓰고- 종료태그
쓰기 반복입니다.(한행에 100칸은 무의미하겠죠?)
3. 행을 나누자
이번에는 아래 위의 행을 나누는 효과를 살펴봅시다.
행을 담당하는 태그는 <tr>이므로 행을 추가할 때는
<tr>태그를 삽입하면 됩니다.
태그 작성 예시
<table border=4 width=100% height=60>
<tr>
<td&glt;첫번째 행입니다</td&glt;
</tr>
<tr>
</td&glt;두번째 행입니다</td&glt;
</tr>
</table>
첫번째 <tr> 시작태그 다음 내용을 쓰고 </tr>로 종료한 후에
다음 행 시작때 <tr>을 삽입해야 한다는 것만 유의하면 됩니다.
지금까지 배운 정렬방법 및 행과 칸을 나누는 연습을 해 볼까요?
태그작성 예시
<table border=4 width=100% height=300>
<tr>
<td align=center><img src=http://cfs10.planet.daum.net/
upload_control/pcp_download.php?fhandle=NHZoUzBAZnMxMC
5wbGFuZXQuZGF1bS5uZXQ6LzEwNzkyMjQ5LzcvNzkxLmdpZg
==&filename=24.gif>
</td>
<td align=right valign=><img src=http://cfs10.planet.daum.net/
upload_control/pcp_download.php?fhandle=NHZoUzBAZnMxMC
5wbGFuZXQuZGF1bS5uZXQ6LzEwNzkyMjQ5LzcvNzkxLmdpZg
==&filename=24.gif>
</td>
<td align=center valign=bottom><img src=
http://cfs10.planet.daum.net/upload_control/pcp_download.php?
fhandle=NHZoUzBAZnMxMC5wbGFuZXQuZGF1bS5uZXQ6
LzEwNzkyMjQ5LzcvNzkxLmdpZg==&filename=24.gif>
</td>
</tr>
<tr align=center><td>중앙정렬 </td><td>오른쪽(윗쪽) 정렬
</td><td>가운데(아래)정렬</td></tr>
</table>
결과 보기
중앙정렬
오른쪽(윗쪽) 정렬
가운데(아래)정렬
4. 칸의 크기조절
지금까지 테이블 전체의 크기 조절을 배웠지만 그 안의 칸
하나하나마다 전부 크기조절이 가능합니다.
속성은 물론 width, height 이고 픽셀단위로 조정하거나
%로 명령하여 크기 비율로 나타나게합니다.
태그 작성 예시
<table border=4 width=500 height=50>
<td width=300 height=20>첫행 첫째칸</td>
<td>첫행 둘째칸</td>
</tr>
<tr>
<td>둘째행 첫째칸</td>
<td>둘째행 둘째칸</td>
</tr>
</table>
결과보기
첫행 첫째칸
첫행 둘째칸
둘째행 첫째칸
둘째행 둘째칸
5. 칸을 합치자
홈페이지를 만들다보면 꼭 칸의 크기가 일정한 테이블만
만든다는 보장이 없습니다. 어떤 칸은 다른 밑의 칸을 합친
것 만큼 크게 만들고 싶을 때도 있겠지요.
이럴때에 칸을 합치는 속성이 colspan과 rowspan입니다.
가로로 칸을 합칠 때는 colspan이라는 속성을 쓰고
세로로 합칠 때는 rowspan을 td 태그안에 씁니다.
속성값으로는 합치고자 하는 수를 씁니다(2, 3, 4 ...)
무슨 말인지 잘 모르겠으면 예제를 봅시다요?
기본 형식은 <td colspan=2> 이렇습니다.
이렇게 칸을 합칠때는 우선 기본적인 형태를 먼저 짜놓고,
그 다음 colspan이나 rowspan을 넣은 뒤 필요없는
칸을 삭제해나가는 순서로 만들면 쉽습니다.
처음부터 합쳐진 테이블 태그를 생각하려면 머리가 아프죠.
태그작성 예시
<table border=4 width=500 height=60>
<tr>
<td rowspan=2 colspan=2>야구</td>
<td>농구</td>
</tr>
<tr>
<td>모자</td>
</tr>
<tr>
<td>심판</td>
<td>선수</td>
<td>관중</td>
</tr>
</table>
"야구"칸의 colspan 과 rowspan 이 2 라고 되어 있지요.
"야구" 칸이 옆으로 2칸 아래로 2칸을 합쳐라는 명령입니다.
결과는
야구
농구
모자
심판
선수
관중
숙달을 위해 좀 복잡한 연습을 해 볼까요?
겁먹지 마시고 예제를 보면 이해가 되실겁니다.
테이블 테두리 두께는 4픽셀(table border=4),
가로크기는 500픽셀(width=500),
세로 높이는 100픽셀(height=100)이며
첫 행은 tr 태그에 중앙정렬(align=center),
테두리 두께는 1픽셀(border=1),
테두리 색상은 골드색( bgcolor=gold)
성명과 비고 란의 칸은 아래로 2칸 합치기(td rowspan=2),
성별란의 칸은 옆으로 2칸 합치기(td colspan=2) 입니다.
태그 작성 예시
<table border=4 width=500 height=100>
<tr align=center border=1 bgcolor=gold>
<td rowspan=2>성 명</td><td colspan=2>성 별</td>
<td rowspan=2> 비 고</td>
</tr>
<tr align=center border=1 bgcolor=pink>
<td border=1>남</td><td>여</td>
</tr>
<tr align=center border=1 bgcolor=ccffbb>
<td>김개똥</td><td>o</td><td> </td><td> </td>
</tr>
<tr align=center border=1 bgcolor=ccffbb>
<td>이말순</td><td> </td><td>o</td><td> </td>
</tr>
</table>
결과 보기
성 명
성 별
비 고
남
여
김개똥
o
이말순
o
* 다음시간에는 여백조절하는 방법과 배경색 채우기, 배경그림 넣기,
테두리 색상 등에 대하여 보충해서 배워보겠습니다.
