FreeLife의 저장소 :: 테이블(Table) 요소 - TABLE, CAPTION, TR, TH, TD, COL, COLGROUP, THEAD, TFOOT, TBODY

테이블(Table) 요소 - TABLE, CAPTION, TR, TH, TD, COL, COLGROUP, THEAD, TFOOT, TBODY

CSS/예제소스 2015. 7. 31. 09:42

728x90

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

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>

출처 - 웹의 기본 : HTML·의미적 마크업·웹 문서 구조화에 대한 내용

728x90

저작자표시

'CSS > 예제소스' 카테고리의 다른 글

ie 에서 텍스트 박스에 위 아래 정렬 안되고 글씨가 위로 붙을때 (0)	2015.11.12
CSS Overflow와 Text-overflow 속성 (0)	2015.11.06
웹폰트(@font-face) 적용법 (0)	2015.10.27
나눔고딕글꼴 웹폰트 여러개 설정 (0)	2015.10.27
웹폰트 적용/나눔고딕/html 폰트 적용하는 법/ (0)	2015.10.27
[css font] font-family 부터 온갖 속성을 한방에 (0)	2015.09.24
11_<colgroup> (0)	2015.07.31

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600