▣ table(테이블) 태그에 대하여(1)
이번 시간에는 <table> 태그에 대하여 알아볼까요?
1. 테이블 태그의 의미와 기본 형식
(1) <table> </table>이란 무엇인가?
가장 간단하게 말해서 하나의 표라고 생각하면 됩니다.
그러므로 여러분이 표를 만들고자 하면 <body>태그 안의 표를
만들고자 하는 위치에서 <table>태그를 입력하여 여기서 부터
테이블을 작성하게노라고 컴퓨터에게 말을 해준다는 뜻으로
생각하고, 표 작성을 마치겠으면 테이블의 종료태그인</table>
태그를 입력하여 표 작성을 마치겠다고 알려줍니다.
아래 한글에서 문서를 작성하면서 표를 그려 넣고 그 표속에
그림이나 글자를 써 넣는 것과 같이 <table>는 <tr>과 <td> 를
같이 사용하여 표를 만드는 것입니다.
여기에서 가로 줄을 만드는 것이 <tr>이고,
세로 칸을 만드는 것이 <td> 입니다.
그러므로 <table> 태그 안에는 반드시 하나 이상의 <tr> 태그가
들어가고 <tr>태그 안에는 또 <td>태그가 들어가야겠지요.
가장 간단한 표는 한개의 표의 줄과
한줄에 한개의 표의 칸을 갖는 경우이다.
<body> 태그 뒤에 <table><tr><td>가 한 셋트로 시작되고
글이나 이미지를 써 넣은 다음 끝마칠 부분에서는 반대 순서로
</td></tr></table> 이렇게 써 넣는 것이 기본 형식입니다.
(2) <tr> </tr>
<tr>태그는 table row의 줄임말로 테이블의 한 줄을
정의하는 태그입니다. 한개의 행을 만들때 쓰는 태그이다.
따라서 두개의 행을 만드는 테이블이라면 <tr>태그는
한번 더 사용하여 두개를 해야겠지요.
(3) <td> </td>
<td>태그는 table detail(또는 data)의 줄임말로 하나의 칸을
만드는 태그입니다. 행은 하나지만 한개의 행에 3개의 칸이 있는
테이블이라면 <tr>은 한번쓰고 <td>는 3번 쓰겠지요. 이해되나요?
표를 만드는 테이블 태그에 한줄 세칸의 표를 만들자면
<table>태그안에 <tr>태그를 한번 쓰고 <tr>태그안에
<td>태그를 세번 써야합니다.
(태그 입력 예시)
바탕이 검정이기 때문에 테이블테두리에 크기와 색상,
칸의 배경색을 흰색으로 준 것임.
<body> 태그 다음에
<table border=3 bordercolor=yellow>
<tr bgcolor=white><td>주 소</td><td> 성 명</td>
<td> 연락처</td></tr>
</table>
(결과)
테이블연습
주 소
성 명
연락처
두 줄에 각각 세칸의 표를 만들려면 아래와 같이 해야겠지요
<table>
<tr><td>맨 윗 줄 첫째 칸</td>
<td>맨 윗 줄 두 번째 칸</td>
<td>맨 윗줄 세 번째 칸</td></tr>
<tr><td>두번째 줄 첫째 칸</td>
<td>두번째 줄 둘째 칸</td>
<td>두번째 줄 셋째 칸</td></tr>
</table>
위에서 볼 수 있듯이, 테이블의 시작은 <table>로 표시되고
끝은 </table>로 표시되고 있습니다.
그리고, 각 가로줄(행)은 <tr>로 시작하여 </tr>로 끝내고,
각 세로 칸(열)은 <td>와 </td>로 구분되는데
그 사이에 쓰고자 하는 내용이 들어가게 됩니다.
홈페이지 작성시 메뉴를 만들때는 여러줄과 칸이 필요하나
그림과 글자로 영상시를 만들때는 다음과 같이 많이 쓰죠.
하나는 위에 이미지(그림이나 사진)를 넣고 밑 부분에
글이나 시를 넣을 경우로
<table>
<tr><td><img src="이미지 파일 주소“</td></tr>
<tr><td> 글자나 시를 써 넣고 </td></tr>
</table>이고
둘째로 왼쪽에 이미지를 넣고 오른쪽에 글을 넣을 경우로
<table>
<tr><td><img src="이미지 파일 주소“</td>
<td>글을 써 넣는 곳 </td></tr>
</table>
(참고 사항)
① 표의 제목 : <th>와 </th>
<th>태그는 table title의 줄임말로 <td>의 한 종류이며
그 특성들도 거의 같다. 다만, th는 제목인 만큼 굵은 글자로
표현하고 칸의 중앙에 정열된다.
<tr></tr> 사이에서 쓰이나 반드시 있을 필요는 없다.
(이것을 안쓸 경우에는 td 태그를 써야겠죠?
<td>태그를 쓰고 굵게 표시하는 <b>태그와 중앙 정열하는
<center>태그로 <th>태그를 사용한 효과를 대신할 수 있다.
(머리 아픈데 초보자는 필요 없는 태그로 생각해도 될 듯...)
② 표 전체의 제목(머리말) : <cation>과 </cation>
표 전체의 제목을 표현한다.
<table> 시작 태그가 시작 된 다음에 명시한다.
(머리 아픈데 초보자는 필요 없는 태그로 생각해도 될 듯...)
2. 테이블 태그의 속성과 속성 값
<table> <tr> <td> 태그에 사용되는 속성들을 알아봅시다.
table 태그 안에 속성을 주면 테이블(표) 전체에 나타나고
tr 태그 안에 속성을 주면 그 해당 가로 줄에만 나타나며
td 태그 안에 속성을 주면 그 칸에만 명령(속성 값)이 나타난다는
것을 꼭 기억하시기 바랍니다.
<table>에서 사용하는 것
bgcolor=색상 : 표의 바탕색을 색상값으로 지정
width=길이 : 표의 너비를 백분율 혹은 픽셀로 지정
border=수치 : 표의 테두리 두께를 픽셀(pixel)로 지정
cellspacing=수치 : 칸(cell) 사이의 간격을 픽셀로 지정
cellpadding=수치 : 칸 안에서의 간격을 픽셀로 지정
<tr>에서 사용하는 것
bgcolor=색상 : 표의 줄 바탕색을 색상값으로 지정
width=길이 : 표의 줄 폭을 백분율 혹은 픽셀(pixel)로 지정
height=길이 : 표의 줄 높이를 백분율 혹은 픽셀(pixel)로 지정
align=left/center/right : 표의 줄에서 내용의 수평 정렬 지정
valign=top/middle/bottom : 표의 줄에서 내용의 수직 정렬 지정
<td>에서 사용하는 것
bgcolor=색상 : 표의 칸 바탕색을 색상값으로 지정
background=URL : 표의 칸 배경 이미지를 URL으로 지정
width=길이 : 표의 칸 폭을 백분율 혹은 픽셀(pixel)로 지정
height=픽셀(pixel) : 표의 칸 높이를 픽셀(pixel)로 지정
align=left/center/right :표의 칸에서 내용의 수평 정렬 지정
이명령을 주지않을 경우 기본값인 왼쪽(left) 정열로 나타남.
valign=top/middle/bottom : 표의 칸에서 내용의 수직정렬 지정
기본값은 중앙 정열(middle)이다.
colspan=갯수 : 표의 칸에서 수평 통합 칸의 갯수 지정
rowspan=갯수 : 표의 칸에서 수직 통합 칸의 갯수 지정
기본적인 속성에 대한 설명 및 사용 예시
(1) border=원하는 수 (예시 : border=10)
테두리의 선 굵기를 픽셀로 지정하는데 단위는 픽셀입니다.
테두리를 보이지 않게 하려면 이 값을 0으로 하면 되고,
값을 표시 안하면 기본인 1픽셀로 가느다란 회색으로 나타남.
(2) bordercolor=색상이름(예시 : border=2 bordercolor="red")
테두리의 색상을 지정하는 것으로 border에 크기값을 주고
bordercolor=색상명(또는 색상코드) 하여 색상이 들어가겠죠?
(3) width=원하는 크기의 수 (예시 : width=560 또는 width=100%)
테이블이나 칸의 가로 길이를 픽셀로 지정합니다.
여기서 width=60%와 같이 픽셀이 아닌 %로 지정하면,
자기가 사용하고 있는 컴퓨터 모니터의 가로 화면 크기의 60%로
나타나게 되므로 15인치, 17인치, 19인치, 20인치 이냐에 따라
크기가 다르게 보입니다.
(4) height=원하는 크기의 수(예시 : height=300)
테이블이나 칸의 전체 높이(세로 길이)를 지정한다.
사용법은 width(폭)와 같습니다.
(5) cellspacing=띄우고 싶은 만큼 의 수(예시 : cellspacing=1)
칸과 칸 사이의 간격을 픽셀로 지정(기본은 2픽셀)
(6) cellpadding=띄우고 싶은 만큼 의 수(예시 : cellpadding=10)
"칸의 테두리"와 "그 안에 쓰여지는 내용" 사이의 간격을 지정
(기본은 1픽셀).
(7) bgcolor=원하는 색이름(예시 : bgcolor=red)
내용이 들어가는 부분의 배경색을 지정.
모든 속성값의 숫자는 원하는 숫자로 바꾸어 넣어서 실험해보세요
그럼 지금까지 배운 내용을 가지고 종합적으로 알아볼까요?
테이블의 배경색상은 노란색, 테이블의 크기는 가로 400픽셀
세로(높이) 300픽셀의 크기에, 테이블 테두리 크기는 10픽셀,
테두리 색상은 빨강색, 칸의 테두리와 내용의 사이간격 10픽셀,
칸과 칸 사이의 간격을 5픽셀로 지정하여
표의 전체 제목은 부서별 직원 형황으로,
표의 제목은 th태그를 써서 굵게 중앙정열, 바탕생은 핑크색으로
두번째줄은 글자를 가운데 정열하기 위해 <tr align=center>
태그를 나머지는 기본인 왼쪽 정열로 나타나는 4줄 3칸의
테이블을 만들어 보겠습니다.
태그는 엔터 없이 한줄로 길게 써도 되고 줄을 바꿔써도 되고
상관없으나 여러분들이 알아보게 쉽게 구분해서 쓰겠습니다.
( 태그 작성 예시)
<html><head><title> 테이블 연습</title></head>
<body>
<table bgcolor=yellow width=400 height=300 border=10
bordercolor=red cellpadding=10 cellspacing=5>
<center><cation>부서별 직원 현황</cation></center>
<tr bgcolor=pink>
<th>부 서</th><th> 직 위</th><th> 성 명</th>
</tr>
<tr align=center>
<td>총 무</td><td>과 장</td><td>홍길동</td>
</tr>
<tr>
<td>총 무</td><td>사 원</td><td>홍순이</td>
</tr>
<tr>
<td>회 계</td><td>주 임</td><td>김상사</td>
</tr>
<tr>
<td>자 재</td><td>반 장</td><td>박철수</td>
</tr>
</table>
</body>
</html>
(결과 보기)
테이블 연습