so woon!

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

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>

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

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

'HTML > 개념정리' 카테고리의 다른 글

tag (Style)  (0) 2022.09.05
HTML 공통 속성(Attribute)  (0) 2022.09.05
tag (ol, ul, li)  (0) 2022.08.27
tag (input)  (0) 2022.08.27
tag (div, span, main, nav, header, footer, section, article, aside)  (0) 2022.08.27
'HTML/개념정리' Related Articles more
Comments