데이터테이블
테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태
- 데이터테이블을 제공할 경우 데이터별로 대응되는 모든 헤더를 확인할 수 있도록 제목(th), 내용(td)를 구분할 수 있는 태그 제공
- 제목 셀과 데이터 셀이 구분되도록 구현한 데이터 테이블은 시각 장애인에게 데이터 셀에 대한 제목 셀의 내용 또는 제목 셀과의 관계를 알려주므로 내용 파악이 쉬움
- scope는 th에만 쓰도록 한다
9월 전국축제일정 테이블스타일
※테이블단위 : 우측상단 (공통)
| 지역 | 행사명 | 행사월 | 행사장소 | |
|---|---|---|---|---|
| 도 | 시,군 | |||
| 강원 | 정선 | 민둥산억새꽃축제 | 9월 |
|
| 충남 | 태안 | 안면도 백사장 대하축제 | 9월 | 태안군 안면읍 창기리(백사장항)hwp다운로드 |
| 충남 | 홍성 | 홍성 남당항 대하축제 | 9월 |
|
축제장소안내
※테이블단위 : 우측상단 (공통)
| 송도세계문화축제 | 인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장 버튼버튼 |
|---|---|
| 공연관광축제 | 인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장인천연수구 포스코건설 뒤 야외광장 버튼버튼 |
| 부산영도다리축제 | 영도대교 봉래동 물양장 일원 |
| 북천코스모스 메밀축제 | 경남 하동군 직전마을, 이명마을 꽃단지 일원 |
테이블 다운로드 버튼정리
| 구분 | 기관명 | 위치 | 전화번호 | 홈페이지 |
|---|---|---|---|---|
| 금융기관 | 남평농업협동조합 | 남평1로 29 | 331-2007 | 홈페이지 |
| 금융기관 | 남평농업협동조합 | 남평1로 29 | 331-2007 | hwp다운로드 |
| 금융기관 | 남평농업협동조합 | 남평1로 29 | 331-2007 | pdf다운로드 |
| 금융기관 | 남평농업협동조합 | 남평1로 29 | 331-2007 | - |
배치용테이블
제목 행과 제목 열이 있는 데이터용 테이블(data table)과는 달리, 콘텐츠 블록을 원하는 크기와 형태로 배치하기 위하여 사용한 테이 블을 말한다. 배치용 테이블은 제목 행, 제목 열 및 표 제목이 없다. 배치용 테이블에는 summary, caption, thead, tbody, tfoot, th 등 의미적인 마크업을 붙이지 않는다.
배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽 상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을 때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.
이것은 무조건 배치용, 무조건 테이블 등으로 정하기는 어렵지만 테이블 구조를 잘 살펴보고, 이전 작업물은 어떤구조로 되어있는지도 확인한 후 작업자의 판단으로 작업하기 바란다.
배치용테이블의 예 - 단순 다운로드 테이블
| 공시개요 | hwp다운로드 | xls다운로드 | pdf다운로드 |
복잡한 테이블
| 구분 | 만18세 미만 장애아동수당 | |||
|---|---|---|---|---|
| 생계·의료수급자 | 주거·교육수급자 | 차상위계층 | 보장시설수급자 | |
| 중증장애인(1급, 2급, 3급+중복장애) | 20만원 | 15만원 | 15만원 | 7만원 |
| 경증장애인(3급~6급) | 10만원 | 10만원 | 10만원 | 2만원 |
th id="*" / td headers="*" 를 짝지어 주면된다
리더기는 headers의 값을 차례대로 읽어주므로 위의표를 예로들면(빨간색으로 표시된 부분) headers에 "a7 a2 a3" 순으로 중증장애인(1급, 2급, 3급+중복장애) 만18세 미만 장애아동수당 생계·의료수급자 20만원 이렇게 읽어준다고 한다
※ id는 th에만 써야함