차례
    1. 4.9 표 형태의 데이터
      1. 4.9.1 The table element
      2. 4.9.2 The caption element
      3. 4.9.3 The colgroup element
      4. 4.9.4 The col element
      5. 4.9.5 The tbody element
      6. 4.9.6 The thead element
      7. 4.9.7 The tfoot element
      8. 4.9.8 The tr element
      9. 4.9.9 The td element
      10. 4.9.10 The th element
      11. 4.9.11 td, th 공통적인 속성
      12. 4.9.12 처리 모델
        1. 4.9.12.1 테이블 포맷
        2. 4.9.12.2 데이터 셀과 헤더 셀 사이의 연결 생성
      13. 4.9.13 예제

4.9 표 형태의 데이터

ISSUE-32 (table-summary) blocks progress to Last Call

4.9.1 The table element

ISSUE-92 (cleanuptable) blocks progress to Last Call

요소가 속하는 범주Categories
플로우 컨텐츠
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

플로우 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것:Content model

이 순서대로: 선택적으로 caption 요소 → 0 혹은 그 이상의 colgroup 요소 → 선택적으로 thead → 선택적으로 tfoot → 0 또는 그 이상의 tbody 또는 tr → 선택적으로 tfoot (하지만 tfoot 요소는 위 중 하나에서만 사용할 수 있습니다.)

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total).

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
summary (but see prose)
DOM interface:
interface HTMLTableElement : HTMLElement {
           attribute HTMLTableCaptionElement caption;
  HTMLElement createCaption();
  void deleteCaption();
           attribute HTMLTableSectionElement tHead;
  HTMLElement createTHead();
  void deleteTHead();
           attribute HTMLTableSectionElement tFoot;
  HTMLElement createTFoot();
  void deleteTFoot();
  readonly attribute HTMLCollection tBodies;
  HTMLElement createTBody();
  readonly attribute HTMLCollection rows;
  HTMLElement insertRow(in optional long index);
  void deleteRow(in long index);
           attribute DOMString summary;
};

colgroup 요소는 table 요소의 자식 요소로만 존재할 수 있습니다. 그러한 당연한 포함 관계들은 일일히 번역하지 않았습니다. 예를 들어, "colgroup의 부모 요소가 table 요소라면," 같은 구문은 생략하고 번역하였습니다.

table 요소는 표 형태로 제공되는 1차원 이상의 데이터를 나타냅니다.

The table element represents data with more than one dimension, in the form of a table.

The table element takes part in the table model.

테이블을 레이아웃 용도로 사용해서는 안됩니다. 그동안 몇몇 웹 저작자들이 HTML 테이블을 페이지 레이아웃을 잡는 용도로 잘못 사용해 왔습니다. 이러한 사용은 잘못된 것입니다. 그러한 페이지에서는 표 형태의 데이터를 추출하고자 하는 도구들이 대단히 혼란스러운 결과를 얻을 것이기 때문입니다. 특히 스크린 리더 같은 접근성 도구를 사용하는 사람들은 레이아웃을 위해 테이블을 사용한 페이지를 이용하는 것이 대단히 어려울 것입니다.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

레이아웃을 위해서라면 HTML 테이블 대신 쓸 수 있는 것이 많습니다. 그중에서도 우선적인 것은 CSS 포지셔닝과 CSS 테이블 모델입니다.

There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.

User agents that do table analysis on arbitrary content are encouraged to find heuristics to determine which tables actually contain data and which are merely being used for layout. This specification does not define a precise heuristic.

테이블은 자손 요소에는 열과 행, 셀이 있습니다. 열과 행이 그리드를 구성하며, 이 그리드의 모든 셀에 테이블 셀이 곂치지 않게 들어가야 합니다.

Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap. Precise rules for determining whether this conformance requirement is met are described in the description of the table model.

셀의 그리드로 구성되고 그 첫 행과 첫 열에 헤더 정보가 있는 단순한 구조가 아니거나 독자가 내용을 이해하는데 어려움을 느낄 만한 테이블이라면 테이블을 소개하는 설명 정보를 포함시켜야 합니다. 이 정보는 모든 사용자에게 유용하지만, 테이블을 볼 수 없는 사용자에게 특히 더 유용합니다.

For tables that consist of more than just a grid of cells with headers in the first row and headers in the first column, and for any table in general where the reader might have difficulty understanding the content, authors should include explanatory information introducing the table. This information is useful for all users, but is especially useful for users who cannot see the table, e.g. users of screen readers.

그러한 설명 정보는 테이블의 목적을 소개해야 하고, 기본적인 셀 구조의 개요를 나타내야 하며, 경향과 패턴을 설명하고, 사용자가 테이블을 어떻게 사용할지 가르칠 수 있는 것이어야 합니다.

Such explanatory information should introduce the purpose of the table, outline its basic cell structure, highlight any trends or patterns, and generally teach the user how to use the table.

예를 들어 다음의 테이블을 보십시오.

For instance, the following table:

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

"특징이 두번째 열에 있고, 부정적인 면은 왼쪽 열에 있으며 긍정적인 면은 오른쪽 열에 있습니다" 처럼 테이블이 만들어진 방식에 대한 설명이 있으면 도움이 될 것입니다.

...might benefit from a description explaining the way the table is laid out, something like "Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column".

다양한 방법을 통해 이러한 정보를 포함할 수 있습니다. 예를 들어

There are a variety of ways to include this information, such as:

테이블을 둘러싼 텍스트 형태로 In prose, surrounding the table
<p>In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.</p>
<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
테이블의 caption으로 In the table's caption
<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
테이블의 caption 내부 details 요소에서 In the table's caption, in a details element
<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.</p>
  </details>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
동일한 figure 내에서, 테이블 다음에 Next to the table, in the same figure
<figure>
 <figcaption>Characteristics with positive and negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.</p>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>
figurefigcaption 내부에서, 테이블 다음에 Next to the table, in a figure's figcaption
<figure>
 <figcaption>
  <strong>Characteristics with positive and negative sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </figcaption>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

다른 기법을 사용할 수도 있고 위에서 든 예시의 조합을 사용할 수도 있습니다.

Authors may also use other techniques, or combinations of the above techniques, as appropriate.

테이블의 레이아웃을 아무리 잘 설명하더라도, 설명이 필요 없도록 테이블을 만드는 것만 못합니다.

The best option, of course, rather than writing a description explaining the way the table is laid out, is to adjust the table such that no explanation is needed.

위에서 예를 든 테이블은 헤더를 위쪽과 왼쪽에 있게 하는 간단한 조절만으로도 설명이나 headers 속성이 필요 없어집니다.

In the case of the table used in the examples above, a simple rearrangement of the table so that the headers are on the top and left sides removes the need for an explanation as well as removing the need for the use of headers attributes:

<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th> Characteristic
   <th> Negative
   <th> Positive
 <tbody>
  <tr>
   <th> Mood
   <td> Sad
   <td> Happy
  <tr>
   <th> Grade
   <td> Failing
   <td> Passing
</table>
Characteristics with positive and negative sides
Characteristic Negative Positive
Mood Sad Happy
Grade Failing Passing

HTML 이전 버전에서는 복잡한 테이블에 summary 속성을 써서 스크린 리더 사용자에게 설명 텍스트를 제공하자는 제안이 있었습니다. 그것보다는 다음에 설명하는 방법이 더 좋습니다.

The summary attribute on table elements was suggested in earlier versions of the language as a technique for providing explanatory text for complex tables for users of screen readers. One of the techniques described above should be used instead.

특히, 테이블에 대한 설명 텍스트가 시각적 장애를 가진 이들에게 유용할 것인지 먼저 고려해 볼 것을 권합니다. 그렇지 않다면 summary 속성을 사용하지 않는 것이 최선입니다. 비슷하게, 그러한 설명이 시각적 장애를 가지지 않은 사람 - 예를 들어 그 테이블을 처음으로 보는 사람 - 에게 유용할 수 있다면 그러한 텍스트는 테이블 앞에 두거나 caption에 두는 것이 좋을 것입니다. 예를 들어 테이블에 포함된 데이터의 결론을 설명하는 것은 모든 이에게 유용합니다. 헤더를 보는 것 만으로는 충분히 이해할 수 없는 테이블을 어떻게 읽을 것인지 설명하는 것도 모든 이에게 유용합니다. 일목요연한 테이블의 구조를 재삼 설명하는건 아무에게도 별 도움이 되지 않으며, 접근성 도구의 도움을 받아 빠르게 탐색할 수 있는 이들에게도 도움이 되지 않습니다.

In particular, authors are encouraged to consider whether their explanatory text for tables is likely to be useful to the visually impaired: if their text would not be useful, then it is best to not include a summary attribute. Similarly, if their explanatory text could help someone who is not visually impaired, e.g. someone who is seeing the table for the first time, then the text would be more useful before the table or in the caption. For example, describing the conclusions of the data in a table is useful to everyone; explaining how to read the table, if not obvious from the headers alone, is useful to everyone; describing the structure of the table, if it is easy to grasp visually, may not be useful to everyone, but it might also not be useful to users who can quickly navigate the table with an accessibility tool.

아래 문단은 주석처리 되어 있던 것이지만, 읽어둘만 하다 생각하여 함께 옮깁니다.

summary 속성을 사용하지 않기를 권하는 이유는 현실적으로 그 내용을 이해하는 사람이 거의 없기 때문입니다. 시각적 사용자 에이전트에서는 이 속성을 표현하지 않으므로 이 속성을 작성한 저자 자신은 보통 그것을 테스트해볼 수 없어서 보조 기술을 사용하는 사람에게 거의 도움이 되지 않는 내용을 사용합니다. 이러한 이유로 접근성 도구들은 이 속성을 사용자에게 노출하지 않게 되었습니다. 이 속성을 가장 잘 사용하는 몇몇 저자들조차 종종 잘못 사용하곤 하는데, 예를 들어 사실 모든 사람에게 유용할 정보를 넣는다거나 테이블 밖에서 제공되는 정보와 중복된 것을 사용하는 등입니다.

If a table element has a summary attribute, the user agent may report the contents of that attribute to the user.

table . caption [ = value ]

테이블의 caption 요소를 반환합니다.

Returns the table's caption element.

caption 요소를 교체할 수 있습니다. 주어진 값이 caption 요소가 아니라면 HIERARCHY_REQUEST_ERR 예외를 반환합니다.

Can be set, to replace the caption element. If the new value is not a caption element, throws a HIERARCHY_REQUEST_ERR exception.

caption = table . createCaption()

테이블에 caption 요소를 만든 후 그것을 반환합니다.

Ensures the table has a caption element, and returns it.

table . deleteCaption()

테이블에서 caption 요소를 제거합니다.

Ensures the table does not have a caption element.

table . tHead [ = value ]

테이블의 thead 요소를 반환합니다.

Returns the table's thead element.

thead 요소를 교체할 수 있습니다. 주어진 값이 thead 요소가 아니라면 HIERARCHY_REQUEST_ERR 예외를 반환합니다.

Can be set, to replace the thead element. If the new value is not a thead element, throws a HIERARCHY_REQUEST_ERR exception.

thead = table . createTHead()

테이블에 thead 요소를 만든 후 그것을 반환합니다.

Ensures the table has a thead element, and returns it.

table . deleteTHead()

테이블에서 thead 요소를 제거합니다.

Ensures the table does not have a thead element.

table . tFoot [ = value ]

테이블의 tfoot 요소를 반환합니다.

Returns the table's tfoot element.

tfoot 요소의 교체를 위해 사용할 수 있습니다. 주어진 값이 tfoot 요소가 아니라면 HIERARCHY_REQUEST_ERR 예외를 반환합니다.

Can be set, to replace the tfoot element. If the new value is not a tfoot element, throws a HIERARCHY_REQUEST_ERR exception.

tfoot = table . createTFoot()

테이블에 tfoot 요소를 만든 후 그것을 반환합니다.

Ensures the table has a tfoot element, and returns it.

table . deleteTFoot()

테이블에서 tfoot 요소를 제거합니다.

Ensures the table does not have a tfoot element.

table . tBodies

테이블에서 tbody 요소의 HTMLCollection을 반환합니다.

Returns an HTMLCollection of the tbody elements of the table.

tbody = table . createTBody()

tbody 요소를 만들고, 테이블에 삽입하고, 반환합니다.

Creates a tbody element, inserts it into the table, and returns it.

table . rows

테이블에서 tr 요소의 HTMLCollection을 반환합니다.

Returns an HTMLCollection of the tr elements of the table.

tr = table . insertRow(index)

(필요하다면, tbody 요소도) tr 요소를 만들고, 매개변수로 주어진 위치에 따라 테이블에 삽입한 후 반환합니다.

Creates a tr element, along with a tbody if required, inserts them into the table at the position given by the argument, and returns the tr.

위치는 테이블의 행들에 연관됩니다. 인덱스 -1은 테이블의 마지막에 삽입하는 것과 동등합니다.

The position is relative to the rows in the table. The index −1 is equivalent to inserting at the end of the table.

주어진 위치가 -1보다 작거나 행 수보다 크다면, INDEX_SIZE_ERR 예외를 반환합니다.

If the given position is less than −1 or greater than the number of rows, throws an INDEX_SIZE_ERR exception.

table . deleteRow(index)

주어진 위치에 있는 tr 요소를 삭제합니다.

Removes the tr element with the given position in the table.

위치는 테이블의 행들에 연관됩니다. 인덱스 -1은 테이블의 마지막 열을 삭제하는 것과 동등합니다.

The position is relative to the rows in the table. The index −1 is equivalent to deleting the last row of the table.

주어진 위치가 -1보다 작거나, 행 수보다 크거나, 테이블에 행이 없다면, INDEX_SIZE_ERR 예외를 반환합니다.

If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an INDEX_SIZE_ERR exception.

The caption IDL attribute must return, on getting, the first caption element child of the table element, if any, or null otherwise. On setting, if the new value is a caption element, the first caption element child of the table element, if any, must be removed, and the new value must be inserted as the first node of the table element. If the new value is not a caption element, then a HIERARCHY_REQUEST_ERR DOM exception must be raised instead.

The createCaption() method must return the first caption element child of the table element, if any; otherwise a new caption element must be created, inserted as the first node of the table element, and then returned.

The deleteCaption() method must remove the first caption element child of the table element, if any.

The tHead IDL attribute must return, on getting, the first thead element child of the table element, if any, or null otherwise. On setting, if the new value is a thead element, the first thead element child of the table element, if any, must be removed, and the new value must be inserted immediately before the first element in the table element that is neither a caption element nor a colgroup element, if any, or at the end of the table if there are no such elements. If the new value is not a thead element, then a HIERARCHY_REQUEST_ERR DOM exception must be raised instead.

The createTHead() method must return the first thead element child of the table element, if any; otherwise a new thead element must be created and inserted immediately before the first element in the table element that is neither a caption element nor a colgroup element, if any, or at the end of the table if there are no such elements, and then that new element must be returned.

The deleteTHead() method must remove the first thead element child of the table element, if any.

The tFoot IDL attribute must return, on getting, the first tfoot element child of the table element, if any, or null otherwise. On setting, if the new value is a tfoot element, the first tfoot element child of the table element, if any, must be removed, and the new value must be inserted immediately before the first element in the table element that is neither a caption element, a colgroup element, nor a thead element, if any, or at the end of the table if there are no such elements. If the new value is not a tfoot element, then a HIERARCHY_REQUEST_ERR DOM exception must be raised instead.

The createTFoot() method must return the first tfoot element child of the table element, if any; otherwise a new tfoot element must be created and inserted immediately before the first element in the table element that is neither a caption element, a colgroup element, nor a thead element, if any, or at the end of the table if there are no such elements, and then that new element must be returned.

The deleteTFoot() method must remove the first tfoot element child of the table element, if any.

The tBodies attribute must return an HTMLCollection rooted at the table node, whose filter matches only tbody elements that are children of the table element.

The createTBody() method must create a new tbody element, insert it immediately after the last tbody element in the table element, if any, or at the end of the table element if the table element has no tbody element children, and then must return the new tbody element.

The rows attribute must return an HTMLCollection rooted at the table node, whose filter matches only tr elements that are either children of the table element, or children of thead, tbody, or tfoot elements that are themselves children of the table element. The elements in the collection must be ordered such that those elements whose parent is a thead are included first, in tree order, followed by those elements whose parent is either a table or tbody element, again in tree order, followed finally by those elements whose parent is a tfoot element, still in tree order.

The behavior of the insertRow(index) method depends on the state of the table. When it is called, the method must act as required by the first item in the following list of conditions that describes the state of the table and the index argument:

If index is less than −1 or greater than the number of elements in rows collection:
The method must raise an INDEX_SIZE_ERR exception.
If the rows collection has zero elements in it, and the table has no tbody elements in it:
The method must create a tbody element, then create a tr element, then append the tr element to the tbody element, then append the tbody element to the table element, and finally return the tr element.
If the rows collection has zero elements in it:
The method must create a tr element, append it to the last tbody element in the table, and return the tr element.
If index is missing, equal to −1, or equal to the number of items in rows collection:
The method must create a tr element, and append it to the parent of the last tr element in the rows collection. Then, the newly created tr element must be returned.
Otherwise:
The method must create a tr element, insert it immediately before the indexth tr element in the rows collection, in the same parent, and finally must return the newly created tr element.

When the deleteRow(index) method is called, the user agent must run the following steps:

  1. If index is equal to −1, then index must be set to the number if items in the rows collection, minus one.

  2. Now, if index is less than zero, or greater than or equal to the number of elements in the rows collection, the method must instead raise an INDEX_SIZE_ERR exception, and these steps must be aborted.

  3. Otherwise, the method must remove the indexth element in the rows collection from its parent.

The summary IDL attribute must reflect the content attribute of the same name.

"sudoku" 퍼즐을 마크업한 예제입니다. 이러한 테이블에는 헤더가 필요 없는 것을 눈여겨보십시오.

Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of headers, which are not necessary in such a table.

<section>
 <style scoped>
  table { border-collapse: collapse; border: solid thick }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 </style>
 <h1>Today's Sudoku</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</section>

4.9.2 The caption element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
table 요소의 첫번째 자식 요소

As the first element child of a table element.

이 요소가 포함할 수 있는 것:Content model

플로우 컨텐츠. 하지만 table 요소를 자손으로 가질 수는 없습니다.

Flow content, but with no descendant table elements.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
interface HTMLTableCaptionElement : HTMLElement {};

caption 요소는 자신의 부모인 table 요소의 제목을 나타냅니다.

The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.

The caption element takes part in the table model.

table 요소가 figure 요소의 자식 요소이고 figcaption 외에는 형제 요소가 없다면 caption 요소 대신 figcaption 요소를 써서 그 테이블의 제목을 나타내야 합니다.

When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption.

캡션은 테이블의 문맥을 소개하여 훨씬 이해하기 쉽게 만듭니다.

A caption can introduce context for a table, making it significantly easier to understand.

예를 들어 다음의 테이블을 보십시오.

Consider, for instance, the following table:

1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12

위 내용만으로는 테이블을 명확하게 이해하기 어렵습니다. 그러나 테이블에 있는 숫자를 주 문맥에서 참조할 수 있게끔 제시하고 사용법을 설명한다면 좀 더 이해하기 쉽습니다.

In the abstract, this table is not clear. However, with a caption giving the table's number (for reference in the main prose) and explaining its use, it makes more sense:

<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>
이 테이블은 두개의 6면체 주사위를 굴린 점수를 모두 나타냅니다. 첫번째 행은 첫번째 주사위의 값을 나타내며, 첫번째 열은 두번째 주사위의 값을 나타냅니다. 합계는 두 주사위의 값에 대응하는 셀에 주어집니다

4.9.3 The colgroup element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

table 요소의 자손. caption 보다 뒤에 있어야 하고, thead, tbody, tfoot, tr 요소보다 앞에 있어야 합니다.

As a child of a table element, after any caption elements and before any thead, tbody, tfoot, and tr elements.

이 요소가 포함할 수 있는 것:Content model

span 속성이 있으면 요소는 비어 있어야 합니다.

If the span attribute is present: Empty.

span 속성이 없을 때는 0개 이상의 col 요소를 포함할 수 있습니다.

If the span attribute is absent: Zero or more col elements.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
span
DOM interface:
interface HTMLTableColElement : HTMLElement {
           attribute unsigned long span;
};

colgroup 요소는 하나 이상의 그룹을 나타냅니다.

The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.

col 요소를 포함하지 않는다면 내용 속성 span을 쓸 수 있습니다. 그 값은 0보다 큰 유효한 양의 정수여야 합니다.

If the colgroup element contains no col elements, then the element may have a span content attribute specified, whose value must be a valid non-negative integer greater than zero.

The colgroup element and its span attribute take part in the table model.

The span IDL attribute must reflect the content attribute of the same name. The value must be limited to only non-negative numbers greater than zero.

4.9.4 The col element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

span 속성이 없는 colgroup 요소 내부

As a child of a colgroup element that doesn't have a span attribute.

이 요소가 포함할 수 있는 것:Content model
이 요소는 비어 있어야 합니다.Empty
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
span
DOM interface:

colgroup 요소와 마찬가지로 HTMLTableColElement. 이 인터페이스가 정의하는 멤버는 span 하나입니다.

HTMLTableColElement, same as for colgroup elements. This interface defines one member, span.

col 요소는 하나 이상의 나타냅니다.

If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element represents one or more columns in the column group represented by that colgroup.

내용 속성 span을 쓸 수 있으며 그 값은 0보다 큰 유효한 양의 정수여야 합니다.

The element may have a span content attribute specified, whose value must be a valid non-negative integer greater than zero.

The col element and its span attribute take part in the table model.

The span IDL attribute must reflect the content attribute of the same name. The value must be limited to only non-negative numbers greater than zero.

4.9.5 The tbody element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

table 요소의 자손으로 caption, colgroup, thead 요소 뒤에 나올 수 있지만 tbody 요소가 있는 테이블에서 tr 요소가 table 요소의 자식 요소일 수는 없습니다.

As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tr elements that are children of the table element.

이 요소가 포함할 수 있는 것:Content model

0개 이상의 tr 요소

Zero or more tr elements

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
interface HTMLTableSectionElement : HTMLElement {
  readonly attribute HTMLCollection rows;
  HTMLElement insertRow(in optional long index);
  void deleteRow(in long index);
};

HTMLTableSectionElement 인터페이스는 theadtfoot 요소에서도 사용됩니다.

The HTMLTableSectionElement interface is also used for thead and tfoot elements.

요소는 집합을 나타냅니다.

The tbody element represents a block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table.

The tbody element takes part in the table model.

tbody . rows

테이블 섹션의 tr 요소의HTMLCollection 반환합니다.

Returns an HTMLCollection of the tr elements of the table section.

tr = tbody . insertRow( [ index ] )

tr 요소를 만들고 매개변수로 주어진 위치에 따라 테이블에 그것을 삽입한 후 반환합니다.

Creates a tr element, inserts it into the table section at the position given by the argument, and returns the tr.

위치는 테이블의 행들에 연관됩니다. 매개변수를 생략하면 기본값으로 인덱스 -1을 가지며 테이블의 마지막에 삽입하는 것과 동등합니다.

The position is relative to the rows in the table section. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.

주어진 위치가 -1보다 작거나 행 수보다 크다면 INDEX_SIZE_ERR 예외를 반환합니다.

If the given position is less than −1 or greater than the number of rows, throws an INDEX_SIZE_ERR exception.

tbody . deleteRow(index)

주어진 위치에 있는 tr 요소를 삭제합니다.

Removes the tr element with the given position in the table section.

위치는 테이블의 행들에 연관됩니다. 인덱스 -1은 테이블의 마지막 열을 삭제하는 것과 동등합니다.

The position is relative to the rows in the table section. The index −1 is equivalent to deleting the last row of the table section.

주어진 위치가 -1보다 작거나 행 수보다 크거나 테이블에 행이 없다면 INDEX_SIZE_ERR 예외를 반환합니다.

If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an INDEX_SIZE_ERR exception.

The rows attribute must return an HTMLCollection rooted at the element, whose filter matches only tr elements that are children of the element.

The insertRow(index) method must, when invoked on an element table section, act as follows:

If index is less than −1 or greater than the number of elements in the rows collection, the method must raise an INDEX_SIZE_ERR exception.

If index is missing, equal to −1, or equal to the number of items in the rows collection, the method must create a tr element, append it to the element table section, and return the newly created tr element.

Otherwise, the method must create a tr element, insert it as a child of the table section element, immediately before the indexth tr element in the rows collection, and finally must return the newly created tr element.

The deleteRow(index) method must remove the indexth element in the rows collection from its parent. If index is less than zero or greater than or equal to the number of elements in the rows collection, the method must instead raise an INDEX_SIZE_ERR exception.

4.9.6 The thead element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

table 요소의 자손으로 caption, colgroup 요소 다음에, 그리고 tbody, tfoot, tr 요소 앞에 올 수 있으며 table 요소 하나에 thead 요소 하나만 쓸 수 있습니다.

As a child of a table element, after any caption, and colgroup elements and before any tbody, tfoot, and tr elements, but only if there are no other thead elements that are children of the table element.

이 요소가 포함할 수 있는 것:Content model

0개 이상의 tr 요소

Zero or more tr elements

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
HTMLTableSectionElement, as defined for tbody elements.

thead 요소는 열 제목(헤더)으로 구성된 행의 집합나타냅니다.

The thead element represents the block of rows that consist of the column labels (headers) for the parent table element, if the thead element has a parent and it is a table.

The thead element takes part in the table model.

이 예제는 thead 요소의 사용법을 보여줍니다. thead 안에 thtd 요소가 둘 다 사용된 것을 눈여겨보십시오. 첫번째 행은 헤더이며 두번째 행은 테이블을 어떻게 채워 넣을지 설명한 것입니다.

This example shows a thead element being used. Notice the use of both th and td elements in the thead element: the first row is the headers, and the second row is an explanation of how to fill in the table.

<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>

4.9.7 The tfoot element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

table 요소의 자식으로 caption, colgroup, thead 요소 다음에, 그리고 tbody, tr 앞에. 하지만 table 요소 하나에 tfoot 요소 하나만 쓸 수 있습니다.

As a child of a table element, after any caption, colgroup, and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element.

table 요소의 자식으로 caption, colgroup, thead, tbody, tr 요소 다음. 하지만 table 요소 하나에 tfoot 요소 하나만 쓸 수 있습니다.

As a child of a table element, after any caption, colgroup, thead, tbody, and tr elements, but only if there are no other tfoot elements that are children of the table element.

이 요소가 포함할 수 있는 것:Content model

0개 이상의 tr 요소

Zero or more tr elements

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:

tbody 요소에서 정의된 것과 마찬가지로 HTMLTableSectionElement

HTMLTableSectionElement, as defined for tbody elements.

tfoot 요소는 열의 요약(푸터)들로 구성된 집합나타냅니다.

The tfoot element represents the block of rows that consist of the column summaries (footers) for the parent table element, if the tfoot element has a parent and it is a table.

The tfoot element takes part in the table model.

4.9.8 The tr element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
thead 요소의 자식 요소로As a child of a thead element.
tbody 요소의 자식 요소로As a child of a tbody element.
tfoot 요소의 자식 요소로As a child of a tfoot element.

table 요소의 자식으로 caption, colgroup, and thead 요소 다음. (이렇게 사용했을 때는 table 요소에 tbody 요소를 자식 요소로 쓸 수 없습니다.)

As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.

이 요소가 포함할 수 있는 것:Content model

0개 이상의 td 또는 th 요소

Zero or more td or th elements

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
interface HTMLTableRowElement : HTMLElement {
  readonly attribute long rowIndex;
  readonly attribute long sectionRowIndex;
  readonly attribute HTMLCollection cells;
  HTMLElement insertCell(in optional long index);
  void deleteCell(in long index);
};

tr 요소는 나타냅니다.

The tr element represents a row of cells in a table.

The tr element takes part in the table model.

tr . rowIndex

테이블의 rows 목록에서 행의 위치를 반환합니다.

Returns the position of the row in the table's rows list.

요소가 테이블 안에 있지 않다면 -1을 반환합니다.

Returns −1 if the element isn't in a table.

tr . sectionRowIndex

테이블 섹션의 rows 목록에서 행의 위치를 반환합니다.

Returns the position of the row in the table section's rows list.

요소가 테이블 섹션 안에 있지 않다면 -1을 반환합니다.

Returns −1 if the element isn't in a table section.

tr . cells

행의 td, th 요소들의 HTMLCollection을 반환합니다.

Returns an HTMLCollection of the td and th elements of the row.

cell = tr . insertCell( [ index ] )

td 요소를 생성하고 매개변수로 주어진 위치에 따라 그것을 행에 삽입한 후 반환합니다.

Creates a td element, inserts it into the table row at the position given by the argument, and returns the td.

위치는 행의 셀들과 연관이 있습니다. 매개변수가 생략되었다면 기본값은 -1 이며 행의 마지막에 삽입하는 것과 동등합니다.

The position is relative to the cells in the row. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the row.

주어진 위치가 -1보다 작거나 셀의 갯수보다 크다면 INDEX_SIZE_ERR 예외를 반환합니다.

If the given position is less than −1 or greater than the number of cells, throws an INDEX_SIZE_ERR exception.

tr . deleteCell(index)

주어진 위치에 있는 td, th 요소를 제거합니다.

Removes the td or th element with the given position in the row.

위치는 행의 셀들과 연관이 있습니다. 매개변수 -1은 행의 마지막 셀을 제거하는 것과 동등합니다.

The position is relative to the cells in the row. The index −1 is equivalent to deleting the last cell of the row.

주어진 위치가 -1보다 작거나 셀의 갯수보다 크거나 셀이 없다면 INDEX_SIZE_ERR 예외를 반환합니다

If the given position is less than −1 or greater than the index of the last cell, or if there are no cells, throws an INDEX_SIZE_ERR exception.

The rowIndex attribute must, if the element has a parent table element, or a parent tbody, thead, or tfoot element and a grandparent table element, return the index of the tr element in that table element's rows collection. If there is no such table element, then the attribute must return −1.

The sectionRowIndex attribute must, if the element has a parent table, tbody, thead, or tfoot element, return the index of the tr element in the parent element's rows collection (for tables, that's the HTMLTableElement.rows collection; for table sections, that's the HTMLTableRowElement.rows collection). If there is no such parent element, then the attribute must return −1.

The cells attribute must return an HTMLCollection rooted at the tr element, whose filter matches only td and th elements that are children of the tr element.

The insertCell(index) method must act as follows:

If index is less than −1 or greater than the number of elements in the cells collection, the method must raise an INDEX_SIZE_ERR exception.

If index is missing, equal to −1, or equal to the number of items in cells collection, the method must create a td element, append it to the tr element, and return the newly created td element.

Otherwise, the method must create a td element, insert it as a child of the tr element, immediately before the indexth td or th element in the cells collection, and finally must return the newly created td element.

The deleteCell(index) method must remove the indexth element in the cells collection from its parent. If index is less than zero or greater than or equal to the number of elements in the cells collection, the method must instead raise an INDEX_SIZE_ERR exception.

4.9.9 The td element

요소가 속하는 범주Categories
섹션 루트Sectioning root
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
tr 요소의 자식 요소로As a child of a tr element.
이 요소가 포함할 수 있는 것:Content model
플로우 컨텐츠Flow content
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
colspan
rowspan
headers
DOM interface:
interface HTMLTableDataCellElement : HTMLTableCellElement {};

td 요소는 데이터 나타냅니다.

The td element represents a data cell in a table.

The td element and its colspan, rowspan, and headers attributes take part in the table model.

4.9.10 The th element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used
tr 요소의 자식 요소로As a child of a tr element.
이 요소가 포함할 수 있는 것:Content model
구문 컨텐츠Phrasing content
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
colspan
rowspan
headers
scope
DOM interface:
interface HTMLTableHeaderCellElement : HTMLTableCellElement {
           attribute DOMString scope;
};

th 요소는 헤더 나타냅니다.

The th element represents a header cell in a table.

요소에 내용 속성 scope를 쓸 수 있습니다. scope 속성은 나열 속성이며 다섯개의 상태를 가지는데 그중 네개는 명시적인 키워드입니다.

The th element may have a scope content attribute specified. The scope attribute is an enumerated attribute with five states, four of which have explicit keywords:

The row keyword, which maps to the row state

row 상태는 헤더가 같은 행(들)에 있는 그 다음 셀들 중 일부에 적용됨을 의미합니다.

The row state means the header cell applies to some of the subsequent cells in the same row(s).

The col keyword, which maps to the column state

column 상태는 헤더가 같은 열(들)에 있는 그 다음 셀들 중 일부에 적용됨을 의미합니다.

The column state means the header cell applies to some of the subsequent cells in the same column(s).

The rowgroup keyword, which maps to the row group state

row group 상태는 헤더가 동일한 행 집합에 있는 다른 모든 셀에 적용됨을 의미합니다. 요소가 행 집합을 가리킬 때에만 이 상태를 쓸 수 있습니다.

The row group state means the header cell applies to all the remaining cells in the row group. A th element's scope attribute must not be in the row group state if the element is not anchored in a row group.

The colgroup keyword, which maps to the column group state

column group 상태는 헤더가 동일한 열 집합에 있는 다른 모든 셀에 적용됨을 의미합니다. 요소가 열 집합을 가리키는 경우에만 이 상태를 쓸 수 있습니다.

The column group state means the header cell applies to all the remaining cells in the column group. A th element's scope attribute must not be in the column group state if the element is not anchored in a column group.

The auto state

이 상태는 헤더 셀이 가리키는 셀 집합을 문맥에 기초하여 선택합니다.

The auto state makes the header cell apply to a set of cells selected based on context.

속성을 사용하지 않았을 경우의 기본값은 auto 상태입니다.

The scope attribute's missing value default is the auto state.

The th element and its colspan, rowspan, headers, and scope attributes take part in the table model.

The scope IDL attribute must reflect the content attribute of the same name, limited to only known values.

다음 예제는 scope 속성의 rowgroup 키워드가 어떤 데이터 셀에 영향을 미치는지 보여줍니다.

The following example shows how the scope attribute's rowgroup value affects which data cells a header cell applies to.

테이블 마크업입니다.

Here is a markup fragment showing a table:

<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th> Tails <td> 0.33 <td> 1
</table>

결과적으로 이러한 테이블이 생성됩니다.

This would result in the following table:

ID Measurement Average Maximum
Cats
93 Legs 3.5 4
10 Tails 1 1
English speakers
32 Legs 2.67 4
35 Tails 0.33 1

첫번째 행에 있는 모든 헤더는 같은 열에 있는 모든 셀에 직접 영향을 미칩니다.

The headers in the first row all apply directly down to the rows in their column.

scope 속성을 명시적으로 지정한 헤더들은 자신이 속한 행 집합에서 첫번째 열을 제외한 모든 셀에 영향을 미칩니다.

The headers with the explicit scope attributes apply to all the cells in their row group other than the cells in the first column.

다른 헤더들은 자신의 오른쪽에 있는 셀들에 영향을 미칩니다.

The remaining headers apply just to the cells to the right of them.

4.9.11 td 요소와 th 요소에 공통인 속성

td, th 요소는 모두 내용 속성 colspan을 가질 수 있습니다. 값은 0보다 큰 유효한 양의 정수여야 합니다.

The td and th elements may have a colspan content attribute specified, whose value must be a valid non-negative integer greater than zero.

rowspan 속성도 쓸 수 있습니다. 값은 유효한 양의 정수여야 합니다.

The td and th elements may also have a rowspan content attribute specified, whose value must be a valid non-negative integer.

colspan 속성과 rowspan 속성은 셀이 확장될 열과 행의 숫자를 나타냅니다. 이러한 속성을 셀을 오버랩하기 위해 사용해서는 안됩니다.

These attributes give the number of columns and rows respectively that the cell is to span. These attributes must not be used to overlap cells, as described in the description of the table model.


td, th 요소에 내용 속성 headers 를 쓸 수 있습니다. 속성을 사용했다면 그 값은 공백문자로 구분되고 순서 없이 유일한 토큰의 목록이어야 하며 대소문자를 구분합니다. 토큰은 같은 테이블 안에 있는 th 요소의 ID여야 합니다.

The td and th element may have a headers content attribute specified. The headers attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens that are case-sensitive, each of which must have the value of an ID of a th element taking part in the same table as the td or th element (as defined by the table model).

headers 속성의 값으로 ID, id를 포함하는 모든 td, th 요소들은 그 id를 갖는 th 요소를 직접적으로 가리킨다 라고 말합니다. 셀 C가 B를 직접적으로 가리키고, B가 A를 직접적으로 가리킨다면 셀 C는 A를 가리키는 것입니다. C가 A를 가리킨다고 하면 앞서 말한 직접적인 가리킴과 후자의 간접적인 가리킴 모두를 말합니다.

A th element with ID id is said to be directly targeted by all td and th elements in the same table that have headers attributes whose values include as one of their tokens the ID id. A th element A is said to be targeted by a th or td element B if either A is directly targeted by B or if there exists an element C that is itself targeted by the element B and A is directly targeted by C.

th 요소는 자신을 가리킬 수 없습니다.

A th element must not be targeted by itself.

The colspan, rowspan, and headers attributes take part in the table model.


tdth 요소는 HTMLTableCellElement 로부터 상속된 인터페이스를 구현합니다.

The td and th elements implement interfaces that inherit from the HTMLTableCellElement interface:

interface HTMLTableCellElement : HTMLElement {
           attribute unsigned long colSpan;
           attribute unsigned long rowSpan;
  [PutForwards=value] readonly attribute DOMSettableTokenList headers;
  readonly attribute long cellIndex;
};
cell . cellIndex

행의 cells 목록으로부터 셀의 위치를 반환합니다. 앞에 있는 셀들이 여러 행이나 열로 확장되었을 가능성이 있으므로 이 값이 셀의 x-위치와 대응할 필요는 없습니다.

Returns the position of the cell in the row's cells list. This does not necessarily correspond to the x-position of the cell in the table, since earlier cells might cover multiple rows or columns.

요소가 행 안에 있지 않다면 0을 반환합니다.

Returns 0 if the element isn't in a row.

The colSpan IDL attribute must reflect the content attribute of the same name. The value must be limited to only non-negative numbers greater than zero.

The rowSpan IDL attribute must reflect the content attribute of the same name. Its default value, which must be used if parsing the attribute as a non-negative integer returns an error, is 1.

The headers IDL attribute must reflect the content attribute of the same name.

The cellIndex IDL attribute must, if the element has a parent tr element, return the index of the cell's element in the parent element's cells collection. If there is no such parent element, then the attribute must return 0.

4.9.12 처리 모델

The various table elements and their content attributes together define the table model.

A table consists of cells aligned on a two-dimensional grid of slots with coordinates (x, y). The grid is finite, and is either empty or has one or more slots. If the grid has one or more slots, then the x coordinates are always in the range 0 ≤ x < xwidth, and the y coordinates are always in the range 0 ≤ y < yheight. If one or both of xwidth and yheight are zero, then the table is empty (has no slots). Tables correspond to table elements.

A cell is a set of slots anchored at a slot (cellx, celly), and with a particular width and height such that the cell covers all the slots with coordinates (x, y) where cellx ≤ x < cellx+width and celly ≤ y < celly+height. Cells can either be data cells or header cells. Data cells correspond to td elements, and header cells correspond to th elements. Cells of both types can have zero or more associated header cells.

It is possible, in certain error cases, for two cells to occupy the same slot.

A row is a complete set of slots from x=0 to x=xwidth-1, for a particular value of y. Rows correspond to tr elements.

A column is a complete set of slots from y=0 to y=yheight-1, for a particular value of x. Columns can correspond to col elements. In the absence of col elements, columns are implied.

A row group is a set of rows anchored at a slot (0, groupy) with a particular height such that the row group covers all the slots with coordinates (x, y) where 0 ≤ x < xwidth and groupy ≤ y < groupy+height. Row groups correspond to tbody, thead, and tfoot elements. Not every row is necessarily in a row group.

A column group is a set of columns anchored at a slot (groupx, 0) with a particular width such that the column group covers all the slots with coordinates (x, y) where groupx ≤ x < groupx+width and 0 ≤ y < yheight. Column groups correspond to colgroup elements. Not every column is necessarily in a column group.

Row groups cannot overlap each other. Similarly, column groups cannot overlap each other.

A cell cannot cover slots that are from two or more row groups. It is, however, possible for a cell to be in multiple column groups. All the slots that form part of one cell are part of zero or one row groups and zero or more column groups.

In addition to cells, columns, rows, row groups, and column groups, tables can have a caption element associated with them. This gives the table a heading, or legend.

A table model error is an error with the data represented by table elements and their descendants. Documents must not have table model errors.

4.9.12.1 Forming a table

To determine which elements correspond to which slots in a table associated with a table element, to determine the dimensions of the table (xwidth and yheight), and to determine if there are any table model errors, user agents must use the following algorithm:

  1. Let xwidth be zero.

  2. Let yheight be zero.

  3. Let pending tfoot elements be a list of tfoot elements, initially empty.

  4. Let the table be the table represented by the table element. The xwidth and yheight variables give the table's dimensions. The table is initially empty.

  5. If the table element has no children elements, then return the table (which will be empty), and abort these steps.

  6. Associate the first caption element child of the table element with the table. If there are no such children, then it has no associated caption element.

  7. Let the current element be the first element child of the table element.

    If a step in this algorithm ever requires the current element to be advanced to the next child of the table when there is no such next child, then the user agent must jump to the step labeled end, near the end of this algorithm.

  8. While the current element is not one of the following elements, advance the current element to the next child of the table:

  9. If the current element is a colgroup, follow these substeps:

    1. Column groups: Process the current element according to the appropriate case below:

      If the current element has any col element children

      Follow these steps:

      1. Let xstart have the value of xwidth.

      2. Let the current column be the first col element child of the colgroup element.

      3. Columns: If the current column col element has a span attribute, then parse its value using the rules for parsing non-negative integers.

        If the result of parsing the value is not an error or zero, then let span be that value.

        Otherwise, if the col element has no span attribute, or if trying to parse the attribute's value resulted in an error or zero, then let span be 1.

      4. Increase xwidth by span.

      5. Let the last span columns in the table correspond to the current column col element.

      6. If current column is not the last col element child of the colgroup element, then let the current column be the next col element child of the colgroup element, and return to the step labeled columns.

      7. Let all the last columns in the table from x=xstart to x=xwidth-1 form a new column group, anchored at the slot (xstart, 0), with width xwidth-xstart, corresponding to the colgroup element.

      If the current element has no col element children
      1. If the colgroup element has a span attribute, then parse its value using the rules for parsing non-negative integers.

        If the result of parsing the value is not an error or zero, then let span be that value.

        Otherwise, if the colgroup element has no span attribute, or if trying to parse the attribute's value resulted in an error or zero, then let span be 1.

      2. Increase xwidth by span.

      3. Let the last span columns in the table form a new column group, anchored at the slot (xwidth-span, 0), with width span, corresponding to the colgroup element.

    2. Advance the current element to the next child of the table.

    3. While the current element is not one of the following elements, advance the current element to the next child of the table:

    4. If the current element is a colgroup element, jump to the step labeled column groups above.

  10. Let ycurrent be zero.

  11. Let the list of downward-growing cells be an empty list.

  12. Rows: While the current element is not one of the following elements, advance the current element to the next child of the table:

  13. If the current element is a tr, then run the algorithm for processing rows, advance the current element to the next child of the table, and return to the step labeled rows.

  14. Run the algorithm for ending a row group.

  15. If the current element is a tfoot, then add that element to the list of pending tfoot elements, advance the current element to the next child of the table, and return to the step labeled rows.

  16. The current element is either a thead or a tbody.

    Run the algorithm for processing row groups.

  17. Advance the current element to the next child of the table.

  18. Return to the step labeled rows.

  19. End: For each tfoot element in the list of pending tfoot elements, in tree order, run the algorithm for processing row groups.

  20. If there exists a row or column in the table containing only slots that do not have a cell anchored to them, then this is a table model error.

  21. Return the table.

The algorithm for processing row groups, which is invoked by the set of steps above for processing thead, tbody, and tfoot elements, is:

  1. Let ystart have the value of yheight.

  2. For each tr element that is a child of the element being processed, in tree order, run the algorithm for processing rows.

  3. If yheight > ystart, then let all the last rows in the table from y=ystart to y=yheight-1 form a new row group, anchored at the slot with coordinate (0, ystart), with height yheight-ystart, corresponding to the element being processed.

  4. Run the algorithm for ending a row group.

The algorithm for ending a row group, which is invoked by the set of steps above when starting and ending a block of rows, is:

  1. While ycurrent is less than yheight, follow these steps:

    1. Run the algorithm for growing downward-growing cells.

    2. Increase ycurrent by 1.

  2. Empty the list of downward-growing cells.

The algorithm for processing rows, which is invoked by the set of steps above for processing tr elements, is:

  1. If yheight is equal to ycurrent, then increase yheight by 1. (ycurrent is never greater than yheight.)

  2. Let xcurrent be 0.

  3. Run the algorithm for growing downward-growing cells.

  4. If the tr element being processed has no td or th element children, then increase ycurrent by 1, abort this set of steps, and return to the algorithm above.

  5. Let current cell be the first td or th element in the tr element being processed.

  6. Cells: While xcurrent is less than xwidth and the slot with coordinate (xcurrent, ycurrent) already has a cell assigned to it, increase xcurrent by 1.

  7. If xcurrent is equal to xwidth, increase xwidth by 1. (xcurrent is never greater than xwidth.)

  8. If the current cell has a colspan attribute, then parse that attribute's value, and let colspan be the result.

    If parsing that value failed, or returned zero, or if the attribute is absent, then let colspan be 1, instead.

  9. If the current cell has a rowspan attribute, then parse that attribute's value, and let rowspan be the result.

    If parsing that value failed or if the attribute is absent, then let rowspan be 1, instead.

  10. If rowspan is zero, then let cell grows downward be true, and set rowspan to 1. Otherwise, let cell grows downward be false.

  11. If xwidth < xcurrent+colspan, then let xwidth be xcurrent+colspan.

  12. If yheight < ycurrent+rowspan, then let yheight be ycurrent+rowspan.

  13. Let the slots with coordinates (x, y) such that xcurrent ≤ x < xcurrent+colspan and ycurrent ≤ y < ycurrent+rowspan be covered by a new cell c, anchored at (xcurrent, ycurrent), which has width colspan and height rowspan, corresponding to the current cell element.

    If the current cell element is a th element, let this new cell c be a header cell; otherwise, let it be a data cell.

    To establish which header cells apply to the current cell element, use the algorithm for assigning header cells described in the next section.

    If any of the slots involved already had a cell covering them, then this is a table model error. Those slots now have two cells overlapping.

  14. If cell grows downward is true, then add the tuple {c, xcurrent, colspan} to the list of downward-growing cells.

  15. Increase xcurrent by colspan.

  16. If current cell is the last td or th element in the tr element being processed, then increase ycurrent by 1, abort this set of steps, and return to the algorithm above.

  17. Let current cell be the next td or th element in the tr element being processed.

  18. Return to the step labelled cells.

When the algorithms above require the user agent to run the algorithm for growing downward-growing cells, the user agent must, for each {cell, cellx, width} tuple in the list of downward-growing cells, if any, extend the cell cell so that it also covers the slots with coordinates (x, ycurrent), where cellx ≤ x < cellx+width.

4.9.12.2 Forming relationships between data cells and header cells

Each cell can be assigned zero or more header cells. The algorithm for assigning header cells to a cell principal cell is as follows.

  1. Let header list be an empty list of cells.

  2. Let (principalx, principaly) be the coordinate of the slot to which the principal cell is anchored.

  3. If the principal cell has a headers attribute specified
    1. Take the value of the principal cell's headers attribute and split it on spaces, letting id list be the list of tokens obtained.

    2. For each token in the id list, if the first element in the Document with an ID equal to the token is a cell in the same table, and that cell is not the principal cell, then add that cell to header list.

    If principal cell does not have a headers attribute specified
    1. Let principalwidth be the width of the principal cell.

    2. Let principalheight be the height of the principal cell.

    3. For each value of y from principaly to principaly+principalheight-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (principalx,y), and the increments Δx=−1 and Δy=0.

    4. For each value of x from principalx to principalx+principalwidth-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (x,principaly), and the increments Δx=0 and Δy=−1.

    5. If the principal cell is anchored in a row group, then add all header cells that are row group headers and are anchored in the same row group with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or equal to principaly+principalheight-1 to header list.

    6. If the principal cell is anchored in a column group, then add all header cells that are column group headers and are anchored in the same column group with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or equal to principaly+principalheight-1 to header list.

  4. Remove all the empty cells from the header list.

  5. Remove any duplicates from the header list.

  6. Remove principal cell from the header list if it is there.

  7. Assign the headers in the header list to the principal cell.

The internal algorithm for scanning and assigning header cells, given a principal cell, a header list, an initial coordinate (initialx, initialy), and Δx and Δy increments, is as follows:

  1. Let x equal initialx.

  2. Let y equal initialy.

  3. Let opaque headers be an empty list of cells.

  4. If principal cell is a header cell

    Let in header block be true, and let headers from current header block be a list of cells containing just the principal cell.

    Otherwise

    Let in header block be false and let headers from current header block be an empty list of cells.

  5. Loop: Increment x by Δx; increment y by Δy.

    For each invocation of this algorithm, one of Δx and Δy will be −1, and the other will be 0.

  6. If either x or y is less than 0, then abort this internal algorithm.

  7. If there is no cell covering slot (x, y), or if there is more than one cell covering slot (x, y), return to the substep labeled loop.

  8. Let current cell be the cell covering slot (x, y).

  9. If current cell is a header cell
    1. Set in header block to true.

    2. Add current cell to headers from current header block.

    3. Let blocked be false.

    4. If Δx is 0

      If there are any cells in the opaque headers list anchored with the same x-coordinate as the current cell, and with the same width as current cell, then let blocked be true.

      If the current cell is not a column header, then let blocked be true.

      If Δy is 0

      If there are any cells in the opaque headers list anchored with the same y-coordinate as the current cell, and with the same height as current cell, then let blocked be true.

      If the current cell is not a row header, then let blocked be true.

    5. If blocked is false, then add the current cell to the headers list.

    If current cell is a data cell and in header block is true

    Set in header block to false. Add all the cells in headers from current header block to the opaque headers list, and empty the headers from current header block list.

  10. Return to the step labeled loop.

A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a column header if any of the following conditions are true:

A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a row header if any of the following conditions are true:

A header cell is said to be a column group header if its scope attribute is in the column group state.

A header cell is said to be a row group header if its scope attribute is in the row group state.

A cell is said to be an empty cell if it contains no elements and its text content, if any, consists only of White_Space characters.

4.9.13 예제

This section is non-normative.

이 섹션은 번역하지 않습니다.

The following shows how might one mark up the bottom part of table 45 of the Smithsonian physical tables, Volume 71:

<table>
 <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
 <thead>
  <tr>
   <th rowspan=2>Grade.</th>
   <th rowspan=2>Yield Point.</th>
   <th colspan=2>Ultimate tensile strength</th>
   <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th>
   <th rowspan=2>Per cent reduct. area.</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hard</td>
   <td>0.45 ultimate</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Medium</td>
   <td>0.45 ultimate</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Soft</td>
   <td>0.45 ultimate</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

This table could look like this:

Specification values: Steel, Castings, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.
Grade. Yield Point. Ultimate tensile strength Per cent elong. 50.8 mm or 2 in. Per cent reduct. area.
kg/mm2 lb/in2
Hard 0.45 ultimate 56.2 80,000 15 20
Medium 0.45 ultimate 49.2 70,000 18 25
Soft 0.45 ultimate 42.2 60,000 22 30

The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

The following shows how one might mark up the operating expenses table from lower on the same page of that document:

<table>
 <colgroup> <col>
 <colgroup> <col> <col> <col>
 <thead>
  <tr> <th> <th>2008 <th>2007 <th>2006
 <tbody>
  <tr> <th scope=rowgroup> Research and development
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> Percentage of net sales
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> Selling, general, and administrative
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> Percentage of net sales
       <td> 11.6% <td> 12.3% <td> 12.6%
</table>

This table could look like this:

2008 2007 2006
Research and development $ 1,109 $ 782 $ 712
Percentage of net sales 3.4% 3.3% 3.7%
Selling, general, and administrative $ 3,761 $ 2,963 $ 2,433
Percentage of net sales 11.6% 12.3% 12.6%