테이블 관련요소
1. 테이블 요소(table,tr,th,td)
2차원의 격자 형태로 구성된 표를 생성할 때는 XHTML의 테이블 관련 요소를 이용할 수 있다.
테이블(table)은 크게 열(column)과 행(row) 그리고 셀(cell)로 구성되며
기본적인 형식은 아래와 같다.
형식
<table> ←테이블 시작
<tr>←행(row)시작
<th>제목 셀(header cell)</th>
</tr>
<tr>
<id>내용 셀(data cell)</td>
</tr>←행(row) 종료
</table> ←테이블 종료
2. 셀 병합(colspan 속성, rowspan 속성)
세목 셀(th)이나 내용 셀(td)은 colspan 속성이나 rowspan 속성을 이용하여
원하는 방향으로 셀을 병합할 수 있다.
열이 서로 다른 셀을 병합할때는 colspan 속성을
행이 서로 다른 셀을 병합할 때는 rowspan 속성을 사용한다.
형식1)
열이 서로 다른 셀 병합하기
<table border="1">
<tr>
<td colspan="2">열이 서로 다른 2개의 셀을 병합</d>
<td>병합되지 않은 셀</td>
</tr>
<tr>
<td>병합되지 않은 셀</td>
</tr>
</table>
형식2)
행이 서로 다른 셀 병합하기
<table border="1">
<tr>
<td colspan="2">행이 서로 다른 2개의 셀을 병합</d>
<td>병합되지 않은 셀</td>
</tr>
<tr>
<td>병합되지 않은 셀</td>
</tr>
</table>
3. 테이블 제목 및 요약문(caption & summary)
접근성 높은 테이블 데이터를 마크업 할때는 테이블의 제목 및
테이블 데이터의 내용을 요약해서 알려 줄수 있는 caption요소와
summary 속성을 사용한다. caption 요소에는 테이블의 내용을
대표할 수 있는 제목을 삽입하고, summary 속성에는 간단한 제목보다
테이블의 내용을 설명하여 시각적으로 테이블 접근이 쉽지 않은 사용자가
summary 속성의 내용을 듣고 해당 테이블의 콘텐츠를 잘 파악한 후 건너뛸것인지
탐색할 것인지를 선택할 수 있도록 해야 한다.
테이블의 제목 및 요약 내용을 삽입할 때 사용하는 형식은 아래와 같다.
형식
<head>
<title>테이블 제목 및 요약내용</title>
</head>
<body>
<h1>테이블 제목 및 요약 내용</h1>
<table border="1" summary="테이블 내의 데이터 요약 및 구조 설명">
<caption>테이블 제목</caption>
<tr>
<th>테이블 제목의 하위 카테고리1</th>
<th>테이블 제목의 하위 카테고리2</th>
</tr>
</table>
</body>
</html>
4. 열 그룹화 요소(colgroup, col)
테이블의 열끼리 논리적으로 그룹화하면 colgroup, col 요소를 사용할 수 있다.
이때 그룹화하는 열이 하나 이상일 경우 span 속성을 사용하여 그룹화하려는 열을 지정한다.
colgroup 요소는 논리적인 그룹화를 위해 사용하고 col 요소는 스타일을 지정할 목적으로
사용한다는 점이 차이점이다.
col 요소는 colgroup 요소의 자식 요소로 표현할 수 있으며 빈요소이다.
열을 그룹화한 영역의 테두리(border)를 지정하려고 할 때는 테이블 요소에
rules="groups"를 지정한다. colgroup 요소의 경우 테이블 요소나
caption 요소의 다음에 마크업한다.
형식
<table rules="group">
<colgroup span="2">
<col id="publishing" />
<col id="book Title" />
</colgroup>
<col id="circulation" />
</table>
5. 행 그룹화 요소(thead, tfoot,tbody)
테이블의 행을 논리적으로 구성할 때 헤더행은 thead 요소로, 푸터행은 tfoot요소로
본문행은 tbody요소를 사용할 수 있다. 그리고 thead 요소와 tfoot 요소는 테이블에서 한 번만 사용할 수 있다.
행그룹화 요소의 선언순서는 thead,tfoot,tbody순이고 colgroup 요소나 col 요소의 다음에 지정한다.
제목 행으로 지정된 thead 요소에는 반드시 제목 셀(th 요소)을 이용해서 해당 영역이 테이블의
헤더 영역임을 지정해야만 한다.
형식
<table border="1">
<thead>
<tr>
헤더 행
</tr>
</thead>
<tfoot>
<tr>
푸터 행
</tr>
</tfoot>
</tbody>
<tr>
본문 행
</tr>
</tbody>
</table>
※ thead, tfoot 요소의 장점
웹 브라우저에 따라 테이블의 데이터가 많기 때문에 인쇄할때 여러 장에 걸쳐 출력되는 경우
페이지마다 테이블의 thead, tfoot 정보를 인쇄할 수 있다.
6. 제목셀과 내용 셀의 연관성(scope, id, headers 속성)
일반 사용자의 경우는 테이블 데이터를 열과 행, 셀로 구별하는 것이 어렵지 않으나
시각장애가 있는 사용자나 화면 낭독기의 경우에는 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단하기 때문에
열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않다.
따라서, 이러한 경우에는 테이블의 열과 행의 제목 셀에 해당하는 th요소에 scope 속성을
사용하는 것이 권장된다.
scope 속성의 경우 주로 병합되지 않은 단순한 형태의 테이블 유형에 사용할 수 있다.
좀 더 복잡하게 병합된 셀의 경우, th 요소는 id 속성으로 네이밍을 하고 해당 제목 셀과
연관성이 있는 내용 셀에 headers 속성과 id값을 연결하여 제목 셀과 내용 셀의 관계를 지정할 수 있다.
일부 화면 낭독기의 경우 이런 방법으로 제목 셀과 내용 셀의 관계를 지정하면 제목 셀과 내용 셀을
함께 읽어주기 때문에 데이터의 의미 및 관계를 파악하기가 쉽다는 장점이 있다.
1) scope 속성의 사용
<table border="1">
<tr>
<th scope="col">열 제목</th>
</tr>
<tr>
<th scope="row">행 제목</th>
<td>내용 셀</td>
</tr>
</table>
2) id, headers 속성의 사용
<table>
<tr>
<th> </th>
<th id="imported" colspan="2">수입품목</td>
</tr>
</table>
※Table 내의 내용 없는 셀(td) 표현
값이 없거나 0인 경우에는 아무것도 없는 <td></td>와 같이 빈셀로 표현하는 경우가 있는데
이런 경우 CSS에서 border-collapse:collapse를 사용하지 않는경우 설정한 border가 제대로 표현되지 않을 수 있으므로
값을 사용하여 빈 데이터를 넣거나 '없음'과 같은 텍스트를 삽입한 후 CSS를 사용하면 오류 없이 테이블 값을
표현할 수 있다.
'Web' 카테고리의 다른 글
| 구글 애널리틱스(Google analytics)란? (0) | 2020.05.28 |
|---|---|
| 폼의 정의 및 구성요소 (0) | 2020.05.28 |
| 목록, 텍스트 관련 요소 (0) | 2020.05.28 |
| CSS란?(feat.Acid Test) (0) | 2020.05.28 |
| 링크와 이미지 요소 (0) | 2020.05.28 |
댓글