HTML 표

개념 이해하기

table은 표 전체, caption은 제목, thead와 tbody는 영역, tr은 행, th와 td는 제목 셀과 데이터 셀입니다. th의 scope는 제목이 어느 행이나 열을 설명하는지 알려줍니다.

표는 열 머리 세 개와 데이터 두 행으로 되어 있고, 각 행의 첫 칸인 월과 화도 td가 아니라 scope=row인 th입니다. 그래서 화면 읽기 도구는 50분 칸을 읽을 때 화 행과 시간 열 머리를 함께 알려 줄 수 있습니다. CSS의 border-collapse: collapse는 칸마다 따로 그려지던 테두리를 한 줄로 합치고, text-align: left는 가운데 정렬이 기본인 th를 왼쪽으로 맞춥니다.

두 칸 이상을 합칠 때는 td나 th에 colspan이나 rowspan을 지정하고, 합친 만큼 같은 행이나 아래 행의 칸 수를 줄여야 표가 어긋나지 않습니다. 또 tbody를 생략해도 파서가 tr을 감싸는 tbody를 자동으로 만들기 때문에, table 바로 아래의 tr을 고르는 CSS 선택자는 기대와 달리 일치하지 않습니다.