HTML/개념정리

tag (table, caption, thead, tbody, tfoot, tr, th, td)

xowoony 2022. 8. 27. 20:55

태그(table)
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- table태그 혹은 표(Table)태그는 표를 그릴 때 사용한다.
- 사이트 레이아웃을 위해 표를 사용하지 않아야한다. 순수 데이터를 담는 용도로만 사용.
- 시멘틱 : 있음

 

태그(caption)
- table태그의 자식으로, 해당하는 표의 제목을 담는다.
- 생략 가능.
- 여러개 사용 불가.

 


태그(thead)
- table태그의 자식으로, 열의 기준이되는 설명이나 이름 등을 담기 위해 사용한다.
- 생략 가능.


태그(tbody)
- table태그의 자식으로, 테이블의 실제 데이터를 담기 위해 사용한다. 열/행의 설명이나 제목이 들어가서는 안 된다.
- 생략 불가.


태그(tfoot)
- table태그의 자식으로, 주로 tbody안에 있는 실제 데이터의 통계(합, 평균 등)를 내기위해 사용한다.
- 생략 가능.


태그(tr)
- thead 혹은 tbody 혹은 tfoot의 자식으로, tr태그(테이블 행, Table Row) 하나는 행 하나를 의미한다.
- tr태그는 실제 데이터를 직접 담아서는 안된다.


태그(th)
- tr의 자식으로, th태그(Table Heading)는 해당 열 혹은 행을 대표할 수 있는 이름이나 정보를 직접 담기 위해 사용한다.
- th태그 하나는 열 하나를 의미한다.
- th태그의 내용은 실제(통계 가능한) 데이터를 담지 않는다.
- 속성
- rowspan : 해당 셀(칸, Cell)이 세로 방향(행 방향)으로 차지해야 하는(통합 해야하는) 칸의 개수. 생략시 1.
- colspan : 해당 셀이 가로 방향(열 방향)으로 차지해야 하는 칸의 개수. 생략시 1.


태그(td)
- tr의 자식으로 td태그(Table Data)는 실제 데이터를 직접 담기 위해 사용한다.
- td태그 하나는 열 하나를 의미한다.
- 속성은 th와 동일하게 사용한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>Table 태그</title>
    </head>
    <body>
       
   
    <table border="1">
        <caption>행정구역(시군구)별 인구수</caption>
        <thead>
            <tr>
                <th rowspan="2">행정구역(시군구)별</th>
                <th>2022. 05</th>
                <th>2022. 06</th>
                <th>2022. 07</th>
            </tr>    
                <th>총인구수 (명)</th>
                <th>총인구수 (명)</th>
                <th>총인구수 (명)</th>
            <tr>

            </tr>
        </thead>
        <tbody>
            <tr>
                <th>서울특별시</th>  
                <td>9,000,000</td>
                <td>9,100,000</td>
                <td>9,200,000</td>
            </tr>
            <tr>
                <th>부산광역시</th>
                <td>3,3338,167</td>
                <td>3,3336,737</td>
                <td>3,334,595</td>
            </tr>
            <tr>
                <th>대구광역시</th>
                <td>2,376,676</td>
                <td>2,375,306</td>
                <td>2,374,120</td>
            </tr>
            <tr>
                <th>인천광역시</th>
                <td>2,955,167</td>
                <td>2,957,066</td>
                <td>2,960,580</td>
            </tr>
            <tr>
                <th>광주광역시</th>
                <td>1,436,012</td>
                <td>1,435,378</td>
                <td>1,434,703</td>
            </tr>
            <tr>
                <th>대전광역시</th>
                <td>1,448,933</td>
                <td>1,448,401</td>
                <td>1,448,182</td>
            </tr>
            <tr>
                <th>울산광역시</th>
                <td>1,116,482</td>
                <td>1,115,609</td>
                <td>1,114,753</td>
            </tr>
        </tbody>
        <tfoot>
                <th>전국</th>
                <td>51,583,722</td>
                <td>51,578,178</td>
                <td>51,574,446</td>
        </tfoot>
    </table>
    </body>
</html>

==================실행결과====================

저작자표시 비영리 변경금지