From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/table/index.html | 370 +++++++++++++++++++++++++++++ 1 file changed, 370 insertions(+) create mode 100644 files/ko/web/html/element/table/index.html (limited to 'files/ko/web/html/element/table') diff --git a/files/ko/web/html/element/table/index.html b/files/ko/web/html/element/table/index.html new file mode 100644 index 0000000000..2579638730 --- /dev/null +++ b/files/ko/web/html/element/table/index.html @@ -0,0 +1,370 @@ +--- +title: +slug: Web/HTML/Element/table +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Web + - 표 +translation_of: Web/HTML/Element/table +--- +
{{HTMLRef}}
+ +

HTML <table> 요소는 행과 열로 이루어진 표를 나타냅니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
콘텐츠 카테고리플로우 콘텐츠.
가능한 콘텐츠순서대로, +
+
+
    +
  1. 선택적인 {{HTMLElement("caption")}} 요소
    2. +
  2. 0개 이상의 {{HTMLElement("colgroup")}} 요소
    3. +
  3. 선택적인 {{HTMLElement("thead")}} 요소
    4. +
  4. 다음 중 하나 +
      +
    • 0개 이상의 {{HTMLElement("tbody")}} 요소
      • +
    • 0개 이상의 {{HTMLElement("tr")}} 요소
      • +
    +
    5. +
  5. 선택적인 {{HTMLElement("tfoot")}} 요소
    6. +
+
+
+
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할모두
DOM 인터페이스{{domxref("HTMLTableElement")}}
+ +

특성

+ +

이 요소는 전역 특성만 포함합니다.

+ + + +

예제

+ +

간단한 표

+ +
<table>
+  <tr>
+    <td>John</td>
+    <td>Doe</td>
+  </tr>
+  <tr>
+    <td>Jane</td>
+    <td>Doe</td>
+  </tr>
+</table>
+
+ +

{{ EmbedLiveSample('간단한_표', '100%', '100') }}

+ +

추가 예제

+ +
<p>Simple table with header</p>
+<table>
+  <tr>
+    <th>First name</th>
+    <th>Last name</th>
+  </tr>
+  <tr>
+    <td>John</td>
+    <td>Doe</td>
+  </tr>
+  <tr>
+    <td>Jane</td>
+    <td>Doe</td>
+  </tr>
+</table>
+
+<p>Table with thead, tfoot, and tbody</p>
+<table>
+  <thead>
+    <tr>
+      <th>Header content 1</th>
+      <th>Header content 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Footer content 1</td>
+      <td>Footer content 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Body content 1</td>
+      <td>Body content 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<p>Table with colgroup</p>
+<table>
+  <colgroup span="4" class="columns"></colgroup>
+  <tr>
+    <th>Countries</th>
+    <th>Capitals</th>
+    <th>Population</th>
+    <th>Language</th>
+  </tr>
+  <tr>
+    <td>USA</td>
+    <td>Washington D.C.</td>
+    <td>309 million</td>
+    <td>English</td>
+  </tr>
+  <tr>
+    <td>Sweden</td>
+    <td>Stockholm</td>
+    <td>9 million</td>
+    <td>Swedish</td>
+  </tr>
+</table>
+
+<p>Table with colgroup and col</p>
+<table>
+  <colgroup>
+    <col class="column1">
+    <col class="columns2plus3" span="2">
+  </colgroup>
+  <tr>
+    <th>Lime</th>
+    <th>Lemon</th>
+    <th>Orange</th>
+  </tr>
+  <tr>
+    <td>Green</td>
+    <td>Yellow</td>
+    <td>Orange</td>
+  </tr>
+</table>
+
+<p>Simple table with caption</p>
+<table>
+  <caption>Awesome caption</caption>
+  <tr>
+    <td>Awesome data</td>
+  </tr>
+</table>
+
+ + + +

{{ EmbedLiveSample('추가_예제', '100%', '700') }}

+ +

접근성 고려사항

+ +

설명문

+ +

표의 목적에 대한 명확하고 상세한 설명을 포함하는 {{HTMLElement("caption")}} 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.

+ +

특히 스크린 리더 등 보조 기술 사용자와 낮은 시력의 사용자, 그리고 인지능력의 저하를 겪고 있는 사용자에게 도움이 됩니다.

+ + + +

행과 열 범위 지정

+ +

간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에, 헤더 요소의 {{htmlattrxref("scope", "th")}} 특성은 불필요합니다. 그러나 일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에, 범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다. 복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다.

+ +

예제

+ +
<table>
+  <caption>Color names and values</caption>
+  <tbody>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">HEX</th>
+      <th scope="col">HSLa</th>
+      <th scope="col">RGBa</th>
+    </tr>
+    <tr>
+      <th scope="row">Teal</th>
+      <td><code>#51F6F6</code></td>
+      <td><code>hsla(180, 90%, 64%, 1)</code></td>
+      <td><code>rgba(81, 246, 246, 1)</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Goldenrod</th>
+      <td><code>#F6BC57</code></td>
+      <td><code>hsla(38, 90%, 65%, 1)</code></td>
+      <td><code>rgba(246, 188, 87, 1)</code></td>
+    </tr>
+  </tbody>
+</table>
+
+ +

{{htmlelement("th")}} 요소에 scope="col"을 선언함으로써, 해당 칸이 열의 맨 위에 위치함을 설명할 수 있습니다. 마찬가지로, scope="row"를 추가하면 해당 칸이 행의 맨 앞에 위치함을 설명합니다.

+ + + +

복잡한 표

+ +

너무나 복잡해서 헤더 칸을 확실히 가로 또는 세로로 연결할 수 없는 표의 경우, 스크린 리더와 같은 보조 기술이 분석할 때 어려움을 겪을 수 있습니다. 보통 {{htmlattrxref("colspan", "td")}}과 {htmlattrxref("rowspan", "td")}} 특성이 존재하는 경우 이 정도로 복잡한 표라고 할 수 있습니다.

+ +

이상적으로 보자면, 테이블의 콘텐츠를 나타내는 다른 방법을 생각하는 것이 좋습니다. 이를테면 서로 관련된 더 작은 표로 나눠서 colspan, rowspan 특성의 필요를 제거하는 것입니다. 보조 기술 사용자의 테이블 콘텐츠 이해에 도움을 줄 뿐 아니라, 인지력 문제를 겪고 있어 기존 표의 레이아웃을 이해하는 것이 곤란한 사용자의 경험도 개선할 수 있습니다.

+ +

표를 나눌 수 없는 경우 {{htmlattrxref("id")}}와 {{htmlattrxref("headers", "td")}} 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}{{Spec2('HTML5 W3C')}}
+ +

브라우저 호환성

+ +

{{Compat("html.elements.table")}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf