HTML(6) 표(table)

table

테이블을 생성할 때 사용

<table>은 테이블 데이터의 컨테이너 요소

 

tr / th / td

tr : table row. 테이블의 행

th : table header. 테이블의 행, 열의 제목을 나타내는 셀

td : table data. 셀 내용

 

caption

테이블의 제목이나 설명

table의 첫번째 자식으로 사용

필수 요소는 X

표의 목적에 대한 명확하고 상세한 설명 포함

CSS의 caption-side 속성으로 top, bottom 위치를 설정 가능

 

thead / tbody / tfoot

테이블의 머리글, 본문, 바닥글을 의미

구역을 나누는 요소로 사용

필수 요소는 X 코드의 가독성을 위해 명시적으로 사용

<thead> : 테이블 행 블록 내에 제목 열 그룹으로 구성할 경우 사용

<tbody> : 행 블록 내에 테이블 데이터로 구성할 때 사용

<tfoot> : 행 블록 내에 열 요약으로 구성할 때 사용.

 

속성값

colspan / rowspan : 열 병합, 행 병합

colgroup : 테이블 열 그룹을 만들 때 사용

col : 테이블 열을 하나 이상 묶을 때 사용

 

<table>
        <caption style="caption-side: bottom;">표 설명, 제목</caption>
        <colgroup>
            <col style="width: 50px;">
            <col span="2" style="background-color: lightblue;">
            <col style="text-align: center; width: 150px;">
        </colgroup>
        <thead>
            <tr>
                <th>제목셀</th>
                <th colspan="2">제목셀</th>
                <th>제목셀</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>제목셀</th>
                <td>내용셀</td>
                <td rowspan="2">내용셀</td>
                <td>내용셀</td>
            </tr>
            <tr>
                <th>제목셀</th>
                <td>내용셀</td>
                <td>내용셀</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <td>내용셀</td>
                <td>내용셀</td>
                <td>내용셀</td>
            </tr>
        </tfoot>
    </table>

표 설명, 제목

제목셀	제목셀		제목셀
제목셀	내용셀	내용셀	내용셀
제목셀	내용셀		내용셀
합계	내용셀	내용셀	내용셀