HTML 표 [Table][표]

HTML 표의 사용시 주의 점

[광고 누르면 오늘의 행운 상승!!]

• 표는 접근성이 떨어지므로 표 이외에 더 좋은 표현 방법이 있다면 표를 사용하지 않아야 한다
• 표를 페이지 레이아웃에 사용하지 말아야 한다.
• 입력 서식을 나타낼 때도 되도록이면 표를 사용하지 말아야 한다.

HTML 표 작성

• table 요소: HTML 표를 의미한다.
• tr 요소: 테이블의 row를 나타낸다.
• th 요소: 테이블 헤더셀을 나타낸다. 제목 셀에 사용한다.
• td 요소: 테이블의 셀(칸)을 의미한다.

셀 병합

• 가로셀 병합: colsapn 속성 사용
• 세로셀 병합: rowspan 속성 사용

표의 구조화 요소

• 접근성 강화와 데이터 분석을 위해 표를 구조화 한다.
• thead 요소: 표의 제목으로 구성된 row의 집합 표에 두 개 이상의 thead가 정의 되어서는 안된다.
• tbody 요소: 표의 몸 부분으로 표의 내용이 들어간다 여러 개의 tbody설정 가능
• tfoot 요소: 표의 푸터로 구성된 row의 집합 위치와 상관없이 표 마지막에 나타난다. 표에 두 개 이상의 tfoot이 정의 되어서는 안된다
• col 요소: 구조적으로 하나의 column을 대표한다. caption 요소의 뒤에 thead나 tbody의 앞에 설정한다. 표의 컬럼 갯수 만큼 col 요소를 사용한다.
• colgroup 요소: col요소의 그룹 구조에 따라 여러개의 colgroup으로 분리할 수 있다.
• scope 속성: 헤더셀의 영향력이 어느쪽으로 향하는지를 지정 scope의 값이 row또는 col이면 헤더셀은row또는 column에 제목 scope의 값이 rowgroup또는 colgroup이면 헤더셀은 row의 그룹(아래에 있는 여러 줄) 또는 col의 그룹(우측에 있는 여러 컬럼들)의 제목
• caption 요소: 표의 캡션(제목)을 나타낸다. table 요소의 첫 번째 자식 요소로 가장 먼저 설정되어야 한다. table이 figure 요소의 유일한 자식요소라면 caption 대신 figcaption요소로 캡션을 표시해야 한다.