HE + STORY

표 만들기

• etc/• blog tip & utill / 2012. 9. 6. 16:11

◈ 표 만들기

앞서 설명한 리스트를 잘 활용하면 순서대로 표시해야 할 자료들을 깔끔하고 보기 좋게 출력할 수 있습니다. 하지만 때로는 도표나 목록의 형태로 자료들을 보여 줄 필요가 있습니다. 이럴 때 사용하는 것이 바로 테이블입니다. 테이블을 이용하는 것이 정보를 훨씬 효과적으로 강조하여 표현할 수 있습니다.
또한 테이블로 레이아웃을 잡는다 던지 여러 가지 용도로 사용할 수 있습니다. 웹페이지를 만드는데 가장 중요한 요소는 테이블입니다. 테이블에 대한 내용을 배우기 전에 이 사실을 명심하시길 바랍니다.

▶ <TABLE></TABLE> : 이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과 끝을 지정합니다. 실제로 테이블의 모양을 만드는 태그들은 이 블록의 내부에 포함되어야 합니다.

<TABLE > 태그의 속성
BORDER	표의 테두리를 결정한다. 숫자를 할당하면 해당 숫자의 테두리가 그려진다.
CELLSPACING	셀과 셀 사이의 간격을 바꾸고 싶을 때 사용한다.
CELLPADDING	셀 내부에서의 간격을 바꾸고 싶을 때 사용한다.
WIDTH	가로 넓이를 지정한다.
HEIGHT	세로 높이를 지정한다.
ALIGN	표의 정렬 방식을 지정한다.

▶ <TD></TD> : 테이블의 열을 만듭니다.

<TD>태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

▶ <TR></TR> : 테이블의 열을 만듭니다. 이 태그가 나오지 않으면 모든 셀이 한 줄로 나타나게 됩니다.

예제

<예제 실행 화면>

※ 표의 빈칸 처리방법 : <p> 을 셀의 빈칸에 넣어주면 됩니다.

▶ <TH></TH> : 거의 모든 면에서 <TD></TD> 태그와 동일하지만 이 태그로 만들어진 셀은 텍스트가 볼드체로, 중앙 정렬해서 보여준다는 것이 다릅니다..

<TH>태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

저작자표시

'• etc/• blog tip & utill'과 연관된 게시물

표 만들기

NOTICE

RECENTLY POST

LINK

VISIT

티스토리툴바