HTML 테이블 예제
1. 기본 테이블
| 이름 |
나이 |
직업 |
| 홍길동 |
25 |
개발자 |
| 김철수 |
30 |
디자이너 |
| 이영희 |
28 |
기획자 |
2. 시맨틱 테이블 (thead, tbody, tfoot)
2024년 1분기 매출 현황
| 제품 |
1월 |
2월 |
3월 |
합계 |
| 제품 A |
100 |
120 |
150 |
370 |
| 제품 B |
80 |
90 |
110 |
280 |
| 제품 C |
200 |
180 |
220 |
600 |
| 총계 |
380 |
390 |
480 |
1,250 |
3. 셀 병합 (colspan, rowspan)
| 카테고리 |
하위 카테고리 |
항목 |
가격 |
| 전자제품 |
컴퓨터 |
노트북 |
1,500,000원 |
| 데스크탑 |
1,200,000원 |
| 모바일 |
스마트폰 |
1,000,000원 |
| 태블릿 |
800,000원 |
| 총합 |
4,500,000원 |
4. colgroup으로 열 스타일링
| 순위 |
팀명 |
승 |
패 |
| 1 |
팀 A |
10 |
2 |
| 2 |
팀 B |
8 |
4 |
| 3 |
팀 C |
6 |
6 |
5. 반응형 테이블
화면이 좁으면 가로 스크롤이 생깁니다.
| ID |
이름 |
이메일 |
전화번호 |
주소 |
가입일 |
상태 |
| 1 |
홍길동 |
hong@example.com |
010-1234-5678 |
서울시 강남구 |
2024-01-15 |
활성 |
| 2 |
김철수 |
kim@example.com |
010-2345-6789 |
서울시 서초구 |
2024-01-20 |
활성 |
6. scope 속성 (접근성)
scope 속성은 스크린 리더가 테이블을 이해하는 데 도움을 줍니다.
| 요일 |
날씨 |
기온 |
| 월요일 |
맑음 |
25°C |
| 화요일 |
흐림 |
22°C |
| 수요일 |
비 |
18°C |
7. 시간표 (복잡한 구조)
주간 시간표
|
월 |
화 |
수 |
목 |
금 |
| 09:00 |
국어 |
영어 |
수학 |
영어 |
과학 |
| 10:00 |
수학 |
국어 |
과학 |
체육 |
| 11:00 |
점심시간 |
| 13:00 |
과학 |
체육 |
영어 |
수학 |
국어 |