테이블 만들기

표 만들기

HTML 문서내에서 표 만드는 방법을 이해한다. 표 만들기를 익히고 그 외 응용하는 방법을 알아본다.

문서를 작성할 때 항목을 자유로이 나열하는 것 보다 표를 이용하면 비교적 공간을 적게 차지하고 내용을 한 눈에 쉽게 알아 볼 수 있어 편리하지요.
홈페이지 작성할 때 실제로 필요한 도표를 만드는 것 이외에도 문장이나 이미지를 적절히 배치하기 위해서도 표를 많이 사용하게 됩니다.  그래서 디자인이 잘 되었다고 생각했던 웹사이트들의 소스를 보면 테이블을 절묘하게 사용한 경우들이 많이 있지요.

1. <TABLE> 태그
표는 <TABLE> 태그를 사용하여 만들 게 되는 데, <TABLE>로 시작해서 </TABLE>로 끝나는 것이죠.

<TABLE>...</TABLE>태그   - 기능 : 테이블의 시작과 끝   - 속성 : BORDER=n, BORDERCOLOR="#색상코드" WIDTH=n ; n%, HEIGHT=n ; n%,              CELLPADDING=n, CELLSAPCING=n, BGCOLOR="#색상코드", BACKGROUND="그림파일"

<TABLE BORDER=n>	표의 테두리 두께를 조절. (0은 테두리를 숨기고, 1부터 숫자가 커질수록 두께는 굵어짐. BORDER 지정하지 않으면 O으로 설정됨.)
<TABLE BORDERCOLOR= "#색상코드">	표의 테두리 색깔 지정.
<TABLE WIDTH=n HEIGHT=n>	표의 가로폭과 세로높이 지정. (단위는 픽셀)
<TABLE CELLPADDING=n>	셀의 크기 조절. 셀과 글자의 간격 조절. (0은 간격을 없애고 1부터 숫자가 커질수록 간격은 넓어짐.)
<TABLE CELLSPACING=n>	셀과 셀의 간격을 조절. (0은 간격을 없애고 1부터 숫자가 커질수록 간격은 넓어짐.)
<TABLE BGCOLOR="#색상코드">	표 전체의 색깔 지정

2. TR 태그
일단 위의 <TABLE>이 정의 되면 그 내부에 TR(Table Row)태그와 TD(table Data)태그를 이용해서 열(Row)과 행(Column)을 만들어 내게 되며, 이렇게 해서 만들어 진 여러개의 직사각형 공간을 셀(cell)이라고 합니다.
여기 TR태그는 표를 가로로 자르는 열을 만드는 태그인데 이 태그만으로는 화면상 아무것도 출력이 되지 않지요.

<TR>...</TR>태그   - 기능 : 테이블 한줄의 시작과 끝   - 속성 : ALIGN=LEFT ; CENTER ; RIGTHT, VALIGN=TOP ; MIDDLE ; BOTTOM,               BGCOLOR="#색상코드"

3. TD 태그
TD태그는 TR태그와 동등한 위치에 있는 것이 아니라 항상 TR태그에 종속되어 TR태그가 나누어 놓은 열을 세로로 자르는 역할을 합니다.
이렇게 해서 만들어진 행은 비로서 내부에 출력될 텍스트나 이미지를 포함할 수 있게 되는 것이지요.

<TD>...</TD>태그   - 기능 : 표의 데이터   - 속성 : ALIGN=LEFT ; CENTER ; RIGTHT, VALIGN=TOP ; MIDDLE ; BOTTOM,               COLSPAN=n, ROWSPAN=n

4. TH 태그
TH태그는 테이블의 헤더로서 내용이 진한 글씨로 나타나고 가운데 위치로 정렬됩니다.
헤더셀은 TH태그를 써서 표현하는데 주로 1열에 위치하여 아래에 있는 셀들의 제목이나 특징을 대표하는 데 사용되지요.
만약 헤더 셀을 테이블의 왼쪽에 정렬시키면 TR태그의 처음에 TH태그를 하나씩 넣어주면 됩니다.

<TH>...</TH>태그   - 기능 : 표의 작은 제목   - 속성 : TD의 속성과 동일

<TD ALIGN=정렬방식> - 셀 안의 내용을 LEFFT, CENTER, RIGTHT로 왼쪽,가운데,오른쪽으로 정렬 할 수 있습니다.
<TD VALIGN=정렬방식> - 셀 안의 내용을 TOP, MIDDLE, BOTTOM로 위,중간,아래로 세로정렬 할 수 있습니다.
※ <TR>에 ALIGN, VALIGN을 주면 TD 하나하나에 주지 않아도 TR에 묶여있는 모든 TD에 적용됩니다.

<TD COLSPAN=n> - 셀을 가로로 합치고 싶을 때 사용.
<TD ROWSPAN=n> - 셀을 세로로 합치고 싶을 때 사용.

기본 틀	<TD COLSPAN=2>	<TD ROWSPAN=2>

5. 표 만들기
위의 내용을 숙지하시고 지금부터 표만들기 실습을 해 볼까요?
아래 표를 직접 한번 작성해 보세요.

과목명	클래스	담당교수	강의실
컴퓨터와 인터넷	B	신수영	전산실습실1
	C	신수영	전산실습실1