들어가기 전에

테이블 태그를 이용하여 만들 수 있는 간단한 표를 만들어 보도록 하겠습니다.

셀 병합과 접근성을 위한 속성 그리고 border가 병합될 때 어떤 특징이 있었는지 다시 한번 떠올려 보시길 바랍니다.

지금껏 이론으로 배웠던 테이블 관련 속성들을 직접 실습해 보도록 하겠습니다. 또한 colgroup과 col 태그, table-layout: fixed;에 대해 학습하실 수 있습니다.

제작 가이드

주요 기능

연령별, 성별, 조회수, 비율에 대한 데이터 통계 표

스타일 정보

• 표 너비 : 500px
• 각 셀 높이 : 40px
• 연령별 성별의 너비 : 90px
• 조회수, 비율 텍스트 정렬 : 오른쪽

주요 태그 및 속성

• HTML
  • table, caption, colgroup, col, thead, tbody, th, td
  • (속성 : scope, rowspan, colspan)
• CSS
  • table-layout, border-collapse
  • padding, border, color, text-align, background-color

참고 자료