HTML – Table 태그 사용법

• table 태그
  • tr – 테이블 내의 열 단위 태그
  • td – 테이블 내의 행 단위 태그
  • th – 테이블 내의 행 단위 태그 (font-weight : bold 옵션을 기본으로 가짐 – 보통 header 또는 footer에 사용)
  • header content
    • 특별한 옵션은 없지만 각 영역을 그룹화 할 때 용이
    • 반드시 하나 이상의 tr 태그를 포함
    • 종류 – thead, tbody, tfoot

<table>
    <thead>
        <tr>
            <td>thead-a</td>
            <td>thead-b</td>
            <td>thead-c</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tbody-a</td>
            <td>tbody-b</td>
            <td>tbody-c</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>tfoot-a</td>
            <td>tfoot-b</td>
            <td>tfoot-c</td>
        </tr>
    </tfoot>
</table>

• colgroup – 각 행 별로 그룹화하여 옵션을 부여할 때 사용할 수 있습니다.

<table>
    <colgroup>
        <col width="25%">
        <col width="25%">
        <col width="*">
    </colgroup>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
</table>

• colspan – 행 병합

<table>
    <tr>
        <td colspan="2">colspan</td>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
</table>

• rowspan – 열 병합

<table>
    <tr>
        <td rowspan="2">rowspan</td>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>

• 사용 예시

<table>
    <thead>
        <tr>
            <th colspan="3">사용자 정보</th>
            <th colspan="5">결제 정보</th>
        </tr>
        <tr>
            <th>E-mail</th>
            <th>이름</th>
            <th>성별</th>
            <th>상품명</th>
            <th>결제수단</th>
            <th>결제금액</th>
            <th>처리여부</th>
            <th>응답코드</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a@a.com</td>
            <td>이철수</td>
            <td>남</td>
            <td>상품1</td>
            <td>휴대폰</td>
            <td>29,900</td>
            <td>완료</td>
            <td>202</td>
        </tr>
        <tr>
            <td>b@b.com</td>
            <td>김철수</td>
            <td>여</td>
            <td>상품2</td>
            <td>신용카드</td>
            <td>49,900</td>
            <td>완료</td>
            <td>204</td>
        </tr>
        <tr>
            <td>c@c.com</td>
            <td>안철수</td>
            <td>여</td>
            <td>상품3</td>
            <td>무통장입금</td>
            <td>9,900</td>
            <td>입금대기</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">결제금액 합계</td>
            <td>89,700</td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>