| 콘텐츠 카테고리 | 플로우 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 순서대로,
|
| 태그 생략 | {{no_tag_omission}} |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | {{domxref("HTMLTableElement")}} |
이 요소는 전역 특성만 포함합니다.
This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:
left: the table is displayed on the left side of the document;center: the table is displayed in the center of the document;right: the table is displayed on the right side of the document.Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to auto or {{cssxref("margin")}} to 0 auto to achieve an effect that is similar to the align attribute.
The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '#'. One of the predefined color kewords can also be used.
To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.
This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the {{htmlattrxref("frame", "table")}} attribute is set to void.
To achieve a similar effect, use the CSS {{cssxref("border")}} shorthand property.
This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).
To achieve a similar effect, apply the {{cssxref("border-collapse")}} property to the <table> element, with its value set to collapse, and the {{cssxref("padding")}} property to the {{HTMLElement("td")}} elements.
This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <table> element. border-spacing does not have any effect if {{cssxref("border-collapse")}} is set to collapse.
This enumerated attribute defines which side of the frame surrounding the table must be displayed.
To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.
This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
none, which indicates that no rules will be displayed; it is the default value;groups, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;rows, which will cause the rules to be displayed between rows;columns, which will cause the rules to be displayed between columns;all, which will cause the rules to be displayed between rows and columns.To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.
This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.
<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>
table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}
{{ 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")}} 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.
| Specification | Status | Comment |
|---|---|---|
| {{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")}}
<table> 요소 스타일링에 특히 도움이 되는 CSS 속성