HTML <table> 태그 – 올바른 이해와 사용 방법

`<table>` 태그의 정의 및 사용법

<table> 태그는
데이터가 있는 테이블(table, 표)를 나타냅니다.

이 태그의 내부는 테이블의 데이터와 구조 등을 나타내는 관련 태그들로 구성되어 있습니다.

예제

이제 실제 예제로 간단한 테이블을 만들어 보겠습니다.
(CSS를 사용해서 테이블의 구성 요소의 주변에 선을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.)

먼제 '실제 적용된 모습'을 보고 HTML의 구조를 살펴보세요.

실제 적용된 모습

분식점 메뉴
메뉴	가격
라면	5,000
김밥	4,000

HTML

<table>
    <caption>분식점 메뉴</caption>
    <tr>
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>

CSS

table {
    border: 2px solid black; /* 요소의 경계에 2px의 검은색 테두리 지정 */
}
th, td {
    border: 1px solid gray; /* 요소의 경계에 1px의 회색 테두리 지정 */
    padding: 0.5em 1.5em; /* 요소의 안쪽 여백 간격(위아래 0.5em, 좌우 1.5em) 지정 */
}
th {
    background-color: #e6e6e6; /* 옅은 회색의 배경색 지정 */
}

이 예제를 보면 알 수 있듯이 <table> 태그는 테이블을 나타내고, 테이블의 데이터와 구조 등은 관련 태그로 나타냅니다.

부연설명
<table> 태그와 이 태그와 관련된 태그(예를 들어, <tr>과 <td>)로 마크업을 하면 기본적으로 화면에서 격자(그리드) 형태의 테이블 레이아웃을 가지게 됩니다.

다음은 <table> 태그 내에서 테이블의 데이터와 구조 등을 나타내는 관련 태그들입니다.

table 태그 내에서 테이블의 데이터와 구조 등을 나타내는 관련 태그들
`<caption>`	테이블의 설명 또는 제목을 나타냅니다.
`<tr>`	테이블 셀의 행(가로 방향, table row)을 나타냅니다.
`<td>`	테이블의 데이터 셀(data cell)을 나타냅니다.
`<th>`	테이블의 헤더 셀(header cell)을 나타냅니다.
`<thead>`	테이블 헤더(머리글)에 해당하는 행(`<tr>`)들의 그룹을 나타냅니다.
`<tbody>`	테이블 본문에 해당하는 행(`<tr>`)들의 그룹을 나타냅니다.
`<tfoot>`	테이블 푸터(바닥글)에 해당하는 행(`<tr>`)들의 그룹을 나타냅니다.
`<col>`	테이블 셀의 열(가로 방향, table column)을 나타냅니다.
`<colgroup>`	테이블 셀의 열 그룹(가로 방향 그룹, table column group)을 나타냅니다.

속성

<table> 태그는 모든 전역 속성만을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

align
bgcolor
border
cellpadding
cellspacing
frame
rules
summary
width

기술적인 문법 요약

table 태그의 구문 형식
허용되는 콘텐츠	다음의 순서대로 허용됩니다. 선택적으로 `<caption>` 0개 이상의 `<colgroup>` 선택적으로 `<thead>` 다음 중 하나가 허용됩니다. 0개 이상의 `<tbody>` 하나 이상의 `<tr>` 선택적으로 `<tfoot>`
암시적인 `role` 속성 값	`table`
허용된 `role` 속성 값	모두(Any)

주의할 점

<table> 태그와 이 태그와 관련된 태그(예를 들어, <tr>과 <td>)로 마크업을 하면 기본적으로 화면에서 격자(그리드) 형태의 테이블 레이아웃이 표현됩니다. <table> 태그의 의미론적인 사용 이외에 단순히 화면에서 격자(그리드) 형태의 레이아웃 스타일을 사용하기 위해서 사용하지 말아야 합니다.

<table> 태그는 데이터가 있는 테이블(table, 표)를 나타내기 위해 사용하는 것으로, 이 용도 이외에 단순히 화면에서 격자 형태의 레이아웃을 구현하려는 경우 CSS의 Flexbox나 Grid와 같은 레이아웃 기술을 사용하는 것이 바람직합니다.