Trio 홈페이지 - 표(TABLE)

표(TABLE)의 표현

<TABLE>

컬럽과 열들로 구성된 표(테이블:TABLE)를 만들 때 TABLE 엘레멘트을 사용한다. 이 TABLE 엘레멘트에는 표의 줄(TR: table rows), 표의 칸(TD: table data), 표의 제목(TH: table title) 엘레멘트를 포함하게 된다.

<TABLE>에서 사용 할 수 있는 애트리뷰트는

 bgcolor=색상 : 표의 바탕색을 색상값으로 지정
 width=길이 : 표의 너비를  백분율 혹은 픽셀(pixel)로 지정
 border=pixcel : 표의 테두리 두께를 픽셀(pixel)로 지정
 cellspacing=pixcel : 칸(cell) 사이의 간격을 픽셀(pixel)로 지정
 cellpadding=pixcel : 칸 안에서의 간격을 픽셀(pixel)로 지정

표의 border, cellpadding, cellspacing 비교 예제

<TR>

표의 줄(TR: table rows) 태그이며, <TABLE></TABLE> 사이에 반드시 한 쌍 이상 있어야 한다.

<TR>에서 사용 할 수 있는 애트리뷰트는

 bgcolor=색상 : 표의 줄 바탕색을 색상값으로 지정
 width=길이 : 표의 줄 폭을  백분율 혹은 픽셀(pixel)로 지정
 height=길이 : 표의 줄 높이를  백분율 혹은 픽셀(pixel)로 지정
 align=left | center | right :
   표의 줄에서 내용의 수평 정렬을 지정
 valign=top | middle | bottom :
   표의 줄에서 내용의 수직 정렬을 지정
브라우저에 따라 표현이 다소 다르다.

<TD>와 <TH>

표의 제목(TH: table title) 엘레멘트도 표의 칸(TD: table data)의 한 종류이며 그 특성들도 거의 같다. 단지, TH에서는 제목인 만큼 굵은 글자로 표현하고 칸의 중앙에 배열된다. <TR></TR> 사이에 반드시 한 쌍 이상 있어야 한다.

<TD>와 <TD>에서 사용 할 수 있는 애트리뷰트는

 bgcolor=색상 : 표의 칸 바탕색을 색상값으로 지정
 background=URL : 표의 칸 배경 이미지를 URL으로 지정
 width=길이 : 표의 칸 폭을  백분율 혹은 픽셀(pixel)로 지정
 height=픽셀(pixel) : 표의 칸 높이를 픽셀(pixel)로 지정
 align=left | center | right :
   표의 칸에서 내용의 수평 정렬을 지정, left가 디폴트이다.

 valign=top | middle | bottom :
   표의 칸에서 내용의 수직 정렬을 지정, middle이 디폴트이다.
 colspan=갯수 : 표의 칸에서 수평 통합 칸의 갯수 지정
 rowspan=갯수 : 표의 칸에서 수직 통합 칸의 갯수 지정
브라우저에 따라 표현이 다소 다르다.

가장 간단한 표는 한개의 표의 줄과 한줄에 한개의 표의 칸을 갖는 경우이다.

<TABLE border=1><TR>
<TD>한개의 표의 줄과 한줄에 한개의 표의 칸을 갖는 표의 예제</TD>
</TR></TABLE>

한개의 표의 줄과 한줄에 한개의 표의 칸을 갖는 표의 예제

제목 줄과 세개의 표의 줄, 세개의 표의 칸을 갖는 예제.

<TABLE border=1 bgcolor=ddddff width=80%>
  <TR bgcolor=ddffdd>
    <TH width=30%>1번 칸 제목</TH>
    <TH width=30%>2번 칸 제목</TH>
    <TH wdith=40% bgcolor=ffdddd>3번 칸 제목</TH>
  </TR>
  <TR align=center>
    <TD height=40>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>
  <TD align=center>3번 줄 - 1번 칸</TD>
    <TD>3번 줄 - 2번 칸</TD>
    <TD align=right>3번 줄 - 3번 칸</TD>
  </TR>
</TABLE>

1번 칸 제목 2번 칸 제목 3번 칸 제목

1번 줄 - 1번 칸 1번 줄 - 2번 칸 1번 줄 - 3번 칸

2번 줄 - 1번 칸 2번 줄 - 2번 칸 2번 줄 - 3번 칸
3번 줄 - 1번 칸 3번 줄 - 2번 칸 3번 줄 - 3번 칸

표의 제목: <CAPTION> </CAPTION>

표의 제목을 표현한다. <TABLE> 시작 태그가 시작 된 다음에 명시한다.

표의 칸 속에는 문장이나 이미지 뿐아니라, 여러 단계로 네스팅 되면서 목록들이나 다른 표들을 가질 수 있다.

칸의 폭을 한번 지장하면 되지 만 최소의 폭을 못 갖는 컬럼이 있으면, 브라우저들은 표의 각 칸의 너비나 전체 표의 너비를 자동으로 조절하여 표현하므로 매우 편리하지만, 원하는 너비를 인위적으로 맞추기가 쉽지 않다. 브라우저가 각 칸의 너비를 어떤 기준에 의하여 자동 조절하는가는 HTML 규격에서 표의 표현을 참조하라.

칸을 통합하면 표의 칸 안에 다른 표가 들어간 예제.

<TABLE border=1 width=80%>
  <CAPTION>실험용 표(TABLE) CAPTION</CAPTION>
  <TR bgcolor=ddffdd>
    <TH width=30%>1번 칸 제목</TH>
    <TH width=30%>2번 칸 제목</TH>
    <TH wdith=40% bgcolor=ffdddd>3번 칸 제목</TH>
  </TR>
  <TR align=center>
    <TD rowspan=2>1번 줄 - 1번 칸<BR>2번 줄 - 1번 칸 통합</TD>
    <TD>1번 줄 - 2번 칸</TD>
    <TD>1번 줄 - 3번 칸</TD>
  </TR>
  <TR>
    <TD>2번 줄 - 2번 칸</TD>
    <TD>2번 줄 - 3번 칸</TD>
  <TR>
    <TD colspan=2 align=center bgcolor=eeffff>3번 줄 - 1,2번 칸 통합
      <TABLE border=1 bgcolor=ffffee width=90%>
        <TR><TD>3-1-1-1</TD><TD>3-1-1-2</TD><TD>3-1-1-3</TD></TR>
        <TR><TD>3-1-2-1</TD><TD>3-1-2-2</TD><TD>3-1-2-3</TD></TR>
        <TR><TD>3-1-3-1</TD><TD>3-1-3-2</TD><TD>3-1-3-3</TD></TR>
      </TABLE>
    </TD>
    <TD><IMG src="../../gif/ictrio.gif"> 3번 줄 - 3번 칸
      <OL>
        <LI>3-3-1
        <LI>3-3-2
        <LI>3-3-3
      </OL>
    </TD>
  </TR>
</TABLE>

실험용 표(TABLE) CAPTION
1번 칸 제목 2번 칸 제목 3번 칸 제목

1번 줄 - 1번 칸
2번 줄 - 1번 칸 통합 1번 줄 - 2번 칸 1번 줄 - 3번 칸

2번 줄 - 2번 칸 2번 줄 - 3번 칸
3번 줄 - 1,2번 칸 통합

3-1-1-1 3-1-1-2 3-1-1-3

3-1-2-1 3-1-2-2 3-1-2-3

3-1-3-1 3-1-3-2 3-1-3-3

3번 줄 - 3번 칸

3-3-1
3-3-2
3-3-3

기타 추가적인 애트리뷰트 등은 HTML 규격의 표의 표현에 대한 자세한 정보를 참조하라.

표(TABLE)

이

문서(http://trio.co.kr/webrefer/httut/httable.html)는 자유로이 연결 사용이 가능함.