HTML 테이블 코딩 (학습 9일차 TIL)

210621 오늘은 HTML table 코딩에 대해 학습했다.
colspan과 rowspan의 차이를 숙달하기 위해 한국남부발발전현황.html 파일 작성

Today's Tips

1. 큰 틀은 captiond으로 표의 제목을 달아 주고, thead > tfoot(소계/합계) > tbody순으로 마크업한다.
2. tr(셀)안에 th(제목), td(내용)의 구성으로 마크업한다.
3. 내용상 세로로 표를 나눌 때: colgroup을 사용 함 caption요소 다음에 오도록 마크업해준다.

웹 접근성 준수 사항

1. 스크린 리더기가 테이블을 읽을 때 마크업한 순서대로 읽어준다.
2. 지금은 summary가 아닌 caption을 달아도 웹 접근성 준수한다.
3. th는 제목 셀이기 때문에 scope(세로/가로에 대한 제목)를 입력해준다.
   ex)scope="col"(세로/열), scope="row"(가로/행)
4. 각 셀의 값이 어디에 해당하는지 구분하기 위해 th에 id를 지정해 준 뒤, td에 headers로 각 th에 해당하는 id를 써 준다.
5. 비어있는 셀 or 해당없는 셀이라도 '없음'등의 의미를 전달할 수 있는 내용을 명시해 준다.