[UX/UI] HTML - 테이블을 구성하는 태그

테이블 레이아웃

<table>
    <!-- 테이블 제목 -->
    <caption></caption>
    
    <!-- 컬럼의 스타일을 일괄적으로 적용 -->
    <colgroup>
        <!-- 하나는 나머지 공간을 전부 차지하도록 하기 위해서 width를 입력하지 않습니다 -->
        <col width="100">
        <col width="150">
        <col>
    </colgroup>
    
    <!-- 테이블 헤더 -->
    <thead></thead>
    
    <!-- 테이블 데이터 -->
    <tbody></tbody>
    
    <!-- 테이블 결과값 -->
    <tfoot></tfoot>
</table>

 

테이블 헤더

th 태그를 사용하는 경우에는 scope 속성을 필수로 입력해주어야 합니다

<!-- thead : 헤더 tr을 그룹화 (선택 사용) -->
<thead>
    <tr>
        <!-- scope : 분류방향에 따라 알맞게 입력 -->
        <!-- col(세로), row(가로) -->
        <th scope="col">테이블의 헤더 컬럼</th>
        <th scope="col">테이블의 헤더 컬럼</th>
        <th scope="col">테이블의 헤더 컬럼</th>
        <th scope="col">테이블의 헤더 컬럼</th>
    </tr>
</thead>

 

테이블 데이터

<!-- tbody : 데이터 tr을 그룹화 (필수 사용) -->
<tbody>
    <tr>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
    </tr>
    <tr>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
        <td>테이블의 데이터 컬럼</td>
    </tr>
</tbody>

 

테이블 결과값

<!-- tfoot : 푸터 tr을 그룹화 (선택 사용) -->
<tfoot>
    <tr>
        <td>결과 컬럼</td>
        <td>결과 컬럼</td>
        <td>결과 컬럼</td>
        <td>결과 컬럼</td>
    </tr>
</tfoot>

출처 : know-one-by-one.tistory.com/22