본문으로 바로가기

테이블은 사실 사용을 자제하는 요소입니다. 테이블은 접근성에 문제가 있고 이를 구현하는데 브라우저는 많은 자원을 소모하기 때문입니다.

TABLE 요소

table 요소는 테이블(TABLE) 범위를 표시한다.

<table border="1" summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
<caption>중간고사 성적표</caption>
<tr>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
    <th scope="col">점수</th>
    <th scope="col">등급</th>
</tr>
<tr>
    <td>홍길동</td>
    <td>경영학과</td>
    <td>90</td>
    <td>A</td>
</tr>
<tr>
    <td>전지현</td>
    <td>영문학과</td>
    <td>80</td>
    <td>B</td>
</tr>
</table>

  • 테이블은 행과 열에 의해 만들어진 격자가 연속적으로 이어지는 구조로 주로 2차원 데이터를 그리드 형태로 표시할 때 사용한다.
  • 테이블을 페이지 레이아웃을 제어하기 위한 용도로 사용하는 것을 금한다.
  • 테이블의 의미적 마크업 수준이 높지 않기 때문에 되도록 자제한다.
  • 테이블을 렌더링할때 브라우저가 겪어야 하는 수많은 시행착오를 고려한다면 성능적으로도 비추천된다.

summary 속성

summary 속성은 테이블 요약을 지정한다. 테이블 요약은 복잡한 구성의 테이블에 대한 설명 정보를 의미하는데 HTML5에서는 권장되지 않는 요소이다.

<table summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
...
</table>

suummary 속성은 문서 상에 나타나지 않고 스크린리더와 같이 해당 정보를 필요로 하는 사용자 도구에 의해서만 출력된다. 문제는 summary 속성이 테이블의 caption 요소보다 먼저 등장하기 때문에 혼란을 야기한다.

border 속성

border 속성은 테이블 테두리선을 지정한다. 기본적으로 테이블은 테두리선을 나타내지 않기 때문에 테두리선을 보이게 하려면 border 속성을 지정해야 한다.

<table border="1" summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
...
</table>

HTML5에서는 border의 속성값으로 1 혹은 "" 만 지원하여 테두리가 있거나 없거나 여부만을 지정하도록 하고 있다. 그 밖의 다루지 않는 cellpadding, cellspacing, frame, rules, width 는 HTML5에서 권장하지 않는다.

CAPTION 요소

caption 요소는 테이블 제목(CAPTION)을 표시한다. 캡션은 사진이나 도해에 붙이는 간단한 제목이나 설명을 의미하는데 여기에서는 테이블 제목정도로 해석된다.

<table border="1" summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
<caption>중간고사 성적표</caption>
...
</table>
  • caption 요소는 가장 먼저 읽혀져야 하는 제목 요소이니 table 요소 바로 다음에 위치한다.
  • 테이블 당 한개의 caption 요소만 지정할 수 있다.
  • caption 요소로 표시된 제목은 테이블 위에 가운데 정렬로 배치된다.

TR 요소

tr 요소는 테이블 행(Table Row)을 표시한다.

  • 하나의 행을 표시하려면 하나의 tr 요소가 필요하다.
  • tr 요소는 th나 td 요소를 포함해야 한다.

TH 요소

th 요소는 테이블 헤더 셀(Table Header cell, 이하 헤더 셀)을 표시한다. 테이블 셀은 헤더 정보를 담고 있는 헤더 셀(th 요소)과 실제 데이터를 담고 있는 데이터 셀(td 요소)로 구분된다.

헤더는 머리부분, 즉 제목을 의미하므로 헤더 셀은 데이터 셀의 제목으로 볼 수 있다. 본문에서 제목을 제공하듯이 테이블에도 제목을 제공해야 하므로 제목에 해당하는 셀은 th 요소로 표시한다.

  • 헤더 셀은 맨 왼쪽 혹은 맨 윗쪽에 위치한다.
  • 제목과 내용을 구분하기 위해 헤더 셀의 텍스트는 굵은 서체, 가운데 정렬로 표현된다.

scope 속성

scope 속성은 헤더 셀의 범위를 지정한다.

  • scope="row" : 헤더 셀이 가로 행에 적용된다.
    <table border="1" summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
    <caption>중간고사 성적표</caption>
    <tr>
        <th>이름</th>
        <th>학과</th>
        <th>점수</th>
        <th>등급</th>
    </tr>
    <tr>
        <td>1</td>
        <th scope="row">홍길동</th>
        <td>경영학과</td>
        <td>90</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <th scope="row">전지현</th>
        <td>영문학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    <tr>
        <td>3</td>
        <th scope="row">김철수</th>
        <td>건축학과</td>
        <td>70</td>
        <td>C</td>
    </tr>
    </table>
    

  • scope="col" : 헤더 셀이 세로 행에 적용된다.
    <table border="1" summary="이 표는 교양 필수인 미학 과목에 관한 1, 2학년 중간고사 성적 및 평균을 정리해 놓은 표입니다.">
    <caption>중간고사 성적표</caption>
    <tr>
        <th scope="col">번호</th>
        <th scope="col">이름</th>
        <th scope="col">학과</th>
        <th scope="col">점수</th>
        <th scope="col">등급</th>
    </tr>
    <tr>
        <td>1</td>
        <th scope="row">홍길동</th>
        <td>경영학과</td>
        <td>90</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <th scope="row">전지현</th>
        <td>영문학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    <tr>
        <td>3</td>
        <th scope="row">김철수</th>
        <td>건축학과</td>
        <td>70</td>
        <td>C</td>
    </tr>
    </table>
    

  • scope="rowgroup" : 헤더 셀이 행 그룹에 적용된다.
    <table border="1">
    <caption>중간고사 성적표</caption>
    
    <thead>
    <tr>
        <th scope="col">번호</th>
        <th scope="col">이름</th>
        <th scope="col">학과</th>
        <th scope="col">점수</th>
        <th scope="col">등급</th>
    </tr>
    </thead>
    
    <tfoot>
    <tr>
        <td colspan="3">전체평균</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tfoot>
    
    <tbody>
    <tr>
    <th colspan="5" scope="rowgroup">1학년</th>
    </tr>
    <tr>
        <td>1</td>
        <th scope="row">홍길동</th>
        <td>경영학과</td>
        <td>90</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <th scope="row">전지현</th>
        <td>영문학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tbody>
    
    <tbody>
    <tr>
    <th colspan="5" scope="rowgroup">2학년</th>
    </tr>
    <tr>
        <td>3</td>
        <th scope="row">김철수</th>
        <td>건축학과</td>
        <td>70</td>
        <td>C</td>
    </tr>
    <tr>
        <td>4</td>
        <th scope="row">송혜교</th>
        <td>생물학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tbody>
    </table>
    

  • scope="colgroup" : 헤더 셀이 열 그룹에 적용된다.
    <table border="1">
    <caption>중간고사 성적표</caption>
    
    <thead>
    <tr>
        <th colspan="5" scope="colgroup">1, 2학년 성적표</th>
    </tr>
    <tr>
        <th scope="col">번호</th>
        <th scope="col">이름</th>
        <th scope="col">학과</th>
        <th scope="col">점수</th>
        <th scope="col">등급</th>
    </tr>
    </thead>
    
    <tfoot>
    <tr>
        <td colspan="3">전체평균</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tfoot>
    
    <tbody>
    <tr>
    <th colspan="5" scope="rowgroup">1학년</th>
    </tr>
    <tr>
        <td>1</td>
        <th scope="row">홍길동</th>
        <td>경영학과</td>
        <td>90</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <th scope="row">전지현</th>
        <td>영문학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tbody>
    
    <tbody>
    <tr>
    <th colspan="5" scope="rowgroup">2학년</th>
    </tr>
    <tr>
        <td>3</td>
        <th scope="row">김철수</th>
        <td>건축학과</td>
        <td>70</td>
        <td>C</td>
    </tr>
    <tr>
        <td>4</td>
        <th scope="row">송혜교</th>
        <td>생물학과</td>
        <td>80</td>
        <td>B</td>
    </tr>
    </tbody>
    </table>
    

TD 요소

td 요소는 테이블의 데이터 셀(Table Data cell)을 표시한다. 데이터 셀은 데이터를 담고 있는 공간으로써 테이블 구조를 만드는 기본 구성요소다.

colspan 속성

colspan 속성은 세로행(column)의 병합 범위(column span)을 지정한다. 이것은 셀을 가로 방향으로 합치는 것을 의미하는데 셀 개수에 의해 병합 범위가 정해진다.

<table border="1">
<caption>테스트</caption>
<tr>
    <td colspan="2">셀 1-2</td>
    <td>셀 3</td>
</tr>
<tr>
    <td>셀 4</td>
    <td>셀 5</td>
    <td>셀 6</td>
</tr>
</table>

rowspan 속성

rowspan 속성은 가로 행(row)의 병합 범위(row span)을 지정한다. 이것은 셀을 세로 방향으로 합치는 것을 의미하는데 셀 개수에 따라 병합 범위가 정해진다.

<table border="1">
<caption>테스트</caption>
<tr>
    <td rowspan="2">셀 1-4</td>
    <td>셀 2</td>
    <td>셀 3</td>
</tr>
<tr>
    <td>셀 5</td>
    <td>셀 6</td>
</tr>
</table>

headers 속성

headers 속성은 데이터 셀과 연결된 헤더 셀을 지정한다. 스크린리더 사용자는 테이블을 시각적으로 처리할 수 없으므로 헤더 셀과 데이터 셀을 일일이 연결하면서 테이블 정보를 읽어가는데 복잡한 구조의 테이블은 이것이 매우 어렵다. 이럴 때 헤더 셀의 id 속성, 데이터 셀의 headers 속성을 이용하면 헤더 셀과 데이터 셀을 정확하게 연결할 수 있다.

<table border="1">
<caption>테스트</caption>
<tr>
    <th rowspan="2">구분</th>
    <th colspan="2" scope="colgroup" id="first">1학년</th>
    <th colspan="2" scope="colgroup" id="second">2학년</th>
</tr>
<tr>
    <th scope="col" id="hong">홍길동</th>
    <th scope="col" id="jeon">전지현</th>
    <th scope="col" id="kim">김철수</th>
    <th scope="col" id="song">송혜교</th>
</tr>
<tr>
    <th scope="row" id="mandatory">전공필수</th>
    <td headers="first hong mandatory">100</td>
    <td headers="first jeon mandatory">90</td>
    <td headers="second kim mandatory">80</td>
    <td headers="second song mandatory">70</td>
</tr>
<tr>
    <th scope="row" id="optional">전공선택</th>
    <td headers="first hong optional">60</td>
    <td headers="first jeon optional">50</td>
    <td headers="second kim optional">40</td>
    <td headers="second song optional">30</td>
</tr>
</table>

COLGROUP 요소

colgroup 요소는 열 그룹(COLumn GROUP)을 표시한다. 열은 세로 행을 말하며, 이것을 하나의 그룹으로 묶으면 열 그룹이 된다. 이 요소는 CAPTION 요소 바로 다음에 작성해야 하며 주로 열 그룹에 스타일을 지정할 때 사용한다.

<table border="1">
<caption>중간고사 성적표</caption>
<colgroup span="2" style="background-color:aqua">
</colgroup>
<colgroup span="2" style="background-color:beige">
</colgroup>
<tr>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
    <th scope="col">점수</th>
    <th scope="col">등급</th>
</tr>
<tr>
    <th scope="row">홍길동</th>
    <td>경영학과</td>
    <td>90</td>
    <td>A</td>
</tr>
<tr>
    <th scope="row">전지현</th>
    <td>영문학과</td>
    <td>80</td>
    <td>B</td>
</tr>
<tr>
    <th scope="row">김철수</th>
    <td>건축학과</td>
    <td>70</td>
    <td>C</td>
</tr>
</table>

COL 요소

col 요소는 테이블 열(table COLumn, 이하 열)을 표시한다. tr 요소를 이용하여 한 행에 일괄적으로 스타일을 적용하듯이 col 요소를 이용하면 열 기준으로도 일괄적으로 스타일을 적용할 수 있기 때문에 작업효율성을 높이는데 도움된다.

<table border="1">
<caption>중간고사 성적표</caption>
<colgroup span="2" style="background-color:aqua">
<col style="background-color:greenyellow">
<col span="3">
</colgroup>
<tr>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
    <th scope="col">점수</th>
    <th scope="col">등급</th>
</tr>
<tr>
    <th scope="row">홍길동</th>
    <td>경영학과</td>
    <td>90</td>
    <td>A</td>
</tr>
<tr>
    <th scope="row">전지현</th>
    <td>영문학과</td>
    <td>80</td>
    <td>B</td>
</tr>
<tr>
    <th scope="row">김철수</th>
    <td>건축학과</td>
    <td>70</td>
    <td>C</td>
</tr>
</table>

THEAD 요소

thead 요소는 테이블 헤더 그룹(Table HEADer group)을 표시한다. 문서와 마찬가지로 테이블도 헤더, 보디, 푸터로 그룹핑할 수 있다. 각각 thead, tbody, tfoot 요소로 표시하는데, 이럴때 그룹핑 대상은 행(table row)이다.

col 요소가 열을 묶는 것이라면 thead, tbody, tfoot 요소는 행을 묶는 것이다. 행을 묶는 것은 브라우저에 테이블에 대한 구조적 정보를 알리기 위해서며, 이를 통해 브라우저는 그룹별로 테이블을 렌더링할 수 있게 된다.

  • thead 요소는 대개 1개의 행으로 이루어져 있지만 어떤 때에는 2~3개의 행이 테이블 헤더가 될 수 있다.
  • 테이블이 너무 길어 여러 장에 걸쳐 나누어 인쇄될 때, 첫 장만 테이블 헤더가 출력되는데, 만약 장마다 테이블 헤더를 출력시키고자 한다면 thead 요소를 사용할 필요가 있다.
  • 테이블 당 하나의 thead 요소만 둘 수 있다.

TFOOT 요소

tfoot 요소는 테이블 푸터 그룹(Table FOOTer group)을 표시한다.

  • 문서 모델과 달리 테이블 모델에서는 테이블 푸터가 테이블 보디보다 먼저 렌더링 되어야 하므로 tfoot 요소를 tbody 요소보다 앞에 작성한다. 출력 순서는 tbody, tfoot 요소 순서이다.
<table border="1">
<caption>중간고사 성적표</caption>

<thead>
<tr>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
    <th scope="col">점수</th>
    <th scope="col">등급</th>
</tr>
</thead>

<tfoot>
<tr>
    <th colspan="2" scope="row">전체평균</th>
    <td>80</td>
    <td>B</td>
</tr>
</tfoot>

<tbody>
<tr>
    <th scope="row">홍길동</th>
    <td>경영학과</td>
    <td>90</td>
    <td>A</td>
</tr>
<tr>
    <th scope="row">전지현</th>
    <td>영문학과</td>
    <td>80</td>
    <td>B</td>
</tr>
<tr>
    <th scope="row">김철수</th>
    <td>건축학과</td>
    <td>70</td>
    <td>C</td>
</tr>
</tbody>
</table>

TBODY 요소

tbody 요소는 테이블 보디 그룹(Table BODY group)을 표시한다.

tbody 요소로 행을 묶어야 하는 이유는 크게 세 가지로 볼 수 있다.

  • 테이블 보디의 데이터가 너무 많으면 2~3 문서에 걸쳐 테이블을 표현해야 하는 경우가 생기는데, 이렇게 되면 테이블 헤더, 보디, 푸터가 다른 문서에 나뉘어 구성될 수 있다. 테이블 데이터는 반드시 헤더와 푸터를 비교하면서 읽어야 하므로 테이블 헤더, 본문, 푸터가 같은 문서에 구성되는 것은 아주 중요하다. 이럴 때 tbody 요소를 사용하면 테이블 보디만 스크롤 할 수 있게 만들수 있다.
  • colgroup 요소처럼 행 그룹(row group)을 지정할 때 tbody 요소를 사용한다. thead와 tfoot 요소는 한 번만 지정할 수 있지만 tbody는 여러 번 지정할 수 있기 때문에 행 그룹별로 스타일을 적용할 수 있다.
  • 복잡한 구성의 테이블은 테이블 헤더 셀이 테이블 중간에도 올 수 있다. 이럴 때 tbody 요소를 사용하여 th 요소의 범위를 테이블 보디로 한정시킬 필요가 있다.
<table border="1">
<caption>중간고사 성적표</caption>

<thead>
<tr>
    <th scope="col">이름</th>
    <th scope="col">학과</th>
    <th scope="col">점수</th>
    <th scope="col">등급</th>
</tr>
</thead>

<tfoot>
<tr>
    <th colspan="2" scope="row">전체평균</th>
    <td>80</td>
    <td>B</td>
</tr>
</tfoot>

<tbody>
<tr>
    <th colspan="4" scope="rowgroup">1학년</th>
</tr>
<tr>
    <td scope="row">홍길동</th>
    <td>경영학과</td>
    <td>90</td>
    <td>A</td>
</tr>
<tr>
    <td scope="row">전지현</th>
    <td>영문학과</td>
    <td>80</td>
    <td>B</td>
</tr>
<tr>
    <th colspan="4" scope="rowgroup">2학년</th>
</tr>
<tr>
    <td scope="row">김철수</th>
    <td>건축학과</td>
    <td>70</td>
    <td>C</td>
</tr>
<tr>
    <td scope="row">송혜교</th>
    <td>생물학과</td>
    <td>80</td>
    <td>B</td>
</tr>
</tbody>
</table>




댓글을 달아 주세요

  1. 2015.05.07 12:13

    비밀댓글입니다

  2. pow 2015.08.06 13:39 신고

    너무정리가 잘되어있어서 많이공부하고갑니다.. 감사합니다.

  3. shifeed 2016.05.10 18:33 신고

    가로는 co width값으로 주는데 세로는 어떻게 잡나요? 그냥 css에 td{height:100px} 이런식으로 잡으면 브라우저마다 똑같이 뜨나요?
    지금 높이를 못잡아서 헤메이고 있습니다.ㅠ 익스랑 크롬이랑 높이가 쪼끔씩 다르게 먹어가지구용 ㅠ

    • BlogIcon 흉내쟁이 2016.05.11 13:35 신고

      높이를 어느정도 고정시키려면 말씀하신대로 height 값을 주시면 됩니다. 다만 td 에 부여하시면 당연히 전체 셀에 영향을 미치게 되는 것이고 특정 셀이나 특정 행에 해당하는 셀이라면 따로 class 명을 부여하시는 것이 맞습니다.

      익스랑 크롬이랑 차이가 벌어지는 이유는 여러이유가 있을수 있고 버전마다 또 틀려지기도 합니다. 자료형이 아닌경우 테이블을 사용하지 않는 이유이기도 하고 직접봐야 해결할 수 있는 부분이기도 합니다.

  4. dd 2016.11.22 13:48 신고

    브라우저 자원을 많이 사용한다는 근거는 어떻게 확인할 수 있나요?

    • BlogIcon 흉내쟁이 2016.11.22 13:56 신고

      간단히 테이블 사용하는 경우가 아닌 과거에 테이블로 디자인의 구조를 만들던 시대의 이야기입니다. 브라우저는 테이블안에 테이블이 중첩된 각각의 셀의 너비를 상위요소의 크기와비교해서 자신의 너비및 높이를 계산하고 중첩된 테이블 만큼 그 계산속도가 영향을 미친다는 것이죠.

      관련자료는 딱히 가지고 있지않지만 현재의 디자인들이 테이블을 사용하지 않는 많은 이유중에 하나입니다.

티스토리 툴바