테이블 작성 및 접근성 개선
페이지 정보
작성자
DocsArchives
작성일
2025.09.07 20:03
본문
데이터 표현의 기본
HTML에서 **테이블(<table>)**은 데이터를 행과 열로 정리해 표시하는 가장 직관적인 방법입니다. 단순히 보기 좋게 만드는 것뿐만 아니라 접근성과 SEO까지 고려해야 합니다.
기본 테이블 구조
<table border="1"> <caption>회원 정보</caption> <thead> <tr> <th>이름</th> <th>이메일</th> <th>가입일</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td>[email protected]</td> <td>2025-09-06</td> </tr> <tr> <td>김철수</td> <td>[email protected]</td> <td>2025-08-30</td> </tr> </tbody></table><caption>: 테이블 제목, 접근성과 SEO에 도움-
<thead>: 헤더 영역 -
<tbody>: 데이터 영역 -
<th>: 열 제목, 화면 읽기 프로그램이 데이터를 이해할 수 있도록 도움
실무 활용 사례
-
관리자 페이지: 회원 리스트, 주문 내역
-
통계 페이지: 매출, 방문자 수 등 데이터 표시
-
교육 콘텐츠: 시험 성적, 학습 진행 상황
접근성 팁
-
scope="col"또는scope="row"속성으로 스크린리더 지원 -
테이블이 크면 스크롤 가능한 영역으로 처리
<th scope="col">이름</th><th scope="row">홍길동</th>테이블은 단순한 데이터 표시 도구가 아니라 구조화된 정보를 전달하는 방법입니다. 접근성과 시맨틱을 고려해 작성하면 사용자와 검색 엔진 모두에게 친절한 테이블이 됩니다.
댓글 0