HTML <table>: 표 요소

ALATTA

HTML <table>: 표 요소

HTML <table> 요소는 표 데이터, 즉 칸의 행과 열로 이루어진 2차원 데이터를 나타냅니다.

<table>
  <caption>우리 매장 원산지 표기</caption>
  <thead>
    <tr>
      <th>종류</th>
      <th>품목</th>
      <th>원산지</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">과일</th>
      <td>사과</td>
      <td rowspan="2">국산</td>
    </tr>
    <tr>
      <td>배</td>
    </tr>
    <tr>
      <td>파인애플</td>
      <td>수입산</td>
    </tr>
    <tr>
      <th>곡물</th>
      <td>쌀</td>
      <td>국산</td>
    </tr>
    <tr>
      <th>해산물</th>
      <td>고등어</td>
      <td>원양산</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid #777;
  padding: 8px;
}

th {
  background: #efefef;
  color: #333;
}

불러오는 중...

특성

전역 특성만 포함합니다.

예제

기본 사용법

열 그룹이나 여러 행/열에 걸친 칸을 포함하지 않는, 기초적인 구조의 표를 보이는 예제입니다. <table> 요소와 그 구성요소에는 테두리가 포함되지 않으므로, 표를 읽기 쉽도록 간단한 검은색 테두리를 추가합니다.

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>실</th>
      <th>팀</th>
      <th>사번</th>
      <th>입사일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>간우선</th>
      <td>신사업실</td>
      <td>제1영업팀</td>
      <td>120073</td>
      <td><time datetime="2021-01-13">2021년 1월 13일</time></td>
    </tr>
    <tr>
      <th>진소훈</th>
      <td>신사업실</td>
      <td>제3영업팀</td>
      <td>108028</td>
      <td><time datetime="2020-06-03">2020년 6월 3일</time></td>
    </tr>
    <tr>
      <th>문규연</th>
      <td>인사실</td>
      <td>보상팀</td>
      <td>110301</td>
      <td><time datetime="2020-12-28">2020년 12월 28일</time></td>
    </tr>
  </tbody>
</table>

table,
th,
td {
  border: 1px solid #000;
}

불러오는 중...

칸 병합

위의 예제에 이어서, 워드프로세서나 스프레드시트의 “칸 병합”과 같은 기능을 보이는 예제입니다.

“간우선”과 “진소훈”의 실 단위 소속이 “신사업실”로 같으므로 두 명의 소속실을 하나의 칸으로만 나타내겠습니다. 그리고 “실”과 “팀” 헤더가 한 눈에 들어오지 않으므로, 두 헤더 위에 “부서”라는 칸을 하나 더 배치해보겠습니다. 이번에는 결과를 먼저 확인하세요.

불러오는 중...
HTML

<thead>에 행을 하나 더 추가했고, “진소훈”의 신사업실 칸을 제거한 것 외에는 구조가 바뀌지는 않습니다.

<table>
  <thead>
    <tr>
      <th rowspan="2">이름</th>
      <th colspan="2">부서</th>
      <th rowspan="2">사번</th>
      <th rowspan="2">입사일</th>
    </tr>
    <tr>
      <th>실</th>
      <th>팀</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>간우선</th>
      <td rowspan="2">신사업실</td>
      <td>제1영업팀</td>
      <td>120073</td>
      <td><time datetime="2031-01-13">2031년 1월 13일</time></td>
    </tr>
    <tr>
      <th>진소훈</th>
      <td>제3영업팀</td>
      <td>108028</td>
      <td><time datetime="2030-06-03">2030년 6월 3일</time></td>
    </tr>
    <tr>
      <th>문규연</th>
      <td>인사실</td>
      <td>보상팀</td>
      <td>110301</td>
      <td><time datetime="2030-12-28">2030년 12월 28일</time></td>
    </tr>
  </tbody>
</table>

중요한 변경점은 “이름”, “사번”, “입사일”과 “신사업실”에 rowspan="2"을 사용한 것입니다. 네 개의 칸이 하나의 행 대신 두 개의 행을 차지하는 모습에 주목하세요. 마찬가지로, colspan="2"를 지정한 “부서” 칸이 두 개의 열에 걸쳐있는 것도 결과에서 볼 수 있습니다.

table,
th,
td {
  border: 1px solid #000;
}

병합한 칸을 포함하는 표는 접근성이 떨어질 수 있습니다.

접근성

표 설명

표의 용도를 간결하고 명확하게 설명하는 <caption> 요소를 추가하면 표를 읽어봐야 할지 아니면 그냥 넘어가도 괜찮을지를 사용자가 결정할 때 도움이 됩니다.

스크린 리더와 같은 접근성 보조 기술 사용자와 저시력 또는 인지력 저하 사용자에게 특히 유용합니다.

헤더 범위 지정

간단한 표에서는 <th> 요소의 scope 특성이 불필요합니다. 일반적으로는 헤더의 범위가 자동으로 유추되기 때문입니다. 그러나 일부 보조기술은 자동 유추를 제대로 수행하지 못할 수 있으므로, 범위를 명시하는 것이 사용자 경험을 개선할 가능성도 있습니다.

복잡한 표에서는 직접 범위를 지정해서 헤더가 어떤 칸에 적용되는지 나타낼 수 있습니다.

예제
<table>
  <caption>
    색 이름과 색상 코드
  </caption>
  <tbody>
    <tr>
      <th scope="col">이름</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>

<th> 요소에 scope="col"을 지정하면 헤더가 열의 맨 위에 있다고 나타낼 수 있고, scope="row"를 지정하면 행의 맨 처음에 있다고 나타낼 수 있습니다.

복잡한 표

표가 너무 복잡해서 칸을 꼭 하나의 행이나 열로 설명할 수 없는 경우에는 스크린 리더를 포함한 접근성 보조기술이 표를 읽는 것에 어려움을 겪을 수 있습니다. colspan과 rowspan 특성이 존재하면 복잡한 표라고 생각할 수 있습니다.

표의 내용을 나눠서 colspan과 rowspan이 없는 작은 표 여러 개로 표현하는 것이 이상적입니다. 보조 기술 사용자는 물론 인지력이 저하된 사용자가 표의 레이아웃을 이해하는 수고를 줄일 수 있습니다.

그러나 표를 쪼갤 수 없는 경우에는 id와 headers 특성을 사용해서 칸 각각이 속한 헤더를 직접 가리키세요.

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
table
align
bgcolor
border
cellpadding
cellspacing
frame
rules
summary
width

같이 보기