|
제목 없음
오늘은 테이블 태그에 대해 알아보도록
하겠습니다.
테이블 태그는 무지 간단하면서도 어렵습니다. 그리고 무척
많이 사용됩니다.
무슨 얘기냐구요?
예, 왜냐하면 테이블 테그에 사용되는 테그는 몇개 안됩니다.
그러나 실제로 사용될 때는 그것들이 어떤 결과를 가져올 지 쉽게 짐작이 안되기 때문에, 즉 시각적으로 상상하기기 쉽지 않기 때문에 실제로 실행해
보기 전에는 알기가 쉽지 않고 또 예상치 않은 결과가 나올 수 있습니다.
그런데 꼭 표를 그려넣는 작업이 아니라도 테이블의 형식을
사용하게 되면 많은 종류의 그림과 내용들을 일목요연하게 보기 쉽게 배치할 수가 있습니다.
예를 들어서 특정한 그림을 화면의 특정 부위에 배치하고 싶을
때 표를 쓰지 않으면 상당히 힘이 듭니다. 그러나 표를 써서 그림을 표 속에 넣어 버리면 아주 간단히 해결됩니다. 그래서 웹페이지에서 표는 아주
중요하고 요긴하게 쓰입니다.
소스 보기를 해 보면 대부분의 웹 페이지에 많은 표들이
들어가 있을 겁니다. 그러나 실제로 표처럼 보이는 문서는 잘 없죠? 그것은 표의 형식을 가지고 있으면서 표의 테두리 선을 없애 버려서 꼭 표가
아닌 것같이 보이도록 해 놓았기 때문입니다.
예를 들어 보겠습니다. 아래와 같이 표를 만들고 그 중
적당한 곳에 그림을 넣습니다. 그리고 다른 곳에 필요한 내용을 적당히 집어 넣어보겠습니다.
|
저희 가족 홈페이지
사진을 이용해서 한 번 설명해 볼까요?
아래의 그림은 저희 가족이 모두 모여 찍은
사진입니다.
|
|
이 사진을 글의 중간에
위치시키고 설명을 이렇게 집어 넣으려고 하면 딴 방법으로는 쉽지가 않습니다 그러나 표를 사용해서 화면을 여러개의 칸으로나눈 뒤 그림을 그 중의
한 칸에 넣으면 이렇게 그림이 가운데 들어간 문서 를 작성할 수가 있는 것입니다. |
오궁패밀리
가족 사진
|
이런 방법을 사용하면
매우 다양한 형태의 문서를 만들 수가 있습니다. 실제로 인터넷 문서 중에서 표가 포함되지 않는 문서가 잘 없을 정도입니다. 지금 당장 마우스
오른쪽 버턴을 눌러 소스 보기를해 보십시오. 합창단 게시판 에도 table 형식의 문서가 많이 포함되어 있음을 알 수 있을
것입니다.
|
|
자 오늘은 이
표에 대해서 알아 보려고 합니다. | 위와 같이 말입니다. 그리고 이제는 표의 테두리를 없애
버리면
|
저희 가족 홈페이지
사진을 이용해서 한 번 설명해 볼까요?
아래의 그림은 저희 가족이 모두 모여 찍은 사진입니다.
|
|
이 사진을 글의 중간에
위치시키고 설명을 이렇게 집어 넣으려고 하면 딴 방법으로는 쉽지가 않습니다 그러나 표를 사용해서 화면을 여러개의 칸으로나눈 뒤 그림을 그 중의
한 칸에 넣으면 이렇게 그림이 가운데 들어간 문서를 작성할 수가 있는 것입니다. |
오궁패밀리
가족 사진
|
이런 방법을 사용하면
매우 다양한 형태의 문서를 만들 수가 있습니다. 실제로 인터넷 문서 중에서 표가 포함되지 않는 문서가 잘 없을 정도입니다. 지금 당장 마우스
오른쪽 버턴을 눌러 소스 보기를해 보십시오. 합창단 게시판 에도 table 형식의 문서가 많이 포함되어 있음을 알 수 있을
것입니다.
|
|
자 오늘은 이
표에 대해서 알아 보려고 합니다.
| 위와 같이 될 것입니다. 표를 이용하지 않고서는 이런 화면을
얻기가 힘들겁니다.
자 이제 차근차근 알아보도록 할까요?
기본적인 테이블 만들기
우리가 표를 그릴 때 좌우, 상하로 줄을 긋죠?
HTML문서에서는 이런 선의 역할을 하는 태그가 있습니다.
그러면 테이블을 구성하는 태그를
알아 볼까요?
<table> </table> : 표의 시작과 끝을 을 알리는 태그입니다. 이 태그는 단독으로 쓰이지
않고 반드시 <tr><td>등의 태그와 함께 쓰입니다. 즉 <table> 내용 </table> 이렇게 적는다고 해서
표가 그려지지 않는다는 것이죠.
<tr></tr> : table row의 약자로 표의 가로줄을 표시하는 태그입니다.
<td></td> : table data의 약자로 표의 세로줄을
표시하는 태그입니다. 이 두 개 태그 사이에 있는 내용이 표 속의 한 개의 셀 속에 들어가게 됩니다.
자 그럼 이 태그들이 실제의 표에서 어떻게 사용되는지 한
번 볼까요?
|
<table>
<tr>
<td>
표의 내용
</td>
</tr>
</table> |
|
☞ |
|
기본적인 표는 위와 같이 구성되어 있습니다. 왼쪽과
같이 적어 넣으면 오른쪽처럼 줄과 칸이 하나씩 있는 표가 하나 만들어 집니다. 물론 위에서 처럼 줄과 칸을 뛰우지 않고 그냥
<table><tr><td>표의
내용</td></tr></table> 이렇게 적어 넣어도 같은 결과가 나오긴 합니다. 그러나 위에서
적은 것 처럼 적어 놓으면 알아보기가 훨씬 쉽습니다.
위의 내용을 자세히 살펴 보겠습니다.
표를
구성하는 줄이 모두 두줄씩 그어져 있죠? 이렇게 이해하시면 쉽습니다.
<table></table>이란 명령으로
제일 바깥 테두리가 그어집니다.
<tr>은 표의 위쪽의 가로줄을 긋는 것과 같고 </tr>은 아래쪽의 가로줄을 긋는
것과 같습니다.
<td>는 왼쪽의 세로줄을 긋는 것과 같고 </td>는 오른쪽의 세로줄을 긋는 것과 같습니다.
하나의 셀 속에 들어갈 내용은 <td>와 </td>사이에 적어 넣으면 됩니다.
여러개의 줄과 칸을 가진 표를 만들 때도 위의 기본을
이용하면 됩니다.
칸이 하나씩 늘어날 때마다 <td></td>를 삽입하면 되고 줄이 하나씩 늘어날 때마다
<tr></tr>을 하나씩 넣어 주면 됩니다. 아래에서 그 예를 보시죠
|
<table>
<tr>
<td>첫째칸</td>
<td>둘째칸</td>
<td>세째칸</td>
</tr>
</table> |
☞ |
|
|
<table> </table> 명령에 따라 네모 박스 한 개를 만들고 <tr>
</tr>명령에 따라 그 속에 아래 위에 가로줄을 하나씩 더 그은 다음 <td></td>가 세 번씩이니까 세
개의 칸을 만드는 가로줄을 한 칸에 좌우 두 개씩 모두 여섯 개 그어서 세 개의 칸을 가진 한 줄 짜리 표를 만드는 것이죠.
|
<table>
<tr>
<td>첫째줄첫째칸</td>
<td>첫째줄둘째칸</td>
</tr>
<tr>
<td>둘째줄첫째칸</td>
<td>둘째줄둘째칸</td>
</tr>
<tr>
<td>세째줄첫째칸</td>
<td>세째줄둘째칸</td>
</tr>
</table> |
☞ |
|
| 첫째줄첫째칸 |
첫째줄둘째칸 |
| 둘째줄첫째칸 |
둘째줄둘째칸 |
| 세째줄첫째칸 |
세째줄둘째칸 | |
테이블 속성 부여하기
이렇게 만든 테이블을 다양하게 꾸미기 위해 속성을 부여할 수 있습니다.
어떤 속성들이 쓰이는지 한 번 볼까요?
border : 테이블의 가장 바깥쪽 테두리의 두께를 설정합니다.
기본값은 '1'입니다.
숫자가 커질수록 바깥쪽 테두리가 굵어 집니다. 숫자를 '0"으로 하면 테두리가 없어지면서 표가 아닌 것 같이
보이게 됩니다. 이미 위에서 그 예를 한 번 보여 드렸죠?
width : 테이블의 폭을 설정합니다. <table>
태그에 붙혀서 사용하면 표의 전체적인 폭을 설정해 주고, <td>태그에 붙혀서 사용하면 해당 칸의 폭을 설정해
줍니다.
height : 테이블의 높이를 설정합니다. width 와 마찬가지로
<table> 태그에 붙혀서 사용하면 표의 전체적인 높이를 설정해 주고, <td>태그에 붙혀서 사용하면 해당 줄의 높이를
설정해 줍니다.
cellpadding : <table>태그에만 쓰이는 속성으로 표의 테두리와 표안의
문자간의 여백을 설정합니다.
기본값은 '1'입니다. 숫자가 증가할수록 테두리와 문자간의 여백이 많이생깁니다.
cellspacing : 역시 <table>태그에만 쓰이는 속성으로 셀과 셀 사이의
간격을 설정합니다.
위의 예에서 보듯이 일반적인 테이블은 각각의 셀은 하나의 독립된 박스로 그려지게 되고 그 셀 사이의 공간이 있습니다.
그래서 모든 선들이 두줄씩 보이게 됩니다.
cellspacing은 이 줄 사이 공간의 크기를 설정하는 속성입니다. 기본값은 '2'입니다.
만약 cellspacing을 '0'로 하게 되면 줄 사이의 공간이 없어집니다. 그래서 테이블의 선들이 두 줄이 아닌 한 줄로 보이게
됩니다.
align : 여러 가지 태그에 다양하게 이용되는 속성인데
<table>태그 안에서 사용하면 문서 내에서 그 table이 어디에 위치할 것인가를 결정해 주고, <tr>이나
<td> 태그 안에서
사용하면 해당하는 칸 속의 내용이 그 칸 내에서 어떻게 정렬할 것인가를 결정해 줍니다.
여기에 사용되는 속성값은 right, left,
center가 있습니다. 이 속성에 대한 사용은 이미 딴 태그에서 공부하신 내용과 같습니다.
valign : vertical align의 약자로
<tr>이나 <td>태그에 쓰이며 셀 속의 내용이 상하로 어떻게 정렬할 것인가를 결정하는 속성값입니다.
여기에 사용되는
속성값은 top, middle, bottom이 있습니다.
bordercolor : 테이블의 선 색깔을 지정하는 속성입니다.
여기서 지정된 색깔로 모든 선의 색깔이 바뀝니다.
bordercolordark, bordercolorlight : 위의 표에서 테두리 선을 유심히
보십시오. 테두리 색깔이 약간 다르죠?
표의 테두리 선 왼쪽 바깥, 오른쪽 안쪽의 색깔은 약간 옅게 되어 있고, 테두리 선 왼쪽 안,
오른쪽 바깥은 약간 짙은 색깔로 되어 있음을 알 수 있을 것입니다.
이렇게 테이블은 기본적으로 옅은 테두리와 짙은 테두리 두 개로 나뉘어
져 있습니다. 그래서 그 테두리를 각각 따로 색깔을 설정해 줄 수 있습니다.
이럴 때 사용하는 속성이 bordercolordark와
bordercolorlight입니다. bordercolordark는 짙은 테두리, bordercolorlight는 옅은 테두리입니다.
이
속성이 사용되면 bordercolor로 일단 색을 지정해 주어도 bordercolor의 색상은 무시되고 이 속성대로 색깔이 바뀝니다.
물론 이 속성을 쓰지 않고 bordercolor만 지정해 주면 모든 선이 하나의 색깔로 바뀝니다.
그리고 이 속성은 익스플로러에만
적용이되과 넷스케이프에서는 적용이 되지 않는답니다.
복잡하죠? 어렵습니까? 그냥 이런 것도 있다는 것만 아시고 넘어가십시오. 나중에
태그 실력이 쌓이면 다시 이 내용을
한 번 보십시오. 그땐 쉬워질 겁니다. 한꺼번에 너무 많은 것을 하려면 골치아픕니다.
bgcolor : 테이블의 바탕색을 지정하는 속성입니다.
<table>태그와 같이
쓰이면 테이블 전체의 색깔을, <td>나 <tr>과 함께 쓰이면 해당 셀의 바탕색을 지정해 줍니다.
|
<table border="1" width="300"
height="200"
cellpadding="5"
cellspacing="5">
<tr>
<td
valign="top">첫줄첫칸</td>
<td
valign="left">첫줄두째칸</td>
</tr>
<tr>
<td
valign="middle">둘째줄첫칸</td>
<td
valign="center">둘째줄둘째칸</td>
</tr>
<tr>
<td
valign="bottom">세째줄첫칸</td>
<td
valign="right">셋째줄셋째칸</td>
</tr>
</table> |
☞ |
|
| 첫줄첫칸 |
첫줄둘째칸 |
| 둘째줄첫칸 |
둘째줄두째칸 |
| 세째줄첫칸 |
셋째줄셋째칸 | |
위에서 예를 든 표에 비해서 줄사이의 간격이 약간 넓어졌죠? cellspacing을 넓게 지정해 줬기 때문입니다.
align과 valign속성에 따라 어떻게 변하는지도 알 수 있겠죠?
bordercolor와 border두께에 gbcolor에 대해 한 번 볼까요?
|
<table border="4"
bordercolor="green">
<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> |
☞ |
|
|
|
|
border 두께를 '4'로 하니 테두리 두께가 두꺼워 졌고 선의 색깔이 녹색으로 바뀌었죠?
|
|
<table border="4" bordercolordark="blue"
bordercolorlight="red">
<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> |
☞ |
|
|
|
|
짙은 테두리를 파란색으로 옅은 테두리를 빨간색으로 설정한 예입니다.
|
|
<table border="1"
bordercolor="black" cellspacing="0">
<tr>
<td
bgcolor="red">1-1</td>
<td
bgcolor="yellow">1-2</td>
<td
bgcolor="green">1-3</td>
</tr>
<tr>
<td
bgcolor="pink">2-1</td>
<td bgcolor= "blue">2-2
</td>
<td bgcolor= "white">2-3
</td>
</tr>
</table> |
☞ |
|
|
|
|
테두리 색깔을 검은색으로하고 cellspacing을 '0'으로 하여 선들을 모두 한 줄로
만들었습니다.그리고 배경색을 여러 가지로 설정해 봤습니다.
테이블 합치기
다양한 형태의 테이블을 만들기 위해서 테이블을 합쳐야 할 경우가 많습니다.
테이블의 셀을 합치기위해서
colspan과 rowspan 속성을 사용합니다. colspan은 칸을 합치는 속성이며 rowspan은 줄을 합치는 속성 입이다. 이 속성은
<td>나 <th> 태그에만 쓰이는 것이므로, <table>태그나 <tr>태그에 쓰면 적용되지 않습니다.
아래 소스에서 colspan="2" 라는 것은 colspan이 삽입된 <td>부터 2개의 칸을 합친다는
것이며 rowspan="2" 는 rowspan이 삽입된 <td>부터 2개의 줄을 합친다는 것입니다. "3" 을 쓰면 당연히 세개가
합쳐지겠죠? 이들 속성이 테이블에서 어떤형식으로 쓰이는지 예문을 통해 알아보겠습니다.
|
<TABLE>
<TR>
<TD colSpan=2>첫줄
1,2칸</TD>
<TD>첫줄세째칸</TD></TR>
<TR>
<TD
rowSpan=2>2, 3줄
첫째칸</TD>
<TD>둘째줄둘째칸</TD>
<TD>둘째줄세째칸</TD>
</TR>
<TR>
<TD>세째줄둘째칸</TD>
<TD>세째줄세째칸</TD>
</TR>
</TABLE>
|
☞ |
|
| 첫줄 1,2칸 |
첫줄세째칸 |
| 2, 3줄첫째칸 |
둘째줄둘째칸 |
둘째줄세째칸 |
| 세째줄둘째칸 |
세째줄세째칸 | |
원래 테이블은 세줄 세칸의 테이블인데, 첫 줄의 1,2번째 칸을 합쳤고 2, 3째줄의 첫 번째 칸을 합친
모양입니다.
3열의 보면 첫번째 줄(<tr>)에는 두개의 <td>가 들어 있습니다. 바로 첫째칸과 둘째칸을 합쳤기
때문이겠죠?
두번째 줄(<tr>)에는 rowspan이 들어있는데도 <td> 세개가 다 있습니다. rowspan은
줄을 합치는 속성이기 때문입니다. 테이블을 보면 두 번째 줄에는 어쨋든 3개의 칸이 다 있죠?
다시 소스에서 세번째
줄(<tr>)을 보세요. 두개의 <td>만이 있습니다. 그건 두 번째 줄에서 두 번째와 세 번째 줄을 합치는
rowspan이 적용됬기 때문입니다. 즉, 세째줄첫째칸은 둘째줄의 rowspan의 명령으로 이미 만들어진거죠.
설명이 이해가 잘안가면
직접 테이블을 만들어 보세요. 몇개만 해보면 금방 알수 있을 겁니다.
테이블을 이용하여 메뉴바 만들기
세로로 길게 테이블을 만든다음 테두리를 없애고 메뉴를 정리하면 간단한 메뉴바를 만들수 있습니다.
아주 많은
웹문서에서 메뉴를 만들 때 테이블을 이용하고 있습니다.
그럼 메뉴바를 한 번 만들어 볼까요?
<table border="0" width="120" cellspacing="3"
cellpadding="5">
<tr>
<td bgcolor="#fbf2ce"
align="center"><font color="red">:::: 메뉴
::::</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font
color="white">홈으로</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font color="white">나의
소개</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font color="white">링크
사이트</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font
color="white">게시판</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font
color="white">방명록</font></td>
</tr>
<tr>
<td
bgcolor="#7a8bed" align="center"><font
color="white">E-mail</font></td>
</tr>
</table> |
☞ |
|
| :::: 메뉴 :::: |
| 홈으로 |
| 나의 소개 |
| 링크 사이트 |
| 게시판 |
| 방명록 |
| E-mail
| |
어떻습니까? 테이블이 아주 다양하고 유용하게 쓰이죠?
자 오늘은 테이블에 대하여 알아보았습니다.
어떻습니까? 간단한 것 같으면서도 복잡하죠?
원리를 잘
알고 있으면 복잡하기는 해도 크게 어려울 것은 없습니다.
복잡한 표를 일일이 HTML문서로 만드는 것은 무척 힘든 작업입니다.
그래서 사실은 이런 표 작업은
태그문자를 직접 입력하는 방법보다는
웹에디터에서 편집하는 것이 좋습니다. 거기서는 워드 프로세서에서 표작업 하듯이 길이를 늘이고 칸을 조절하고 색깔을 넣는 작업을 너무 쉽게 할 수
있기 때문입니다.
그러나 표의 기본 원리를 알고는 있는 것이 좋겠죠?
차의 정비기술이 없어도 차를 잘 운전할 수는 있지만 고장이
났을 때 고치지 못하잖아요?
그것과 같이 테이블 테그를 잘 알고 있으면 유용하게 쓰이는 경우가 많답니다. 몇 번 연습해 보시면 금방
익히실 수 있으리라 생각합니다. |
| 
