19. HTML 테이블

소개

1엄청나게 많은 양의 데이터를, 웹 표준을 이용해서 정리하고자 할 땐 어떻게 해야 할까요? 수없이 중첩된 요소들을 잘 정리된 행과 박스들로 정리하려고 하다 보면 머리가 아플 수 있겠지만, 다행히도 해결책이 있습니다 – 테이블이지요.

웹 디자인에서 테이블은 표 형태로 데이터를 정리할 수 있는 좋은 방법입니다. 다른 말로 하면 서로 다른 데이터를 비교하고 대조해볼 수 있도록, 많은 양의 데이터를 표, 차트, 기타 정보를 제공하는 그래픽의 형태로 표현해 주는 것을 떠올려보세요. 이러한 것을 웹사이트에서 자주 볼 수 있습니다. 데이터가 선거 결과이든, 스포츠 경기이든, 가격 비교이든 말이지요.

CSS가 HTML의 구조에서 표현을 분리하는 방법으로 유명해지기 이전에는, 테이블이 웹 페이지의 레이아웃 용도로 쓰였습니다 – 컬럼과 박스를 만들고, 내용을 정렬하는 용도로요. 하지만 이러한 것은 잘못된 것이었는데, 이렇게 하면 수없이 많은 테이블들이 서로 중첩되면서 파일 크기가 커지고, 관리하기가 어려워지고, 이후에 수정하기도 어려워지기 때문입니다. 요즘에도 가끔씩 그러한 것들이 보이긴 하지만, 테이블은 테이블의 용도 – 표 형태의 데이터를 나타내는 용도로만 사용하고, 레이아웃에는 CSS를 써야 합니다.

이 글에서는 HTML 테이블을 잘 사용하는 방법을 다룰 것입니다 – 내용은 다음과 같습니다:

  • 가장 기본적인 테이블
  • 약간의 기능 추가
  • 더 많은 구조들
  • CSS로 스타일을
  • 요약
  • 더 읽어볼 것들
  • 연습문제

가장 기본적인 테이블

기본적인 테이블을 표현하는데 필요한 의미 있는 HTML로 시작해 보겠습니다. 사용할 예제는 북미 지역의 태평양에서 최근 일어난 화산 활동에 대한 것입니다. (북서 태평양의 화산들)

<table>
    <tr>
        <td>화산 이름</td>
        <td>위치</td>
        <td>최근 분출</td>
        <td>분출 종류</td>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

브라우저에서는 이렇게 보일 것입니다:

화산 이름 위치 가장 최근의 분출 분출 종류
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt .St. Helens Washington 1980 Explosive Eruption

위에서 사용된 HTML 마크업을 하나씩 살펴봅시다:

  • <table></table>: 브라우저에게 이 안의 내용이 테이블 형태로 정렬될 것임을 알려줍니다.
  • <tr></tr>: tr 요소는 테이블의 행 을 만듭니다. 브라우저는 이 안에 들어있는 모든 것들을 한 행에 표시할 것입니다.
  • <td></td>: td 요소는 테이블 셀, 혹은 각각의 행 안에 있는 독립된 공간을 정의합니다. 실제 데이터에 필요한 만큼의 td 만을 사용해야 합니다. 공백이나 패딩을 위해서 td를 쓰지 말고, 그러한 것은 CSS를 사용해서 정의해야 합니다. 이렇게 하면 내용과 표현의 분리라는 면에서 좋을 뿐만 아니라, 시각 장애가 있어서 스크린 리더를 사용하는 사람들도 테이블을 쉽게 읽을 수 있습니다.

기본적인 구조는 다음과 같이 중첩되어야 함을 잊지 마세요:

<table>
    <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
    </tr>
</table>

순서를 틀린다면 아주 이상한 것을 보게 될 것입니다.

약간의 기능 추가

기본적인 테이블을 만들었지만, 몇가지 기능을 추가할 수 있습니다. 가장 먼저 캡션과 테이블 헤더를 추가함으로서, 테이블이 의미상으로 좀 더 명확해지고, 스크린 리더 사용자들이 쉽게 판독할 수 있도록 개선해 보겠습니다. 바뀐 테이블은 다음과 같습니다:

<table>
    <caption>북서 태평양의 화산들의 최근 활동</caption>
    <tr>
        <th>화산 이름</th>
        <th>위치</th>
        <th>최근 분출</th>
        <th>분출 종류</th>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt. St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

브라우저에서는 이렇게 보일 것입니다:

북서 태평양의 화산들의 최근 활동
화산 이름 위치 최근 분출 분출 종류
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

새로 사용된 요소들:

  • <caption></caption>: caption 요소는 테이블의 제목을 나타냅니다. 대부분의 브라우저들은 테이블과 같은 너비의 폭을 차지하면서 중앙에 정렬되게끔 캡션을 표시할 것입니다. 물론 CSS를 사용해서 방식을 바꿀 수 있습니다.
  • <th></th>: th 요소는 테이블의 각 열에 대해서 제목을 설명합니다. 이렇게 하면 내용의 기능에 대해 의미를 더하는 것 뿐만 아니라, 다양한 브라우저와 장치들에서 좀 더 정확하게 표현되게끔 할 수 있습니다.

더 많은 구조들

테이블을 구조화하는 것의 마지막으로, 테이블의 헤더와 바디 섹션을 정의하고, 푸터를 더하고, 각 행과 열의 제목이 무엇에 관한 것인지 정의할 것입니다. 또한 테이블의 내용을 설명할 수 있도록 summary 속성을 추가할 것입니다. 이렇게 한 결과의 마크업은:

<table summary="북서 태평양의 화산들의 최근 활동 요약">
    <caption>북서 태평양의 화산들의 최근 활동</caption>
    <thead>
        <tr>
            <th scope="col">화산 이름</th>
            <th scope="col">이름</th>
            <th scope="col">최근 분출</th>
            <th scope="col">분출 종류</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Mt. Lassen</th>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
        </tr>
        <tr>
            <th scope="row">Mt. Hood</th>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
        </tr>
        <tr>
            <th scope="row">Mt. St. Helens</th>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
        </tr>
    </tbody>
</table>

브라우저에서는 이렇게 보일 것입니다:

북서 태평양의 화산들의 최근 활동
화산 이름 위치 최근 분출 분출 종류
Ms Jen. 2008년 작성
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

새로운 요소/속성은:

  • thead, tbody, tfoot 요소: 이 요소들은 각각 테이블의 헤더, 바디, 푸터를 정의합니다. 정말로 복잡한 테이블을 작성하는 것이 아니라면, 이러한 것들은 약간 과도한 것일 수 있습니다. 하지만 복잡한 테이블에서는, 이러한 요소들을 사용하여 내용을 구조화하는 것이 도움이 됩니다.
  • colspan, rowspan 속성: colspan 속성은 테이블의 셀이 하나 이상의 열 로 확장되도록 합니다. 위의 예에서 푸터를 보면, 셀 하나가 테이블 전체로 확장되어 있는 것을 볼 수 있습니다. 마찬가지로, rowspan 속성을 사용해서 셀 하나가 여러개의 행으로 확장되도록 할 수 있습니다. 예를 들어 <td rowspan=”3″>와 같이 입력하면 됩니다.
  • summary 속성: 이 속성은 테이블 내용의 요약을 정의하기 위해 사용되며, 스크린 리더 사용자를 위한 것입니다(화면에는 표시되지 않았습니다). 오래된 W3C 권고인 WCAG 1.0과 HTML 4.0 에서는, summary 요소를 위와 같이 사용할 수 있다고 이야기하고 있습니만, 최근의 명세에서는 summary 요소가 언급되어 있지 않습니다. 이 속성에 관해서는 완전히 결정되지 않은 것으로 보이므로, 우리의 웹 표준 커리큘럼에서는 이것을 사용하는 것이 낫겠다는 결론을 내렸습니다. 무엇보다도, 이 속성을 추가함으로서 잘못되는 것은 없으며, 접근성 측면에서 더 낫기 때문입니다.2
  • scope 속성: th 요소들에 scope 속성이 포함된 것을 보았을 것입니다. 이 속성은 th 요소에 사용되어서, th의 내용이 어떤 열과 행에 적용되는 것인지 설명하는 역할을 합니다. 이 속성은 th 요소에서만 사용될 수 있습니다.

CSS로 스타일을

위에서 설명한 요소와 속성들은 데이터 테이블을 잘 만드는데 필요한 모든 것입니다. 이제 HTML 구조가 자리를 잡았으니, 간단한 CSS를 적용해서 테이블이 좀 더 멋지게 보이도록 해 봅시다.

body {
  background: #ffffff;
  margin: 0;
  padding: 20px;
  line-height: 1.4em;
  font-family: tahoma, arial, sans-serif;
  font-size: 62.5%;
}

table {
  width: 80%;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #333333;
  border-collapse: collapse;
}

td, th {
  border-bottom: 1px solid #333333;
  padding: 6px 16px;
  text-align: left;
}

th {
  background: #EEEEEE;
}

caption {
  background: #E0E0E0;
  margin: 0;
  border: 1px solid #333333;
  border-bottom: none;
  padding: 6px 16px;
  font-weight: bold;
}

이것을 마지막의 테이블 마크업에 적용하면, 테이블은 그림 1처럼 표현될 것입니다. 여기에서 예제를 볼 수도 있습니다

그림 1. 이제 테이블은 시각적으로 좀 더 나아 보입니다.

아, 훨씬 좋군요. 원하는대로 테이블에 스타일을 적용할 수 있지만, 위의 것을 토대로 삼을 수 있을 것입니다. 이 시리즈의 후반에서 테이블의 스타일에 대해 더 많이 배우게 될 것입니다만, 여기에서는 사용한 것에 대해 간단히 설명하도록 하겠습니다.

  • body: 위의 CSS에서는 마진(0), 약간의 패딩, 배경색(흰색), 폰트 크기와 종류, 그리고 줄간격을 설정했습니다. 사용한 코드를 다운로드 받아서, 수정해보면서 어떻게 바뀌는지 볼 수 있을 것입니다.
  • table: CSS 테두리 선언을 이용해서 테두리를 추가했습니다. 이것이 잘 동작하도록 하기 위해, border-collapse 속성을 collapse 로 설정해서 테이블의 기본 값을 덮어 쓰고, 테두리들이 각 셀에서 끊어지는 것이 아니라 한줄로 쭉 이어지도록 했습니다. width 속성은 80%로 지정했으므로, 브라우저 창의 크기가 변함에 따라 그 80%의 크기로 자동으로 변할 것입니다.
  • th와 td: 위의 CSS에서는 텍스트 정렬을 왼쪽으로 설정했습니다만, 자유롭게 할 수 있고, 다양한 th와 td에 클래스명을 정의하고 그것에 따라 더 다양하게 표현할수도 있을 것입니다. 또한 가독성을 위해 두 요소 모두에 약간의 패딩을 주었습니다. th에는 다른 색깔을 적용하여서, 테이블의 나머지 요소와는 달라 보이도록 했습니다.
  • caption: caption 셀렉터에 별다른 CSS 속성을 지정하지 않는다면, 비록 이 요소가 테이블 내부에 있다고 하더라도 테두리를 갖지 않으며, 테이블의 배경색이 아니라 페이지의 배경색을 갖게 됩니다. 따라서, 위의 예제에서는 테두리(테이블 상단 테두리가 있으므로 아래쪽에는 없도록 했습니다)와 조금 다른 배경색, 그리고 두꺼운 글씨를 적용해서 캡션이 테이블의 다른 행 들과는 다르게 보이도록 했습니다.

요약

이 글에서는 HTML 데이터 테이블을 효과적으로 작성하는데 필요한 모든 것을 다루었습니다.

  • 테이블이 웹의 다양한 장치들에서 올바르게 읽혀지도록 정확하게 작성하는 것이 중요합니다. 테이블에 관한 HTML 코드는 최소한으로 유지하는 것이 가장 좋으며, 스타일은 CSS를 이용해서 적용해야 합니다. CSS에 관해서는 이후에 더 많이 배우게 될 것입니다.
  • 코드를 깔끔하게 하고, caption 요소나 scope, summary 같은 속성들을 잘 사용함으로서 모바일 장치나 스크린 리더에서 테이블을 정확하게 읽을 수 있을 것입니다. 또한 빈 셀을 이용해서 공백을 만드는 것 역시 피해야 합니다(그런 용도로는 CSS를 사용해야 합니다)

더 읽을것들

연습문제

  • 테이블의 3가지 주요 요소인 table, tr, td 만으로 단순한 테이블을 하나 만들어 보세요. 브라우저에서 어떻게 보이는지 확인해 보세요.
  • 두번째 예제 처럼, 캡션과 헤더, 푸터를 더해 보세요. 브라우저에서는 어떻게 바뀌나요?
  • 스크린 리더나 모바일 장비에서 좀 더 접근성있게 하려면 어떻게 해야 할까요?
  • CSS 파일을 만들어서 테두리, 패딩, 셀 사이의 간격 같은 것을 HTML 마크업에 전혀 손대지 말고 CSS 만으로 바꿔보세요. 배경색을 추가하고 폰트에 스타일을 줘 보세요.

저자

Ms. Jen 은 생후 11개월부터 음식에 관한 그림과 벽화들을 그려 온 전문적인 웹 디자이너/개발자입니다. 그녀는 1996에 컴퓨터 상점에서 예술가들은 코드에 무지하다는 말을 들은 다음부터 HTML을 배워 왔는데, 그 후로 웹 디자인에 관한 것은 무엇이든지 다 즐기고 있습니다.

Ms. Jen은 웹 &amp; 모바일 디자인 회사인 Black Phoebe Designs의 설립자이며 소유주입니다. Ms. Jen은 아일랜드 더블린의 Trinity 대학에서 컴퓨터 과학과 멀티미디어 시스템 학위를 받았으며, 2001년부터 2005년까지 LA 근교의 대학에서 웹 디자인을 가르쳤습니다. 그녀는 두개의 노키아 모바일 블로그 프로젝트에 참여한 바 있는데, 그것들은 Wasabi Lifeblog (2004–2005) 와 Nokia Urbanista Diaries (2008) 입니다. Ms. Jen을 온라인에서 만나려면 blackphoebe.com 또는 blackphoebe.mobi 를 방문하면 됩니다.

  1.  역주: 저자는 “쉬운” 표현을 사용하면서 거부감 없게 글을 쓰려고 한 것 같지만, 문화의 차이 및 역자의 부족함 때문에 이러한 부분을 빠짐없이 옮기려고 하면 어색해지는 점이 있어서 다소 없애면서 의역하였습니다. 내용 자체는 변한것이 없지만 표현이 많이 축소되었습니다. 양해 바랍니다.
  2. 역주: HTML 5 명세에서는 “가급적 summary 속성이 필요하지 않도록 테이블을 만드는것이 가장 좋다”, “시각적 장애를 가진 이와 그렇지 않은 이 모두에게 도움이 되는 텍스트라면 캡션에 놓는 것이 좋다” 라고 하고 있습니다. 또한 위의 예제에서처럼 summary 속성과 caption 요소에 거의 같은 내용이 포함되는 것은 그다지 좋은 예제라고 할 수는 없을 것입니다.
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.