HTML - 테이블의 하위 요소 알기 (caption, colgroup, col, th, thead, tbody, tfoot)

 

table의 하위 요소

caption

• 테이블의 설명 또는 제목을 나타내는 요소
• 반드시 <table>의 첫 번째 자식이여야 함

---

colgroup

• 테이블의 열을 묶는 그룹을 정의
• 첫 번째 자식이 <col> 요소
• <caption> 요소가 존재하는 경우 뒤에 위치
• 그 외 테이블의 모든 요소 앞에 위치

---

col

• 테이블의 열을 의미
• 열에 속하는 칸에 공통된 의미를 부여 할 때 사용
• <colgroup> 요소 안에서 사용

---

th

• 테이블의 칸을 그룹의 헤더로 정의
• 그룹 속성은 scope와 headers로 정의

---

 

주의사항 : 또는과 쉼표(,)의 차이를 이해해야 합니다!!!

thead

• 테이블 열(Columns)의 머릿글인 행들의 집합
• <caption> 또는 <colgroup> 요소 뒤에 위치
• <tbody> 또는 <tfoot>, <tr> 요소 앞에 위치
• <tbody> 또는 <tfoot> 요소가 바로 이어지는 경우 닫는 태그를 생략 할 수 있음

---

tbody

• 테이블의 여러 행(<tr>)을 묶어서 테이블로 구성
• <caption>, <colgroup>, <thead> 요소 뒤에 위치
• 테이블의 자식 요소 중 <tr> 요소가 존재하면 사용 할 수 없음

---

tfoot

• 테이블의 열을 요약하는 바닥글 행들의 집합
• <caption>, <colgroup>, <thead>, <tbody> 또는 <tr> 요소 뒤에 위치 (HTML5 환경)

---

사용 예시

<table border="1">
    <caption>캡션</caption>
    <colgroup>
        <col>
        <!-- 각각의 첫번째, 두번째 열의 col1, col2의 의미 부여 -->
        <col class="col1">
        <col class="col2">
    </colgroup>
    <thead>
        <tr>
            <td colspan="3">테이블의 머릿글</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> </td>
            <th scope="col">열의 헤더1</th>
            <th scope="col">열의 헤더2</th>
        </tr>
        <tr>
            <th scope="row">행의 헤더1</th>
            <td>칸1</td>
            <td>칸2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">테이블의 바닥글</td>
        </tr>
    </tfoot>
</table>

---

참고

• Mozilla - HTML 요소 참고서

https://developer.mozilla.org/ko/docs/Web/HTML/Element/tbody

<tbody>: 표 본문 요소 - HTML: Hypertext Markup Language | MDN