Programming

표

<table></table> : 표(table)

데이터를 표의 형태로 나타냄

<caption></caption>
제목을 지정
<thead></thead>
헤더 내용을 그룹화
<tbody></tbody>
바디 내용을 그룹화
<tfoot></tfoot>
푸터 내용을 그룹화
<th></th>
제목 셀을 정의
속성
colspan
colspan="값"
해당 셀이 미치는 범위의 열 수를 지정
rowspan
rowspan="값"
해당 셀이 미치는 범위의 행 수를 지정
headers
headers="헤더 id"
해당 셀에 대응하는 헤더셀의 id 컨텐트 속성의 값을 지정
scope
scope="값"
해당 헤더 셀이 영향을 미치는 셀의 범위를 나타내는 키워드를 지정
  • row
  • col
  • rowgroup
  • colgroup
  • auto
<tr></tr>
행을 정의
<td></td>
데이터 셀을 정의
속성
colspan
colspan="값"
해당 셀이 미치는 범위의 열 수를 지정
rowspan
rowspan="값"
해당 셀이 미치는 범위의 행 수를 지정
headers
headers="헤더 id"
해당 셀에 대응하는 헤더셀의 id 컨텐트 속성의 값을 지정
<colgroup></colgroup>
하나 이상의 행의 그룹을 나타냄
<col></col>
하나 이상의 행을 나타냄

코드


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        table {
            width: 100%;
        }
        table, th, td {
            border: 1px solid black;
            padding: 0.3rem;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <caption>표(Table)</caption>
        
        <colgroup>
            <col style="background-color: tomato">
            <col span="2" style="background-color: aqua">
        </colgroup>
        
        <thead>
            <tr>
                <th></th>
                <th>태그</th>
                <th>설명</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>#1</td>
                <td>caption</td>
                <td>제목을 지정</td>
            </tr>
            <tr>
                <td>#2</td>
                <td>thead</td>
                <td>헤더 내용을 그룹화</td>
            </tr>
            <tr>
                <td>#3</td>
                <td>tbody</td>
                <td>바디 내용을 그룹화</td>
            </tr>
            <tr>
                <td>#4</td>
                <td>tfoot</td>
                <td>부터 내용을 그룹화</td>
            </tr>
            <tr>
                <td>#5</td>
                <td>th</td>
                <td>제목 셀을 정의</td>
            </tr>
            <tr>
                <td>#6</td>
                <td>tr</td>
                <td>행을 정의</td>
            </tr>
            <tr>
                <td>#7</td>
                <td>td</td>
                <td>데이터 셀을 정의</td>
            </tr>
            <tr>
                <td>#8</td>
                <td>colgroup</td>
                <td>하나 이상의 행의 그룹을 나타냄</td>
            </tr>
            <tr>
                <td>#9</td>
                <td>col</td>
                <td>하나 이상의 행을 나타냄</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td colspan="3">table : 데이터를 표의 형태로 나타냄</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

결과

↑ ↓