W3C11 표(table)Trio 홈페이지
목차
  1. 표(table)의 소개
  2. 표를 구성하는 엘레멘트
    1. TABLE 엘레멘트
    2. 표의 제목(caption): CAPTION 엘레멘트
    3. 열(row) 구룹: THEAD, TFOOT, TBODY 엘레멘트
    4. 컬럼(column) 구룹: COLGROUP, COL 엘레멘트
    5. 표의 열(row): TR 엘레멘트
    6. 표의 셀(cell): TH, TD 엘레멘트
  3. 보는 사용도구에 의한 표 양식화
    1. 테두리(border)와 줄(rule)
    2. 수평, 수직 정렬
    3. 셀의 마진(margin)
  4. 보이지 않는 사용도구에 의한 표의 표현
    1. 데이터 셀(cell)과 관련 된 헤더(header) 정보
    2. 셀들의 카테고리화
    3. 헤딩 정보를 찾는 기능(algorithm)
  5. 표의 예제

11.1 표(table)의 소개

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

각 표는 관련 된 그 표의 목적을 간단하게 기술하는 제목(CAPTION 엘레멘트 참조)을 가질 수 있다. summary(요약) 애트리뷰트를 통하여 음성 또는 점자 사용도구를 사용하는 사람들의 편리성을 위하여 긴 문장도 기재 할 수 있다.

표(table)의 열(row)들은 THEAD, TFOOTTBODY 엘레멘트로 해당하는 머리글(head), 바닥글(foot), 본체(body)로 구룹 지울 수 있다. 열 구룹은 추가적인 구조적 정보를 전달 할 수 있으며, 사용도구는 이 구조를 강조하여 표현 할 수 있다. 사용도구는 머리글, 바닥글과는 독립적으로 본체 항목들을 굴리며(scrolling) 볼수 있도록, 머리글, 바닥글, 본체로 분리하여 표현 할 수 있다. 긴 표를 인쇄 할 때, 이 표의 데이터를 갖는 각 페이지에 머리글과 바닥글을 반복하여 인쇄 할 수 있게 한다.

제작자는 또한 사용도구가 사용 할 수 있는 추가적인 구조적 정보를 제공하기 위하여 컬럼구룹을 지정 할 수 있다. 제작자는추가적으로 COLGROUP, COL 엘레멘트를 통하여, 표의 정의가 시작되는 곳에서, 사용도구가 모든 표의 데이터가 도착하기 전에 표현하는 대신, 점진적으로 표시 할 수 있도록 컬럼의 특성들을 지정 할 수 있다.

표의 셀(cell)들에는 머릿글(TH: table header 엘레멘트) 정보나 데이터(TD: table data 엘레멘트)를 가질 수 있다. 셀들은 복수의 줄들과 컬럼들을 가질 수 있다. HTML 4 표 모델은 제작자가 보이지 않는(non-visual) 사용도구가 셀에 대 한 머리글 정보를 사용자에게 더 쉽게 알리기 위하여, 각 셀에 이름(label)을 붙이는 것을 허용한다. 이 기능들은 시력 장애자들을 크게 도울 뿐 아니라, 제한 된 디스플레이 능력을 가지고 있는 복수 양식의 무선 부라우저(예: 웹에서 사용하는 페이저나 전화)에서 표를 다룰 수 있게 한다.

표는 보이지 않는 메디아를에서 문서를 표현 할 때, 문제를 일으킬 수 있으므로, 문서 내용의 배치 만을 위하여 사용해서는 않된다. 또한 그래픽들과 같이 사용 될 때, 이들 표는 사용자가 더 넓은 화면을 위하여 제작 된 표를 보기 위해, 수평으로 화면을 굴리면서(scroll) 보도록 강요 받을 수 있다. 문제점을 최소화 하기 위해서, 제작자는 배치를 제어하기 위해 표 대신 스타일쉬트를 사용하여야 한다.

주석: 이 규격에는 표에 대 한 더 상세 한 정보, 표의 합리적 설계와 응용이 포함 되어있다.

HTML 표 모델의 기능들을 간단히 설명하는 예제에서 표를 정의한다.

<TABLE border="1"  width="50%"
 summary="이 표는 과실 파리에 대 한 통계 수치들을 보여 준다.
   평균 신장, 체중, 붉은 눈의 구성 백분율(암, 수 모두).">
<CAPTION><EM>병합 된 셀을 갖는 실험 표</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">평균
   <TH rowspan="2">붉은<BR>눈
<TR><TH>길이<TH>체중
<TR><TH>숫놈<TD>1.9<TD>0.003<TD>40%
<TR><TH>암놈<TD>1.7<TD>0.002<TD>43%
</TABLE>

이는 터미날(tty)에서 다음과 같이 표현 될 것이다.

         병합 된 셀을 갖는 실험 표
   --------------------------------------
   |       |       평균      |  붉은    |
   |       |-----------------|        |
   |       |  길이  |  체중  |          |
   |------------------------------------|
   | 숫놈  | 1.9     | 0.003  |  40%    |
   |------------------------------------|
   | 암놈  | 1.7     | 0.002  |  43%    |
   --------------------------------------
귀하의 브라우저에서
병합 된 셀을 갖는 실험 표
 평균 붉은
길이체중
숫놈1.90.00340%
암놈1.70.00243%

또는 일반적인 그래픽 사용도구로 보면(영어 원문 그래픽)

병합 된 셀을 갖는 실험 표(영어 원문 그래픽)

11.2 표(table)를 구성하는 엘레멘트

11.2.1 TABLE 엘레멘트

<!ELEMENT TABLE - -
    (CAPTION?, (COL* | COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                      -- 표(table) 엘레멘트 --
 %attrs;                            -- %coreattrs, %i18n, %events --
 summary     %Text;       #IMPLIED  -- 목적/음성 출력의 구조 --
 width       %Length;     #IMPLIED  -- 표의 너비 --
 border      %Pixels;     #IMPLIED  -- 표의 테두리 제어 --
 frame       %TFrame;     #IMPLIED
	-- 프레임(frame)의 어느부분을 표시 할 것인가 --
 rules       %TRules;     #IMPLIED  -- 열(row)과 컬럼(col) 사이의 줄(ruling)--
 cellspacing %Length;     #IMPLIED  -- 셀(cell) 사이의 간격 --
 cellpadding %Length;     #IMPLIED  -- 셀 안에서의 간격 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

summary = text [대소문자 구별: CS]
이 애트리뷰트는 표의 목적이나, 음성, 점자등 보이지 않는 메디아 표현의 구조를 제공한다.
align = left | center | right [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 문서에서 표의 위치를 지정하며 허용 된 값은:
  • left: 왼쪽 정렬.
  • center: 중앙 정렬.
  • right: 오른쪽 정렬.
width = length [대소문자 중립: CN]
이 애트리뷰트는 보는 사용도구를 위하여 표의 원하는 전체 너비를 지정한다. 그 값이 백분율이면 사용도구의 전체 사용 가능한 창의 수평 너비에 대한 상대적인 값이다. 너비 값이 없으면 표의 너비를 사용도구가 결정한다.
다른 곳에서 정의 된 애트리뷰트

TABLE 엘레멘트는 제목(caption), 열(row), 내용(content), 양식(format)을 지정하는 모든 다른 엘레멘트들을 포함한다.

다음 참고 목록은 사용도구가 표를 표현 할 때 수행하는 작동에 대하여 설명하였다.

HTML의 표(table) 모델은, 제작자의 도움을 받아, 사용도구가 모든 표의 데이터가 도착 한 후에 표현하는 대신, 도달 한 줄 별로 점진적으로 표시 할 수 있도록 설계 되었다.

사용도구가 표의 양식화를 단번에 하게 하려면, 제작자는 사용도구에게 다음 사항을 알려 주어야한다.

더 정확히 말하면, 사용도구는 컬럼 너비가 COLGROUPCOL 엘레멘트의 조합으로 지정 되었으면 표를 단번에 표시 할 수 있다. 만일 컬럼들 중에 상대적 값이나 백분율(컬럼의 너비 계산 참조)로 너비가 지정 된 것이 있으면, 제작자는 표 전체의 너비를 결정하여야 한다.

표의 방향성(directionality)

표의 방향성은 원래의 방향성(디폴트는 left-to-right) 이거나 TABLE 엘레멘트의 dir 애트리뷰트에서 지정 한 방향이다.

왼쪽에서 오른쪽으로(left-to-right)의 표에서 컬럼 zero는 왼쪽이고, 오른쪽에서 왼쪽으로(right-to-left)의 표에서 컬럼 zero는 오른쪽이며, 열(row) zero는 맨위(top)이다.

사용도구가 추가적인 줄에 셀을 배정하면 표의 (컬럼 갯수 계산 참조), 추가적인 셀은 왼쪽에서 오른쪽으로의 표에서는 오른쪽에, 오른쪽에서 왼쪽으로의 표에서는 왼쪽에 추가된다.

TABLE 엘레멘트에서 만 dir로 컬럼들의 보이는 순서를 바꿀 수 있슴에 주의하라. 표의 줄(TR) 또는 컬럼구룹(COLGROUP)에서는 독립적으로 방향을 바꿀 수는 없다.

TABLE 엘레멘트에서 dir 애트리뷰트가 설정되면 dir의 불럭레벨 엘레멘트 특성으로 표의 셀 안에서의 텍스트 방향도 영향을 받는다.

오른쪽에서 왼쪽으로(right-to-left)의 표를 지정하기 위 한 dir 애트리뷰트 설정 예

<TABLE dir="RTL">
 ... 표의 나머지 부분 ...
</TABLE>

개별 셀(cell) 안에서의 글자 방향은 그 셀을 정의하는 엘레멘트에서 dir 애트리뷰트로 변경 시킬 수 있다. 글자 방향에 대한 추가 정보는 텍스트의 방향성(bidirectional)을 참조하라.

11.2.2 표의 제목: CAPTION 엘레멘트

<!ELEMENT CAPTION  - - (%inline;)*  -- 표의 제목 -->
<!ENTITY % CAlign "(top | bottom | left | right)">

<!ATTLIST CAPTION
 %attrs;                           -- %coreattrs, %i18n, %events --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의
align = top | bottom | left | right [대소문자 구별 없이: CI]
불량한 것이다. 보는 사용도구에서 이 애트리뷰트는 표의 제목(caption) 위치를 표에 상대적으로 지정하며, 가능한 값은:
  • top: 표의 제목을 표의 맨 위에 표시. 디폴트 값임.
  • bottom: 표의 제목을 표의 맨 아래에 표시.
  • left: 표의 제목을 표의 왼쪽에 표시.
  • right: 표의 제목을 표의 오른쪽에 표시.
다른 곳에서 정의 된 애트리뷰트

CAPTION 엘레멘트를 지정한다면, 그 내용은 그 표의 성격을 설명하여야 한다. CAPTION 엘레멘트는 TABLE의 시작태그 바로 뒤에 만 허용 되며, 한개의 TABLE 엘레멘트에서 하나의 CAPTION 엘레멘트 만을 가질 수 있다.

보는 사용도구는 머리글과 제목을 통 해 표의 구조를 빨리 파악하도록한다. 제목은 표의 목적을 요약하고 안보는 사용도구에 의존하는 사람들에게 표의 구조를 알려 주는데, 자주 적당하지 않은 결과를 준다.

제작자는 TABLE 엘레멘트의 summary 애트리뷰트를 사용하여 표의 목적을 요약하고 구조의 정보를 추가적으로 제공하는 데는 주의 기울여야한다. 이것은 특히 표의 제목이 없을 때 중요하다. 아래 예제에서 summary 애트리뷰트의 사용을 설명한다.

보는 사용도구는, 예를 들어 수평 혹는 수직화면 굴리기(scroll)에 의하여 모든 부분에 접근 수단을 제공하는 경우 이외에, 제목을 포함하여 표 일부분의 잘라짐(clipping)을 피하여야 한다. 제목(caption) 텍스트는 표의 너비와 같은 너비로 자동 줄바꿈(wrap)하도록 추천한다. 추천되는 배열 기능(algorithms)을 참조하라.

11.2.3 열(row) 구룹: THEAD, TFOOT, TBODY 엘레멘트

<!ELEMENT THEAD    - O (TR)+           -- 표 머리글(header) -->
<!ELEMENT TFOOT    - O (TR)+           -- 표 바닥글(footer) -->

시작태그: 필요 함, 종료태그: 선택적

<!ELEMENT TBODY    O O (TR)+           -- 표 본체(body) -->

시작태그: 선택적, 종료태그: 선택적

<!ATTLIST (THEAD | TBODY | TFOOT)      -- 표의 항목 --
 %attrs;                              -- %coreattrs, %i18n, %events --
 %cellhalign;                         -- 셀의 수평 정렬 --
 %cellvalign;                         -- 셀의 수직 정렬 --
>
다른 곳에서 정의 된 애트리뷰트

표의 열(row)들은 THEAD, TFOOT, TBODY 엘레멘트를 사용하여, 각 해당 표의 머리글(head), 바닥글(foot), 또는 하나 이상의 표의 본체(body) 항목으로 구룹 지워 질 수 있다. 이 분리는 사용도구가 머리글, 바닥글과는 별도로 화면 굴리기(scroll)를 표 본체에 적용 할 수 있게 해 준다. 긴 표를 인쇄 할 때 머리글과 바닥글이 반복하여 각 표 데이터 페이지에 인쇄되게 할 수 있다.

표의 머리글과 바닥글은 표의 컬럼에 대한 정보를 담아야한다. 표의 본체에는 표 데이터의 열들을 가져야한다.

THEAD, TFOOTTBODY를 포함하면 각 각은 열 구룹을 가져야한다. 각 열 구룹은 최소한 하나의 TR 엘레멘트로 정의되는 열을 가져야한다.

아래 예제는 표의 머리글, 바닥글과 본체의 순서와 구조를 설명한다.

<TABLE>
<THEAD>
    <TR>... 머리글(head) 정보 ...
</THEAD>
<TFOOT>
    <TR>... 바닥글(foot)정보 ...
</TFOOT>
<TBODY>
    <TR>... 첫 데이터들의 첫째 열(row) ...
    <TR>... 첫 데이터들의 둘째 열(row) ...
</TBODY>
<TBODY>
    <TR>... 둘째 데이터들의 첫째 열(row) ...
    <TR>... 둘째 데이터들의 둘째 열(row) ...
    <TR>... 둘째 데이터들의 세째 열(row) ...
</TBODY>
</TABLE>

TFOOTTABLE 정의 안에서 TBODY 보다 먼저 있어야 사용도구가 여러번 나올 수 있는 데이터의 줄들이 다 나오기 전에 바닥글을 표시 할 수 있다. 다음에서 어떤 태그가 필요하고 어디에서 생략 할 수 있는가를 요약하였다.

HTML 규격에 맞는 사용도구는 이전 버전의 적용성 때문에 이 규칙을 따라야한다.

앞 예제의 표는 종료태그를 아래와 같이 생략하여 간단히 할 수 있다.

<TABLE>
<THEAD>
    <TR>... 머리글(head) 정보 ...
<TFOOT>
    <TR>... 바닥글(foot)정보 ...
<TBODY>
    <TR>... 첫 데이터들의 첫째 열(row) ...
    <TR>... 첫 데이터들의 둘째 열(row) ...
<TBODY>
    <TR>... 둘째 데이터들의 첫째 열(row) ...
    <TR>... 둘째 데이터들의 둘째 열(row) ...
    <TR>... 둘째 데이터들의 세째 열(row) ...
</TABLE>

THEAD, TFOOTTBODY 항목들은 같은 갯수의 컬럼을 가져야한다.

11.2.4 컬럼(column) 구룹: COLGROUP, COL 엘레멘트

컬럼구룹은 제작자가 표 안에서 구조적으로 분리(division)를 할 수 있게 한다. 제작자는 스타일쉬트나 HTML 애트리뷰트(예: TABLE 엘레멘트의 rules 애트리뷰트)를 통 해 이 구조를 잘보이게(highlight) 할 수 있다. 예제는 컬럼구룹을 보는 표현의 표 견본이다.

한개 표는 단일 암시적 컬럼구룹(컬럼을 제한하는 COLGROUP 엘레멘트 없음), 또는 한개 이상의 명시적 컬럼구룹(각 각의 COLGROUP 엘레멘트 인스탄스(instance)에 의한 제한)을 가질 수 있다.

COL 엘레멘트는 구조적 구룹 없이 제작자가 복수의 컬럼들에서 애트리뷰트를 같이 사용 할 수 있게 한다. COL 엘레멘트의 "span"(확장)은 엘레멘트의 같은 애트리뷰트를 사용하는 컬럼의 갯수이다.

COLGROUP 엘레멘트

<!ELEMENT COLGROUP - O (col)*          -- 표의 컬럼(column) 구룹 -->
<!ATTLIST COLGROUP
 %attrs;                              -- %coreattrs, %i18n, %events --
 span        NUMBER         1         -- 디폴트: 구룹에서 컬럼의 갯수 --
 width       %MultiLength;  #IMPLIED  -- 디폴트: COL로 묶은 너비 --
 %cellhalign;                         -- 셀(cell) 안에서 수평 정렬 --
 %cellvalign;                         -- 셀 안에서 수직 정렬 --
>

시작태그: 필요 함, 종료태그: 선택적

애트리뷰트의 정의

span = number [대소문자 중립: CN]
0보다 큰 정수이어야 하는 이 애트리뷰트는 컬럼구룹에서 컬럼의 갯수이며, 그 값은:
  • span 애트리뷰트가 없으면, 각 COLGROUP은 하나의 컬럼으로 구성 된 컬럼구룹을 말한다.
  • 만일 span 애트리뷰트의 숫자(N)가 0보다 크게 설정되면, 현재의 COLGROUP 엘레멘트는 그 수(N)의 컬럼들을 갖는 컬럼구룹을 말한다.

만일 COLGROUP 엘레멘트가 하나 이상의 COL 엘레멘트를 가지면, 사용도구는 이 애트리뷰트를 무시하여야 한다.

width = multi-length [대소문자 중립: CN]

이 애트리뷰트는 현재 컬럼구룹 각 컬럼의 너비의 디폴트를 나타낸다. 이 애트리뷰트는 표준 픽셀수(pixel), 백분율과 상대적인 값 이외에, 특수 양식 "0*"를 허용한다. 값 "0*"는 컬럼구룹에서 각 컬럼의 내용을 표현하는데 필요한 최소 너비들를 갖는다는 것을 의미한다. 이는 컬럼의 너비를 바르게 계산있게 하기 위하여, 그 컬럼 전체의 내용을 알아야한다는 것을 암시한다. 제작자가 "0*"으로 설정하면, 보는 사용도구에서 표를 한 줄씩 점진적으로 표현하는 것을 방해한다는 것을 알아야한다.

이 애트리뷰트는 COL 엘레멘트로 width가 지정 된 컬럼구룹의 컬럼을 덮어 씌운다(overridden).

다른 곳에서 정의 된 애트리뷰트

COLGROUP 엘레멘트는 명시적 컬럼구룹을 만든다. 컬럼구룹에서 컬럼의 갯수는 서로 같지 않은 다음 두가지가 될 수 있다.

  1. 이 엘레멘트의 span 애트리뷰트(디폴트: 1)는 컬럽구룹에서 컬럼의 갯수를 지정한다.
  2. COLGROUP의 각 COL 엘레멘트는 컬럼구룹에서 한개 이상의 컬럼의 갯수를 나타낸다.

span 애트리뷰트 사용의 잇점은 제작자가 컬럼 너비에 대 해 정보를 같이 구룹 지울 수 있다는 것이다.

그래서 표가 40개의 컬럼들을 가지고 있고, 그 각 각의 너비가 20 픽셀(pixel) 씩이라면:

  <COLGROUP>
     <COL width="20">
     <COL width="20">
     ... 모두 40 COL 엘레멘트들을 반복 기재 ...
  </COLGROUP>

이것을 아래와 같이 더 쉽게 쓸 수 있다.

  <COLGROUP span="40" width="20"></COLGROUP>

컬럽구룹에서 한개의 컬럼 만 지정 할 필요가 있으면(예: 스타일 정보에서 너비 지정 등), 제작자는 그 컬럼에서 COL 엘레멘트를 사용하여야 한다.

그래서 위의 예제에서 마지막 컬럼에 특정 스타일 정보를 적용하려면:

 <COLGROUP width="20">
     <COL span="39">
     <COL id="format-me-specially">
  </COLGROUP>

COLGROUP 엘레멘트의 width 애트리뷰트는 모든 40 컬럼들에 특성을 적용한다. 첫번째 COL 엘레멘트는 앞에 나오는 모두 같은 39 컬럼들을 참조하고, 두번째 것은 id 값으로 스타일쉬트를 참조하도록 40번째 컬럼을 설정한다.

다음 예제에는 표는 두개의 컬럼구룹을 갖는다. 첫번째 컬럼구룹은 10 개의 컬럼들과 두번째 구룹은 5개의 컬럼들을 갖는다. 첫번째 컬럼구룹의 각 컬럼의 디폴트 너비는 50 픽셀(pixel)이다. 두번째 컬럼구룹의 각 컬럼의 너비는 그 컬럼이 필요로하는 최소의 너비이다.

 <TABLE>
   <COLGROUP span="10" width="50">
   <COLGROUP span="5" width="0*">
   <THEAD>
   <TR><TD> ...
 </TABLE>

COL 엘레멘트

<!ELEMENT COL      - O EMPTY          -- 표(table)의 컬럼(column) -->
<!ATTLIST COL                         -- 컬럼 구룹과 특성 --
 %attrs;                              -- %coreattrs, %i18n, %events --
 span        NUMBER         1
	-- COL 애트리뷰트의  영향을 받는 N개의 컬럼 --
 width       %MultiLength;  #IMPLIED  -- 컬럼의 너비(width) 규격 --
 %cellhalign;                         -- 셀(cell) 안에서의 수평 정렬 --
 %cellvalign;                         -- 셀 안에서의 수직 정렬 --
>

시작태그: 필요 함, 종료태그: 사용 금지

애트리뷰트의 정의

span = number [대소문자 중립: CN]
값이 0보다 큰 정수를 갖는 이 애트리뷰트는 COL 엘레멘트에 의하여 span(확장)으로 묶여진 컬럼의 갯수를 지정하고, COL 엘레멘트의 애트리뷰트는 span에 있는 모든 컬럼들에 같이 적용된다. 디폴트 값은 1이며, 그 의미는 COL 엘레멘트는 하나의 컬럼을 갖는다는 뜻이다. 만일 span 애트리뷰트가 1보다 큰 수 N으로 설정 되었다면, 현재 COL 엘레멘트는, 그 애트리뷰트를 지정 된 것을 포함하여, 다음 N개의 컬럼들과 공유하게 된다.
width = multi-length [대소문자 중립: CN]
이 애트리뷰트는 현재 COL 엘레멘트에 의하여 확장 된 각 컬럼의 디폴트 너비 값을 지정한다. COLGROUP 엘레멘트의 width 애트리뷰트와 같은 의미를 갖고, 그 컬럽의 애트리뷰트를 덮어 씌운다.
다른 곳에서 정의 된 애트리뷰트

COL 엘레멘트는 제작자가 표의 컬럼들을 묶어 구룹 지우도록 애트리뷰트를 정의 할 수 있게 한다. COL이 컬럼들을 구조적으로 구룹으로 묶어주지는 않는다. 그렇게 하는 것은 COLGROUP 엘레멘트의 기능이다. COL 엘레멘트는 비어 있고, 단지 애트리뷰트를 지원 할 뿐이다. 그것은 명시적 컬럼구룹(말하자면 COLGROUP 엘레멘트)의 안이나 밖에 위치한다.

COLwidth 애트리뷰트는 엘레멘트 확장된(span) 내부 각 컬럼의 너비를 나타낸다.

표에서 컬럼(column) 갯수의 계산

표에서 컬럼 갯수를 계산하는 방법은 다음 두 가지이다(순서 대로).

  1. 만일 TABLE 엘레멘트가 COLGROUP 또는 COL 엘레멘트를 가지면, 사용도구는 다음과 같이 컬럼(column)의 갯수를 계산하여야 한다.
  2. 만일 TABLE 엘레멘트에 COLGROUP 또는 COL 엘레멘트를 포함하고 있지 않으면, 사용도구는 열(row)에서 필요로 하는 컬럼(column)의 갯수에 따라야한다. 컬럼의 갯수는 span 된 복수 컬럼의 셀(cell)들을 포함 한 가장 많은 컬럼들의 열에 필요한 컬럼의 갯수와 같다. 컬럼의 갯수보다 적은 갯수를 갖는 열에는 열의 끝에 빈 셀(cell)이 추가 되어야 한다. 열의 끝은 표의 방향성(table directionality)에 따라 다르다.

표가 COLGROUP 또는 COL 엘레멘트를 가지고 이 두 가지 계산 결과의 컬럼 갯수가 다르다면 오류이다.

일단 사용도구가 표의 컬럼 갯수를 계산 하였다면, 컬럼 구룹으로 구룹 지울 수 있다.

다음 각 표의 예제에서, 두 가지 컬럼 계산 방식은 모두 세개의 컬럼들을 가지게한다. 앞의 세 표는 열들을 순차적으로 표현 할 것이다.

<TABLE>
 <COLGROUP span="3"></COLGROUP>
 <TR><TD> ...
 ... 열(row)들 ...
</TABLE>

<TABLE>
 <COLGROUP>
   <COL>
   <COL span="2">
 </COLGROUP>
 <TR><TD> ...
 ... 열(row)들 ...
</TABLE>

<TABLE>
 <COLGROUP>
   <COL>
 </COLGROUP>
 <COLGROUP span="2">
 <TR><TD> ...
 ... 열(row)들 ...
</TABLE>

<TABLE>
 <TR>
   <TD><TD><TD>
 </TR>
</TABLE>

컬럼의 너비 계산

제작자는 다음 세 가지 방법으로 컬럼(column)의 너비(width)를 지정 할 수 있다.

고정(fixed) 너비
고정 너비 규격은 픽셀(pixel)(예: width="30")로 지정되며, 준비 된 열 단위로 표현하는 점진적 표현을 가능하게한다.
백분율(percentage)
백분율 너비 규격(예: width="20%")은 표의 사용 가능 한 수평 공간(현재 왼쪽과 오른쪽 마진 사이, 유동(float) 포함)에 대 한 백분율로 표시한다. 이 공간은 표 자체에 따라 달라 지는 것이 아니므로 백분율 규격은 준비 된 열 단위로 표현하는 점진적 표현을 가능하게 한다 점에 유의하라.
비례적(proportional)
비례적 너비 규격(예: width="3*")은 표에 필요한 수평 공간에 대 한 비율로 지정한다. 만일 표의 너비가 TABLE 엘레멘트의 width 애트리뷰트를 통해 고정 값으로 지정었으면, 사용도구는 비례적 컬럼에서도 표를 준비 된 열 단위로 표현하는 점진적 표현을 가능하게한다.

그러나, 만일 표가 고정 너비를 가지고 있지 않으면, 사용도구는 표가 필요로하는 수평 공간을 산정하기 전에, 표의 모든 데이터를 받아 들여야한다. 그래야 만 공간을 비례적 컬럼에 할당 할 수 있다.

만일 제작자가 컬럼의 너비 정보를 지정하지 않으면, 사용도구는 적정한 비례적 컬럼의 할당을 위해서는 모든 컬럼들에 데이터가 도달하기를 기다려야 하기 때문에, 준비 된 열 단위로 표현하는 점진적 표현은 불가능 하다.

만일 컬럼 너비들이 표의 어떤 셀에 적용하기에 너무 좁다면, 사용도구는 표를 다시 설정 할 수 있다.

예제의 표는 6개의 컬럼들을 가지고 있다. 첫번째 것은 명시적 컬럼구룹에 속해 있지 않고, 다음 3개의 컬럼은 쳇번째 명시적 컬럼구룹에, 마지막 2개의 컬럼은 두번째 명시적 컬럼구룹에 속해 있다. 이 표는 비례적 컬럼 너비로 지정되어 있으나, TABLE 엘레멘트의 width 애트리뷰트에 값이 없으므로, 준비 된 열 단위로 표현하는 점진적 표현이 불가능 하다.

보는(visual) 사용도구가 표의 데이터를 받으면, 사용 가능 한 수평 공간은 사용도구에 의하여 다음과 같이 할당 될 것이다. 사용도구는 맨 먼저 30 픽셀(pixel) 씩 1번과 2번 컬럼에 할당하고, 3번 컬럼에 필요한 최소의 너비를 할당하고, 나머지 수평 공간은 여섯개(2* + 1* + 3* = 6)의 같은 비율로 나뉘어지고, 4번 컬럼(2*)은 2개의 부분을, 5번 컬럼(1*)은 한개의 부분을, 그리고 마지막 6번 컬럼(3*)은 세개의 부분을 할당 받는다.

<TABLE>
 <COLGROUP>
   <COL width="30">
 <COLGROUP>
   <COL width="30">
   <COL width="0*">
   <COL width="2*">
 <COLGROUP align="center">
   <COL width="1*">
   <COL width="3*" align="char" char=":">
 <THEAD>
 <TR><TD>...
   ... 열(row)들 ...
</TABLE>

3번 컬럼구룹의 align 애트리뷰트 값을 "center"로 설정하였다. 이 구룹의 각 컬럼에 있는 모든 셀들은 이 값을 가지게 되지만, 덮어 씌울 수 있다. 실제적으로, 마지막 COL은 컬럼에 있는 각 셀에는 ":" 글자를 기준하여 정렬 될 것을 정의 한 것이다.

다음 표에서 컬럼 너비는 사용도구가 준비 된 열 단위로 표현하는 점진적 표현이 가능하도록 설정하였다.

<TABLE width="200">
 <COLGROUP span="10" width="15">
 <COLGROUP width="*">
   <COL id="penultimate-column">
   <COL id="last-column">
 <THEAD>
 <TR><TD>...
   ... 열(row)들 ...
</TABLE>

앞의 10개의 컬럼들은 각 각 15 픽셀(pixel)의 너비를 갖는다. 마지막 2개의 컬럼들은 나머지 50 픽셀의 반 씩을 받게된다. COL 엘레멘트는 단지 id 값을 이 마지막 두 컬럼에 지정하기 위하여 사용하였슴에 주의하라.

주석: TABLE 엘레멘트의 width 애트리뷰트는 불량한 것은 아미지만, 제작자가 표의 너비을 지정하기 위하여 스타일쉬트를 사용 할 것을 권한다.

11.2.5 표의 열: TR 엘레멘트

<!ELEMENT TR       - O (TH | TD)+     -- 표(table)의 열(row) -->
<!ATTLIST TR                          -- 표의 열  --
 %attrs;                              -- %coreattrs, %i18n, %events --
 %cellhalign;                         -- 셀(cell)의 수평 정렬 --
 %cellvalign;                         -- 셀의 수직 정렬 --
>

시작태그: 필요 함, 종료태그: 선택적

다른 곳에서 정의 된 애트리뷰트

TR 엘레멘트는 표의 셀들의 열(row)을 위한 용기와 같이 작용한다. 종료태그는 생략 될 수 있다.

이 예제 표는 세 열(row)을 가지고 있으며, 각 열은 TR 엘레멘트로 시작된다.

<TABLE
 summary="상원의원이 소비하는 커피의 잔 수, 커피의 종류(카페인 제거 한
	 또는 보통)와 설탕을 첨가하는가를 도식화 한 표이다.">
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR>... 머리글 줄 ...
 <TR>... 첫줄 데이터 ...
 <TR>... 둘째줄 데이터 ...
 ... 표의 나머지 부분 ...
</TABLE>

11.2.6 표(Table)의 셀(cell): TH, TD 엘레멘트

<!ELEMENT (TH | TD)  - O (%flow;)*    -- 표의 머리글 셀(TH), 데이터 셀(TD) -->

<!-- 일반 표에서 axes 애트리뷰트보다 간단 함 -->
<!ENTITY % Scope "(row | col | rowgroup | colgroup)">

<!-- TH는 머리글, TD는 데이터을 위 한 것이나, 셀에서는 둘다 TD와 같이 작용 -->
<!ATTLIST (TH | TD)                   -- 표의 머리글 혹은 데이터 셀 --
 %attrs;                              -- %coreattrs, %i18n, %events --
 abbr        %Text;         #IMPLIED  -- 머리글 셀의 약자 --
 axis        CDATA          #IMPLIED  -- 관련 머리글의 이름 구룹 --
 headers     IDREFS         #IMPLIED  -- 머리글 셀의 id 목록 --
 scope       %Scope;        #IMPLIED  -- 머리글 셀의 범위 --
 rowspan     NUMBER         1         -- 확장(span) 된 셀의 줄 수 --
 colspan     NUMBER         1         -- 확장 된 셀의 컬럼 갯수 --
 %cellhalign;                         -- 셀(cell)의 수평 정렬 --
 %cellvalign;                         -- 셀의 수직 정렬 --
>

시작태그: 필요 함, 종료태그: 선택적

애트리뷰트의 정의

headers = idrefs [대소문자 구별: CS]
이 애트리뷰트는 현재 데이터 셀의 머리글 정보를 제공하는 머리글 셀의 목록을 지정한다. 이 애트리뷰트의 값은 공간으로 분리되는 셀 이름 목록이다. 이들의 셀은 id 애트리뷰트로 이름이 설정되어야 한다. 제작자는 일반적으로 보이지 않는(non-visual) 사용도구가 정보 데이터 셀에 대 한 머리글(header)을 표현(예: 데이터 셀들보다 먼저 머리글 정보를 말 함)하는데 도움을 주기 위 해, headers 애트리뷰트를 사용한다. 그러나, 이 애트리뷰트는 스타일쉬트와 조합하여 사용 될 수도 있다. scope 애트리뷰트를 참조하라.
scope = scope-name [대소문자 구별 없이: CI]
이 애트리뷰트는 현재의 머리글(header) 정보를 제공하는 데이터 셀을 지정한다. 이 애트리뷰트는 특히 단순한 표에서 headers 애트리뷰트 대신에 사용 될 수 있다. 이 애트리뷰트가 지정 될 때, 다음 중 하나의 값을 갖는다.
  • row: 현재 셀 자신이 포함 된 열에서 나머지 부분의 헤더(header) 정보를 제공한다. (표의 방향성도 참조하라).
  • col: 현재 셀 자신이 포함 된 컬럽에서 나머지 부분의 헤더 정보를 제공한다.
  • rowgroup: 현재 셀 자신이 포함 된 열 구룹(row group)의 나머지 부분의 헤더 정보를 제공한다.
  • colgroup: 현재 셀(cell) 자신이 포함 된 컬럼구룹(column group)의 나머지 부분의 헤더 정보를 제공한다.
abbr = text [대소문자 구별: CS]
이 애트리뷰트는 셀 내용의 생략 된 형식을 제공하기 위해서 사용되어야 하며, 셀의 내용이 적당 할 때 사용도구에 의해서 표현 될 수 있다. 생략 된 이름들은 사용도구가 반복해서 사용 할 수 있으므로 짧어야한다. 예를 들어 음성 합성 장치는 어떤 셀의 내용을 말하기 전에 관련 된 생략 헤더들을 표현 할 수 있다.
axis = cdata [대소문자 구별 없이: CI]
이 애트리뷰트는 셀을 한 연속 된 공간들(n-dimensional space) 안에서 주축(axes)의 형성의 개념적 카테고리들에 넣을 때 사용된다. 사용도구는 사용자가 이들 카테고리들에 접근 할 수 있게 한다(예를 들어, 사용자는 사용도구에게 어떤 카테고리에 소속 된 모든 셀들을 요청(query) 할 수 있고, 사용도구는 목차 형태로 표를 표현 할 수 있는 등). 추가 정보는 셀의 카테고리화(categorizing cells)를 참조하라. 이 애트리뷰트의 값은 카테고리 이름 목록에서 콤마(,)로 분리된다.
rowspan = number [대소문자 중립: CN]
이 애트리뷰트는 현재 셀에 의하여 확장(span) 된 열들의 갯수를 지정한다. 디폴트 값은 "1"이다. 값이 "0"이면 표의 현재의 줄부터 마지막 줄까지의 모든 줄들을 통합(THEAD, TBODY, 또는 TFOOT)하는 것을 의미한다.
colspan = number [대소문자 중립: CN]
이 애트리뷰트는 현재 셀)에 의하여 확장된 컬럼들의 갯수를 지정한다. 디폴트 값은 "1"이다. 값이 "0"이면 표의 현재의 컬럼부터 마지막 컬럼까지의 모든 컬럼들을 컬럼 그룹(COLGROUP)으로 통합하는 것을 의미한다.
nowrap [대소문자 구별 없이: CI]
불량한 것이다. 이 불린(boolean) 애트리뷰트가 기술되면, 보는(visual) 사용도구는 이 셀에서 자동적인 줄마꿈을 중지시키도록 지정하는 것이다. 자동 줄바꿈 효과를 위해서는 이 애트리뷰트 대신에 스타일쉬트를 사용하여야 한다. 주석: 조심하여 사용하면 이 애트리뷰트는 아주 넓은 셀에서도 사용 될 수 있다.
width = pixels [대소문자 중립: CN]
불량한 것이다. 이 애트리뷰트는 사용도구에게 추천되는 셀의 너비를 알려준다.
height = pixels [대소문자 중립: CN]
불량한 것이다. 이 애트리뷰트는 사용도구에게 추천되는 셀의 높이를 알려준다.
다른 곳에서 정의 된 애트리뷰트

표의 셀은 헤더 정보(header)와 데이터 정보(data)의 두 종류의 정보를 가질 수 있다. 이 구분은 사용도구가 헤더 정보와 데이터 정보를 스타일쉬트에서 조차 다르게 표현 할 수 있다. 예를 들어, 보는(visual) 사용도구는 헤더 정보를 굵은 글자로 표현 할 수 있고, 음성 합성 장치에서는 헤더 정보를 구별되는 음성으로 말 할 수 있다.

TH(table head) 엘레멘트는 헤더 정보를 갖는 셀을 정의한다. 사용도구는 TH 엘레멘트의 내용과 abbr 애트리뷰트의 값의 두가지 가능 한 헤더 정보를 갖는다. 사용도구는 셀의 내용이나 abbr 애트리뷰트의 값을 표현해야 한다. 보는(visual) 장치(media)에서 셀의 내용을 완전히 표시하기에 충분한 공간을 가지고 있으면, 후자가 더 적당하다. 보이지 않는(non-visual) 장치에서 abbr는 적용하고 있는 셀들의 내용과 같이 표현 될 때 표 머릿글의 요약으로 사용 될 수 있다.

header, scope 애트리뷰트도 제작자가 보이지 않는 사용도구의 헤더 정보를 처리 함을 도와 준다. 보이지 않는 사용도구에서 셀 라벨링의 정보와 예제를 참조하라.

TD(table data) 엘레멘트는 데이터를 갖는 셀을 정의한다.

셀은 빈 것(데이터를 가지고 있지 않음) 일 수가 있다.

예를 들어, 다음 표는 4개의 데이터 컬럼들을 가지고, 각 각은 컬럼을 설명 한 헤더를 가지고 있다.

<TABLE
 summary="상원의원이 소비하는 커피의 잔 수, 커피의 종류(카페인 제거 한
	 또는 보통)와 설탕을 첨가하는가를 도식화 한 표이다." BORDER=1>
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR>
    <TH>성명</TH>
    <TH>컵 수</TH>
    <TH>커피의 종류</TH>
    <TH>설탕은 ?</TH>
 <TR>
    <TD>T. Sexton</TD>
    <TD>10</TD>
    <TD>Espresso</TD>
    <TD>무첨가</TD>
 <TR>
    <TD>J. Dinnen</TD>
    <TD>5</TD>
    <TD>카페인 제거 커피</TD>
    <TD>첨가</TD>
</TABLE>

사용도구는 터미날(tty)에서 다음과 같이 표현한다.

성명       컵 수      커피의 종류        설탕은 ?
T. Sexton    10         Espresso              무첨가
J. Dinnen    5          카페인 제거 커피      첨가

귀하의 브라우저로는

상원의원이 소비하는 커피의 잔 수
성명 컵 수 커피의 종류 설탕은 ?
T. Sexton 10 Espresso 무첨가
J. Dinnen 5 카페인 제거 커피 첨가

여러개의 열 혹은 컬럼을 통합(span)하는 셀

셀은 여러개의 열 혹은 컬럼을 통합 할 수 있다. 셀에 확장 된 줄 혹은 컬럼의 갯수는 THTD 엘레멘트에서 rowspancolspan 애트리뷰트에 의해 설정된다.

예제 표에서 네번째 줄의 셀에서, 두번째 컬럼이 그 컬럼을 포함하여 총 세개의 컬럼을 통합하도록 하였다.

<TABLE border="1">
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR><TH>성명<TH>컵 수<TH>커피의 종류<TH>설탕은 ?
 <TR><TD>T. Sexton<TD>10<TD>Espresso<TD>무첨가
 <TR><TD>J. Dinnen<TD>5<TD>카페인 제거 커피<TD>첨가
 <TR><TD>A. Soria<TD colspan="3"><em>자료 없음</em>
</TABLE>

사용도구는 터미날(tty)에서 다음과 같이 표현한다.

상원의원이 소비하는 커피의 잔 수
----------------------------------------------
| 성명    |컵 수|커피의 종류     |설탕은 ? |
----------------------------------------------
|T. Sexton |10   |Espresso         |무첨가   |
----------------------------------------------
|J. Dinnen |5    |카페인 제거 커피 |첨가     |
----------------------------------------------
|A. Soria  |자료 없음                        |
----------------------------------------------

귀하의 브라우저로

상원의원이 소비하는 커피의 잔 수
성명컵 수커피의 종류설탕은 ?
T. Sexton10Espresso무첨가
J. Dinnen5카페인 제거 커피첨가
A. Soria자료 없음

다음 예제는 한개 이상의 열 또는 컬럼의 통합이 어떻게 뒤의 셀에 영향을 주도록 셀에 지정하는가를 설명한다(표의 테두리의 도움으로).

<TABLE border="1">
 <TR><TD>1 <TD rowspan="2">2 <TD>3
 <TR><TD>4 <TD>6
 <TR><TD>7 <TD>8 <TD>9
</TABLE>

2번 셀은 첫번째와 두번째 줄을 통합하고, 두번째 줄은 셀을 두 번 지정한다. 그래서 두번째 줄의 두번째 TD는 실제로은 그 줄의 세번째 셀을 정의 한 것이다. 결과,

터미날(tty)에서
-------------|
1   | 2 | 3  |
----|   |----|
4   |   | 6  |
----|---|----|
7   | 8 | 9  |
-------------|

귀하의 브라우저로

123
46
789

그래팩 사용도구에서는(영문 원문 그래픽)

Image of a table with rowspan=2 (영문 원문 그래픽)

만일 "6"번 셀의 TD 정의가 생략되면 사용도구는 전체 그 열에 셀을 추가 할 것이다.

같은 방식으로, 다음 표를 보면

<TABLE border="1">
 <TR><TD>1 <TD>2 <TD>3
 <TR><TD colspan="2">4 <TD>6
 <TR><TD>7 <TD>8 <TD>9
</TABLE>

"4"번 셀은 두개의 컬럼(column)을 통합(span)하여 그 줄의 두번째 TD는 실제적으로는 세번째 셀("6")을 정의한 것이다.

귀하의 브라우저로

123
46
789

일반 그래팩 사용도구에서는(영문 원문 그래픽)

Image of a table with colspan=2 (영문 원문 그래픽)

셀들을 중복해서 정의하는 것은 오류(error)이다. 사용도구가 이 오류를 어떻게 처리하는가는 사용도구에 따라 다르다

틀린 예제:
다음 틀린 예제에서는 어떻게 셀들이 중복해서 정의 될 수 있는가를 설명한다. 이 표의 "5"번 셀은 두 줄을 통합하고, "7"번 셀은 두 컬럼을 통합하는데, 이는 "7"번과 "9"번 셀 사이에 중복을 만든다.
<TABLE border="1">
 <TR><TD>1 <TD>2 <TD>3
 <TR><TD>4 <TD rowspan="2">5 <TD>6
 <TR><TD colspan="2">7 <TD>9
</TABLE>

귀하의 브라우저로

123
456
789

11.3 사용도구에 의 한 표의 양식화(formatting)

주석: 다음 항목들은 보는 양식화(visual formatting)와 관련 된 HTML 표 애트리뷰트를 설명한다. 스타일쉬트(style sheet)가 보는 표의 양식화에 보다 나은 제어를 제공하지만, 이규격이 처음 발행된 때의 번역문 CSS1으로는 보는 표의 양식화 견지에서 모든 사항을 제어하지는 못하였으나, 그 후 번역문 CSS2에서는 이 표의 보이는 양식화을 할 수 있는 특성들이 보완되었다.

HTML 4는 다음 제어 기능들을 가진다.

11.3.1 테두리(border)와 줄(rule)

다음 애트리뷰트들은 표의 외부 틀(frame)과 내부의 줄(rule)에 영향을 준다.

애트리뷰트의 정의

frame = void | above | below | hsides | lhs | rhs | vsides | box | border [대소문자 구별 없이: CI]
이 애트리뷰트는 표를 둘러싸고 있는 프레임의 어느 쪽을 보일 것인가를 지정해 주며 가능한 값은:
  • void: 디폴트 값이며 아무 쪽도 보이지 않는다.
  • above: 위쪽만 보인다.
  • below: 아래쪽만 모인다.
  • hsides: 위쪽과 아래쪽만 보인다.
  • vsides: 오른쪽과 왼쪽만 보인다.
  • lhs: 왼쪽만 보인다.
  • rhs: 오른쪽만 보인다.
  • box: 사방 모든 쪽을 보인다.
  • border: 사방 모든 쪽을 보인다.
rules = none | groups | rows | cols | all [대소문자 구별 없이: CI]
이 애트리뷰트는 어느 표의 셀과 셀사이에 줄(rule)이 나타 날 것인가를 지정하며, 사용도구에 따라 표현이 다르며, 가능한 값은:
  • none: 디폴트 값이며 아무 줄도 보이지 않는다.
  • groups: 줄은 줄 구룹(THEAD, TFOOT, TBODY)과 컬럼구룹(COLGROUP, COL) 안에서만 나타난다.
  • rows: 줄은 열(row) 안에서만 나타난다.
  • cols: 줄은 컬럼(column) 안에서만 나타난다.
  • all: 줄은 모든 열과 컬럼 안에서 나타난다.
border = pixels [대소문자 중립: CN]
이 애트리뷰트는 표 테두리(주위의 프레임의 두께)를 픽셀(pixel) 수로 만 지정한다. 아래 이 애트리뷰트의 추가 정보를 참조하라.

표 셀사이의 구별을 돕기 위하여 TABLE 엘레멘트의 border 애트리뷰트 설정 할 수 있다. 앞의 예제에서:

<TABLE BORDER=1
 summary="상원의원이 소비하는 커피의 잔 수, 커피의 종류(카페인 제거 한
	또는 보통)와 설탕을 첨가하는가를 도식화 한 표이다.">
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR>
    <TH>성명</TH>
    <TH>컵 수</TH>
    <TH>커피의 종류</TH>
    <TH>설탕은 ?</TH>
 <TR>
    <TD>T. Sexton</TD>
    <TD>10</TD>
    <TD>Espresso</TD>
    <TD>무첨가</TD>
 <TR>
    <TD>J. Dinnen</TD>
    <TD>5</TD>
    <TD>카페인 제거 커피</TD>
    <TD>첨가</TD>
</TABLE>

다음 예제에서 사용도구는 표의 왼쪽과 오른쪽에 두께가 5 픽셀 인 테두리를 표현하고, 각 컬럼 사이에 수직으로 줄을 표현한다.

<TABLE border="5" frame="vsides" rules="cols">
 <TR><TD>1 <TD>2 <TD>3
 <TR><TD>4 <TD>5 <TD>6
 <TR><TD>7 <TD>8 <TD>9
</TABLE>

귀하의 브라우저로

123
456
789

다음 설정들은 사용도구의 과거 버전에 부합하도록 고려되어야 한다.

예를 들어 다음 두 지정은 같다.

<TABLE border="2">
<TABLE border="2" frame="border" rules="all">

그리고

<TABLE border>
<TABLE frame="border" rules="all">

주석: border 애트리뷰트는 OBJECTIMG 엘레멘트에도 테두리 특성을 지정하나, 이 엘레멘트들에서는 다른 값을 갖는다.

11.3.2 수평 정렬과 수직 정렬

다음 애트리뷰트들은 그들의 정의에 따라 다른 표 엘레멘트를 설정한다.

<!-- 셀 내용의 수평 정렬 애트리뷰트 -->
<!ENTITY % cellhalign
 "align      (left | center | right | justify | char) #IMPLIED
  char       %Character;   #IMPLIED -- 정렬 글자(alignment char 예: char=':')--
  charoff    %Length;      #IMPLIED -- 정렬 글자 해제(offset) --"
>
<!-- 셀 내용의 수직 정렬 애트리뷰트 -->
<!ENTITY % cellvalign
 "valign     (top | middle | bottom | baseline) #IMPLIED"
>

애트리뷰트의 정의

align = left | center | right | justify | char [대소문자 구별 없이: CI]
이 애트리뷰트는 셀 안에서의 데이터와 텍스트의 수평 정렬을 지정하며ㅣ 사용 가능한 값은:
  • left: 왼쪽에 정렬. 표의 데이터에서 디폴트 값 임.
  • center: 가운데 정렬. 표의 헤더에서 디폴트 값 임.
  • right: 오른쪽 정렬.
  • justify: 양쪽 정렬(double-justify).
  • char: 지정한 글자를 기준으로 텍스트 정렬. 만일 사용도구가 글자 기준 정렬을 지원하지않으면, 이 값의 처리는 지정되지 않았다.
valign = top | middle | bottom | baseline [대소문자 구별 없이: CI]
이 애트리뷰트는 셀 안에서의 데이터와 텍스트의 수직 정렬을 지정하며, 사용 가능한 값은:
  • top: 수직 셀의 위쪽 정렬.
  • middle: 수직 셀의 중간 정렬. 디폴트 값 임.
  • bottom: 수직 셀의 아래쪽에 정렬.
  • baseline: valign 애트리뷰트 값을 가진 셀과 같은 열의 모든 셀은 첫번째 텍스트 라인이 그 열의 모든 셀에 공통적으로 적용 되도록 기초 라인(baseline)에 텍스트를 위치 시킨다. 이는 다름 열들의 해당 셀에는 적용되지 않는다.
char = character [대소문자 중립: CN]
이 애트리뷰트는 텍스트 속에서 정렬을 위 한 축(axis)이되는 글자를 지정한다. 이 애트리뷰트의 디폴트 값은 lang 애트리뷰트에 지정한 현재 언어의 10진수 글자(예: 영어에서(".")이고 불어에서(",")임)이다. 사용도구는 이 애트리뷰트를 지원 할 필요는 없다.
charoff = length [대소문자 중립: CN]
이 애트리뷰트가 있으면 각 열에서 첫번째 정렬 글자(char)를 설정 해제(offset)한다. 만일 열에 정렬 글자가 포함되지 않았으면, 이것은 정렬 위치까지 수평적으로 끝까지 이동 된다.

정렬 글자의 해제를 위하여 charoff가 사용되면, 해제 된 방향은 dir 애트리뷰트에 의하여 설정 된 현재 글자 방향으로된다. 왼쪽에서 오른쪽으로 쓰는 글(디폴트)에서 해제는 왼쪽 마진으로 부터이고, 오른쪽에서 왼쪽으로 쓰는 글(디폴트)에서 해제는 오른쪽 마진으로 부터이다. 사용도구는 이 애트리뷰트를 지원 할 필요는 없다.

예제 표에는 정렬 글자를 "." 설정하여, 열의 현재 값을 10진수 점(.)을 축으로 정렬한다.

<TABLE border="1">
 <COLGROUP>
   <COL align="char" char=".">
 <THEAD>
   <TR><TH>채소 <TH>Kg 단가
 <TBODY>
   <TR><TD>상치<TD>$1
   <TR><TD>당근<TD>$10.50
   <TR><TD>무우<TD>$100.30
</TABLE>

양식화 된 표는 다음과 비슷 할 것이다.

--------------------
|채소      |Kg 단가 |
|----------|--------|
|상치      |   $1   |
|----------|--------|
|당근      |  $10.50|
|----------|--------|
|무우      | $100.30|
---------------------

그러나 이 기능은 브라우저에 따라 다르고, 귀하의 브라우저로는

채소 Kg 단가
상치$1
당근$10.50
무우$100.30

셀의 내용이 하나를 초과하는 char로 지정 된 정렬 글자를 가지고, 내용이 자동 줄바꿈(wrap)을 하는 경우, 사용도구의 작용은 정의되어 있지 않으므로, 제작자는 char 사용에 주의하여야 한다.

주석: 보는(visual) 사용도구는 TH 엘레멘트의 내용을 전형적으로 수평과 수직 가운데 배치하고 굵은(bold) 글자로 표현한다.

정렬 규격의 전달(inheritance)

셀 내용의 정렬은 셀 단위로 지정되거나, 또는 열, 컬럼 혹은 표 자체의 엘레멘트에서 기본적으로 지정 된 특성을 전달(inheritance) 받을 수 있다.

align, char, charoff의 적용 우선 순위는 다음과 같다(위서부터 아래로).

  1. 셀의 데이터 안의 엘레멘트에 설정 된 정렬(alignment) 애트리뷰트(예: P).
  2. THTD 셀에 설정 된 정렬 애트리뷰트.
  3. 컬럼구룹 엘레멘트(COLCOLGROUP) 안에 설정 된 정렬 애트리뷰트. 셀이 복수-컬럼에 확장(span) 되었으면, 정렬 특성은 확장이 지정이 시작 된 셀에서 부터 확장 된 셀까지 전달하여 지정한다.
  4. 열 구룹 엘레멘트(TR, THEAD, TFOOT, TBODY) 안에 설정 된 정렬 애트리뷰트. 셀이 복수-열에 확장 되었으면, 정렬 특성은 확장이 지정이 시작 된 셀에서 부터 확장 된 셀까지 전달하여 지정한다.
  5. TABLE 엘레멘트에 설정 된 정렬(alignment) 애트리뷰트.
  6. 디폴트 정렬 값.

valign(및 다른 전달 애트리뷰트), lang, dir, style의 적용 우선 순위는 다음과 같다(위서부터 아래로).

  1. P등 셀에 설정 된 애트리뷰트.
  2. THTD 셀에 설정 된 애트리뷰트.
  3. 열 또는 열 구룹 엘레멘트(TR, THEAD, TFOOT, TBODY) 안에 설정 된 애트리뷰트. 셀이 복수-열에 확장 되었으면, 특성은 확장이 지정이 시작 된 셀에서 부터 확장 된 셀까지 전달하여 지정한다.
  4. 컬럼구룹 엘레멘트(COLCOLGROUP) 안에 설정 된 애트리뷰트. 셀이 복수-컬럼에 확장 되었으면, 특성은 확장이 지정이 시작 된 셀에서 부터 확장 된 셀까지 전달하여 지정한다.
  5. TABLE 엘레멘트에 설정 된 애트리뷰트.
  6. 디폴트 값.

또 한 수평 정렬에서는 열보다 컬럼에 의하여 셀이 표현되고, 수직 정렬에서는 컬럼보다는 열에 의하여 셀이 표현된다.

셀의 정렬 디폴트 값은 사용도구에 따라 다르나, 사용도구는 모든 경우에 왼쪽이 아니고 현재 방향성의 디폴트 애트리뷰트로 바꾸어야 한다.

사용도구가 align 애트리뷰트에서 값 "justify"를 지원하지 않으면, 여기에 전달 된 값를 사용해야 한다.

주석: 셀에 전달 되는 값이 모체 창(parent)이 아니고, 확장(span) 된 경우, 확장 한 첫번째 셀으로 부터 전달(inherit) 됨에 주의하라. 이것은 일반적인 전달 규칙에서 예외이다.

11.3.3 셀(cell)의 마진(margin)

애트리뷰트의 정의

cellspacing = length[대소문자 중립: CN]
이 애트리뷰트는 사용도구가 얼마나 많은 공간을 넣을 것인가를 지정한다. 표의 왼쪽과 왼쪽 끝에 있는 셀과 사이, 맨 위와 맨 위쪽 줄의 위쪽 끝과의 사이, 같은 방식으로 오른쪽, 아래쪽 사이를 지정한다. 이 애트리뷰트는 또한 셀들 사이에 남길 공간을 지정한다.
cellpadding = length [대소문자 중립: CN]
이 애트리뷰트는 셀의 테두리(border)와 그 내용 사이의 간격의 크기를 지정한다. 만일 이 애트리뷰트의 값은 픽셀(pixel) 길이를 가지면, 사방(margin)에 그 거리 만큼 내용 주위에 거리를 준다. 그 값이 백분율 길이이면, 위와 아래 마진은 내용으로 부터 가용 수직 공간에 대 한 백분율로, 왼쪽과 오른쪽 마진은 내용으로 부터 가용 수평 공간에 대 한 백분율로 균등하게 분배된다.

이 두 애트리뷰트들은 셀들의 사이에서와 셀의 안에서 간격을 지정하며, 그 관계를 아래 설명하였다.

cellspacing과 cellpadding 애트리뷰트를 설명 한 이미지(영문 원문 그래픽).

다음 예제에서 cellspacing 애트리뷰트는 셀들이 표의 외곽으로부터 각 방향에서 20 픽셀 떨어 진다고 지정한다. cellpadding 애트리뷰트는 셀의 위 마진과 아래 마진이 셀의 내용과 전체 가용 수직 공간의 10% 만큼 셀의 테두리에서 떨어진다(합계 20%)는 것을 지정하고, 같은 방식으로 왼쪽 마진과 오른쪽 마진이 셀의 내용과 전체 가용 수평 공간의 10% 만큼 셀의 테두리에서 떨어진다(합계 20%)는 것을 지정한다.

<TABLE cellspacing="20" cellpadding="20%">
 <TR><TD>Data1 <TD>Data2 <TD>Data3
</TABLE>

만일 표 또는 주어진 컬럼이 고정 너비를 가진다면, cellspacingcellpadding는 지정 된 너비보다 더 많은 공간을 필요로 할 수 있다. 상호 모순되면 사용도구는 이들 애트리뷰트를 width 애트리뷰트보다 우선 적용 할 수 있고, 그렇지 않을 수 도 있다.

11.4 보이지 않는 사용도구에 의한 표의 표현

11.4.1 헤더(header) 정보와 데이터 셀들의 연관

음성 합성 장치나 점자 장치등 보이지 않는(non-visual) 사용도구는 다음 TDTH 엘레멘트 애트리뷰트로 보다 효과적인 표의 표현을 할 수 있다.

예제에는 headers 애트리뷰트로 셀에 헤더정보를 설정하였다. 같은 컬럼의 각 셀은 id 애트리뷰트로 같은 헤더 셀을 참조한다.

<TABLE BORDER=1
 summary="상원의원이 소비하는 커피의 잔 수, 커피의 종류(카페인 제거 한 또는
	 보통)와 설탕을 첨가하는가를 도식화 한 표이다.">
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR>
    <TH id="t1">성명</TH>
    <TH id="t2">컵 수</TH>
    <TH id="t3" abbr="종류">커피의 종류</TH>
    <TH id="t4">설탕은</TH>
 <TR>
    <TD headers="t1">T. Sexton</TD>
    <TD headers="t2">10</TD>
    <TD headers="t3">Espresso</TD>
    <TD headers="t4">무첨가</TD>
 <TR>
    <TD headers="t1">J. Dinnen</TD>
    <TD headers="t2">5</TD>
    <TD headers="t3">카페인 제거 커피</TD>
    <TD headers="t4">첨가</TD>
</TABLE>

이 표는 음성 합성 장치에서 다음과 같이 표현 될 수 있다.

Caption: 상원의원이 소비하는 커피의 잔 수
summary="상원의원이 소비하는 커피의 잔 수, 
  커피의 종류(카페인 제거 한 또는 보통)와 설탕을 첨가하는가를
  도식화 한 표이다.
성명: T. Sexton,   컵 수: 10,   종류: Espresso,	   설탕은: 무첨가
성명: J. Dinnen,   컵 수: 5,    종류: 카페인 제거 커피,   설탕은: 첨가

헤더 "커피의 종류"가 abbr 애트리뷰트 사용으로 어떻게 생략 헤더 "종류"으로 되었는가 주의하라.

같은 예제에서 headers 애트리뷰트를 scope 애트리뷰트로 바꾼 것이다.

scope 애트리뷰트의 값 "col"은 "현재 컬럼의 모든 셀들"을 의미한다.

<TABLE BORDER=1
 summary="상원의원이 소비하는 커피의 잔 수, 커피의 종류(카페인 제거 한
	또는 보통)와 설탕을 첨가하는가를 도식화 한 표이다.">
 <CAPTION>상원의원이 소비하는 커피의 잔 수</CAPTION>
 <TR>
   <TH scope="col">성명</TH>
   <TH scope="col">컵 수</TH>
   <TH scope="col"abbr="종류">커피의 종류</TH>
   <TH scope="col">설탕은</TH>
 <TR>
   <TD>T. Sexton</TD>
   <TD>10</TD>
   <TD>Espresso</TD>
   <TD>무첨가</TD>
 <TR>
   <TD>J. Dinnen</TD>
   <TD>5</TD>
   <TD>카페인 제거 커피</TD>
   <TD>첨가</TD>
</TABLE>

아래는 scope 애트리뷰트에 다른 값를 갖는 더 복잡 한 예제이다.

<TABLE border="1" cellpadding="5" cellspacing="2"
 summary="Bath 지역 사회에서 제공하는 역사 과정들을
	과정명, 강사, 요약, 코드와 요금으로 정리>
 <TR>
   <TH colspan="5" scope="colgroup">지역 사회 과정들 -- Bath 1997년 가을 </TH>
 </TR>
 <TR>
   <TH scope="col" abbr="이름">과정명</TH>
   <TH scope="col" abbr="강사">과정 강사</TH>
   <TH scope="col">요약</TH>
   <TH scope="col">코드</TH>
   <TH scope="col">요금</TH>
 </TR>
 <TR>
   <TD scope="row">내전 이후</TD>
   <TD>Dr. John Wroughton</TD>
   <TD>이 과정에서는 1646년 이후 영국에서의 불안정 한 기간을 점검한다.
       <I>10월 13일 월요일 시작 6주간 만남</I>.
   </TD>
   <TD>H27</TD>
   <TD>&pound;32</TD>
 </TR>
 <TR>
   <TD scope="row">앵글로-색슨 영국의 소개</TD>
   <TD>Mark Cottle</TD>
   <TD>하루 과정의 앵글로-색슨 재편 기간인 중세기의 초기와 그들 사회의 소개.
      <I>10월 18일 토요일</I>.
   </TD>
   <TD>H28</TD>
   <TD>&pound;18</TD>
 </TR>
 <TR>
   <TD scope="row">그리스의 영광</TD>
   <TD>Valerie Lorenz</TD>
   <TD>민주 주의, 철학, 극장의 중심지, 토론의 집들의 근원지.
    로마가 이루었을 것이지만 그리스가 먼저 이루었다.
    <I>1997년 10월 25일 토요학교</I>.
   </TD>
   <TD>H30</TD>
   <TD>&pound;18</TD>
 </TR>
</TABLE>

귀하의 브라우저로

지역 사회 과정들 -- Bath 1997년 가을
과정명 과정 강사 요약 코드 요금
내전 이후 Dr. John Wroughton 이 과정에서는 1646년 이후 영국에서의 불안정 한 기간을 점검한다. 10월 13일 월요일 시작 6주간 만남. H27 £32
앵글로-색슨 영국의 소개 Mark Cottle 하루 과정의 앵글로-색슨 재편 기간인 중세기의 초기와 그들 사회의 소개. 10월 18일 토요일. H28 £18
그리스의 영광 Valerie Lorenz 민주 주의, 철학, 극장의 중심지, 토론의 집들의 근원지. 로마가 이루었을 것이지만 그리스가 먼저 이루었다. 1997년 10월 25일 토요학교. H30 £18

그래픽 사용도구는 다음과 같이 표현 할 것이다(영문 원문 그래픽).

A table with merged cells(영문 원문 그래픽)

scope 애트리뷰트의 값에 "row"를 사용 한 것에 주의하라. 각 열의 첫번째 셀에는 헤더 정보가 아닌 데이터를 가지고 있지만, scope 애트리뷰트는 그 데이터 셀을 열의 헤더 셀 처럼 작용하도록한다. 이 음성 합성 장치에게 요청에 의하거나 각 셀의 내용을 시작하기 바로 전에 해당 과정명을 제공한다

11.4.2 셀들의 카테고리화(categorizing)

사용자가 음성 사용도구로 표를 볼 때, 셀들의 자체 내용에 추가적으로 셀에 대 한 설명을 듣기를 원 할 수 있다. 하나의 방법은 사용자가 데이터 셀의 내용을 말하기 전에, 관련 된 헤더 정보를 말 함으로서 설명를 제공 할 수 있다(데이터 셀과 연관 된 헤더 정보 참조).

사용자는 또한 한 셀보다 많은 셀들에 대 한 정보를 원 할 수 있는데, 이런 경우, 셀 수준의 헤더 정보(headers, scope, abbr)로는 적정한 내용을 제공하지 못 할 수가 있다.

두 지역(San Jose와 Seattle)에서의 몇일간 비용을 meals(식대), hotels(호텔비), transport(운임)로 분류 된 다음의 표를 보라.

두 지역(San Jose와 Seattle)에서의 몇일간 비용을 meals(식대), hotels(호텔비), transport(운임)로 분류하여 소계등을 보여주는 표의 이미지(영문 원문 그래픽)
사용자는 표로부터 다음과 같은 요청으로 정보를 추출하기를 원 할 수 있다.
  • "나는 나의 모든 식대(meals)에 얼마나 지불 했나?"
  • "나는 나의 8월 25일 식대(meals)에 얼마나 지불 했나?"
  • "나는 나의 San Jose에서 모든 비용을 얼마나 지불 했나?"

각 요청은 사용도구에 의한 0셀 혹은 여러 셀들의 계산과 관련한다. 예를 들어 8월 25일 식대를 산출하기 위하여 사용도구는 표의 어느 셀들이 식비("meals")를 참조하고, 어느 셀들이 날자("dates":구체적으로 "25 August")를 참조하는가를 알아야 하고, 이 두 설정이 맞는 항목을 찾아야 한다.

이 종류의 요청사항을 달성하기 위해서, HTML 4의 표 모델은 제작자가 셀의 헤더와 데이터를 카테고리(categories)로 묶는 것을 허용한다. 예를 들어 여행 비용 표에서 제작자는 헤더 셀들을 "San Jose"와 "Seattle"로 구룹 지우고, "Location" 카테고리로 만들고, headers "Meals", "Hotels"과 "Transport" 헤더들을 "Expenses" 카테고리로 하고, 네개의 날자를 "Date" 카테고리로 할 수 있다. 위 3개의 문제는 다음과 같은 의미가 될 것이다.

  • "나는 나의 모든 식대(meals)에 얼마나 지불 했나?"는
    "어떤 셀들이 카테고리 'Expenses=Meals'의 테이터 셀을 갖고 있는가?"를 의미한다.
  • "나는 나의 8월 25일 식대(meals)에 얼마나 지불 했나?"는
    "어떤 셀들이 카테고리 'Expenses=Meals'와 'Date=Aug-25-1997'의 테이터 셀을 갖고 있는가?"를 의미한다.
  • "나는 나의 San Jose에서 모든 비용을 얼마나 지불 했나?"는
    "어떤 셀들이 카테고리 'Expenses=Meals, Hotels, Transport'와 'Location=San Jose'의 테이터 셀을 갖고 있는가?"를 의미한다.

제작자는 헤더나 데이터 셀을 셀에 axis 애트리뷰트를 설정함으로서 카테고리화 한다. 예를 들어 위 여행 비용 표에서, 정보 "San Jose"을 갖는 셀을 카테고리 "Location" 안에 다음과 같이 위치 시킬 수 있다.

 <TH id="a6" axis="location">San Jose</TH>

모든 "San Jose"에 관련 된 정보는 headers또는 scope 애트리뷰트를 통 해 이 셀의 헤더를 조회 할 것이다. 그래서 1997년 8월 25일의 식비는 "San Jose" 헤더 셀의 id 애트리뷰트(여기서 값 "a6")를 조회하도록 작성되어야 한다.

<TD headers="a6">37.74</TD>

headers 애트리뷰트는 id 참조 목록을 제공한다. 그래서 제작자는 주어 진 셀을 여러 방식(또는 여러개의 헤더들과 더부러)으로 카테고리화 시킬 수 있다.

이 여행 비용 표를 카테고리 정보를 사용하여 아래 작성하였다,

<TABLE border="1" summary="이 표는 여행 비용을
    8월 San Jose와 Seattle 여행 중 발생 한 비용을 요약 한 것 임">
<CAPTION>여행 비용 보고서</CAPTION>
<TR>
 <TH></TH>
 <TH id="a2" axis="expenses">Meals</TH>
 <TH id="a3" axis="expenses">Hotels</TH>
 <TH id="a4" axis="expenses">Transport</TH>
 <TD>subtotals</TD>
</TR>
<TR>
 <TH id="a6" axis="location">San Jose</TH>
 <TH></TH>
 <TH></TH>
 <TH></TH>
 <TD></TD>
</TR>
<TR>
 <TD id="a7" axis="date">25-Aug-97</TD>
 <TD headers="a6 a7 a2">37.74</TD>
 <TD headers="a6 a7 a3">112.00</TD>
 <TD headers="a6 a7 a4">45.00</TD>
 <TD></TD>
</TR>
<TR>
 <TD id="a8" axis="date">26-Aug-97</TD>
 <TD headers="a6 a8 a2">27.28</TD>
 <TD headers="a6 a8 a3">112.00</TD>
 <TD headers="a6 a8 a4">45.00</TD>
 <TD></TD>
</TR>
<TR>
 <TD>subtotals</TD>
 <TD>65.02</TD>
 <TD>224.00</TD>
 <TD>90.00</TD>
 <TD>379.02</TD>
</TR>
<TR>
 <TH id="a10" axis="location">Seattle</TH>
 <TH></TH>
 <TH></TH>
 <TH></TH>
 <TD></TD>
</TR>
<TR>
 <TD id="a11" axis="date">27-Aug-97</TD>
 <TD headers="a10 a11 a2">96.25</TD>
 <TD headers="a10 a11 a3">109.00</TD>
 <TD headers="a10 a11 a4">36.00</TD>
 <TD></TD>
</TR>
<TR>
 <TD id="a12" axis="date">28-Aug-97</TD>
 <TD headers="a10 a12 a2">35.00</TD>
 <TD headers="a10 a12 a3">109.00</TD>
 <TD headers="a10 a12 a4">36.00</TD>
 <TD></TD>
</TR>
<TR>
 <TD>subtotals</TD>
 <TD>131.25</TD>
 <TD>218.00</TD>
 <TD>72.00</TD>
 <TD>421.25</TD>
</TR>
<TR>
 <TH>Totals</TH>
 <TD>196.27</TD>
 <TD>442.00</TD>
 <TD>162.00</TD>
 <TD>800.27</TD>
</TR>
</TABLE>

이 표를 이렇게 작성 한 것은 사용도구가 사용자로 하여금 필요 없는 정보와 혼동을 피하기 도록 하였슴에 주의하라. 예를 들어 만일 음성 합성 장치가 "나는 나의 모든 식대(meals)에 얼마나 지불 했나 ?"의 요청에 답하기 위하여 모든 "Meals" 컬럼의 갯수치를 읽는다면, 사용자는 소계나 합계를 일별 데이터와 구별 할 수 없을 것이다. 셀 데이터의 조심스러운 카테고리화로 제작자는 사용도구가 표현 할 때, 중요한 부분의 구분을 줄 수 있도록 할 수 있다.

물론, 제작자가 어떻게 표의 정보를 카테고리화 하는가에 대한 제한은 없다. 예를 들어 여행 비용 표에서 추가적인 카테고리 "subtotals"과 "totals"을 사용 할수 있다.

이 규격에서는 사용도구가 axis 애트리뷰트에 의해 제공 된 정보를 처리 할 필요가 없고, axis에 의해 제공 된 정보를 사용도구에게 어떻게 처리 할 것인가 또는 사용자가 사용도구에 어떻게 정보를 요청 할 것인가 하는 추천사항도 포함되어 있지 않다.

그러나, 특히 음성 합성 장치와 같은 사용도구들은 요청에 대한 결과의 여러 셀에 공통 요소를 원 할 수 있다. 예를 들어 만일 사용자가 "나는 나의 San Jose에서 식비를 얼마나 지불 했나 ?"를 요청 할 때, 사용도구는 먼저 해당 되는 셀들을 찾아낸 다음, 이 정보를 표시 할 것이다. 사용도구는 다음과 같이 말 할 것이다.

  Location: San Jose. Date: 25-Aug-1997. Expenses, Meals: 37.74
  Location: San Jose. Date: 26-Aug-1997. Expenses, Meals: 27.28

또는 더 함축적으로:

  San Jose, 25-Aug-1997, Meals: 37.74
  San Jose, 26-Aug-1997, Meals: 27.28

더 경제적인 표현은 공통의 정보 요소를 찾아:

  San Jose, Meals, 25-Aug-1997: 37.74
                   26-Aug-1997: 27.28

이 타입의 표현을 지원하는 사용도구는 사용도구가 표현을 꾸미는 수단(예를 들어 스타일쉬트를 통하여)을 제공 할 수 있다.

11.4.3 헤더(header) 정보를 찾는 기능(algorithm)

scope 또는 headers 애트리뷰트에 의한 헤더(header) 정보가 없을 경우 사용도구는 다음 기능에 의하여 헤더 정보를 형성 할 수 있다. 이 기능의 목표는 헤더의 번호있는 목록을 찾는 것이다. 다음 그 기능의 설명에서 표의 방향성은 왼쪽에서 오른쪽으로 가정한다.

11.5 표(table)의 예제

이 열과 컬럼 구룹의 예제는 Nadine Kano의 "Developing International Software"에서 인용되었다.

"ascii art"에서, 다음 표를 인용:

<TABLE border="2" frame="hsides" rules="groups"
         summary="Code page support in different versions of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>

이는 다음과 처럼 표현 될 것이다.

                 CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
==============================================================================
Code-Page| Name                         | ACP  OEMCP | Windows Windows Windows
   ID    |                              |            |  NT 3.1 NT 3.51    95
------------------------------------------------------------------------------
  1200   | Unicode (BMP of ISO 10646)   |            |    X       X       *
  1250   | Windows 3.1 Eastern European |  X         |    X       X       X
  1251   | Windows 3.1 Cyrillic         |  X         |    X       X       X
  1252   | Windows 3.1 US (ANSI)        |  X         |    X       X       X
  1253   | Windows 3.1 Greek            |  X         |    X       X       X
  1254   | Windows 3.1 Turkish          |  X         |    X       X       X
  1255   | Hebrew                       |  X         |                    X
  1256   | Arabic                       |  X         |                    X
  1257   | Baltic                       |  X         |                    X
  1361   | Korean (Johab)               |  X         |            **      X
------------------------------------------------------------------------------
   437   | MS-DOS United States         |        X   |    X       X       X
   708   | Arabic (ASMO 708)            |        X   |                    X
   709   | Arabic (ASMO 449+, BCON V4)  |        X   |                    X
   710   | Arabic (Transparent Arabic)  |        X   |                    X
   720   | Arabic (Transparent ASMO)    |        X   |                    X
==============================================================================

귀하의 브라우저로

CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Code-Page
ID
NameACPOEMCPWindows
NT 3.1
Windows
NT 3.51
Windows
95
1200Unicode (BMP of ISO/IEC-10646)XX*
1250Windows 3.1 Eastern EuropeanXXXX
1251Windows 3.1 CyrillicXXXX
1252Windows 3.1 US (ANSI)XXXX
1253Windows 3.1 GreekXXXX
1254Windows 3.1 TurkishXXXX
1255HebrewXX
1256ArabicXX
1257BalticXX
1361Korean (Johab)X**X
437MS-DOS United StatesXXXX
708Arabic (ASMO 708)XX
709Arabic (ASMO 449+, BCON 4)XX
710Arabic (Transparent Arabic)XX
720Arabic (Transparent ASMO)XX

그래픽 사용도구에서는 다음과 같이 표현된다(영문 원문 그래픽).

열과 컬럼구룹을 이용 한 표의 예제(영문 원문 그래픽)

Trio 홈페이지 문서(http://trio.co.kr/webrefer/html/struct/tables.html)는 자유로이 연결 사용이 가능함.