프로그래밍/HTML

[HTML -9] 표

나무늘보Programmer 2024. 3. 29. 01:48

표 만들기

  • 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(Cell)이 콘텐츠를 나타내는 최소 단위
  • 목록 만들기와 마찬가지로 여러 개의 태그를 채워 넣음으로 완성한다
  • 표를 만들기 위해서 사용되는 태그
    • <table> : 하나의 표를 나타내는 태그
    • <tr> : 표 안에서 하나의 행을 나타내는 태그
    • <th> : 행 안에서 제목에 해당하는 셀을 나타내는 태그
    • <td> : 행 안에서 콘텐츠에 해당하는 셀을 나태 내는 태그

 속성

  • border : 테두리의 두께를 지정
  • <caption> 캐그는 <table> 태그 안쪽에서 제목 또는 설명을 나타내는 역할을 수행되며 기본적으로 가운데 정렬

표의 구조 명확하게 표현하기

셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 그룹으로 묶어서 관리할 수 있음(컨테이너 역할을 하는 태그들이 있음)

  • <thead> : 표의 제목이나 주제를 나타내는 영역
  • <tbody> : 표의 본문을 나타내는 영역
  • <tfoot> : 표의 요약글이나 맺음말을 나타내는 영역

위와 같은 태그들을 활용하면 구조가 명확하게 드러나 코드 유지 및 보수가 편해지고 웹 접근성에 도움이 됨