[01. HTML] 007. 테이블

테이블의 기본 구조는 다음과 같다.

 

<table>
    <tr>
        <th>머리말</th>
        <th>머리말</th>
        <th>머리말</th>
    </tr>
    <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
    </tr>
    <tr>
        <td>데이터</td>
        <td>데이터</td>
        <td>데이터</td>
    </tr>
</table>

 

<tr>은 table row의 약자다. 테이블의 행을 추가할 때 사용한다. 그리고 <td>는 table data의 약자다. row안에 data를 삽입할 때 사용한다. <th>는 table heading의 약자다. <td>요소와 비슷하게 사용되나 머리말을 나타내는 점이 다르다.

 

[그림 1.11] 테이블

 

테이블의 모습이 어딘가 조금 이상하다. 테두리가 현재는 없는 상태이다. 추후에 CSS를 이용해 테두리를 넣는 방법을 알아보기로 한다.

테이블의 열병합과 행병항은 colspan과 rowspan으로 할 수 있다.

 

<table>
    <tr>
        <th>머리말</th>
        <th>머리말</th>
        <th>머리말</th>
    </tr>
    <tr>
        <td rowspan="2">데이터</td>
        <td colspan="2">데이터</td>
    </tr>
    <tr>
        <td>데이터</td>
        <td>데이터</td>
    </tr>
</table>

 

[그림 1.12] 열병합 및 행병합

 

보다 큰 데이터를 다룰 때에는 긴 테이블을 사용하는 경우가 많다. 긴 테이블은 <thead>, <tbody>, <tfoot> 3가지 부분으로 구성된다.

 

<table>
    <thead>
        <tr>
            <th>머리말</th>
            <th>머리말</th>
            <th>머리말</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">데이터</td>
            <td colspan="2">데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>꼬리말</td>
            <td>꼬리말</td>
            <td>꼬리말</td>
        </tr>
    </tfoot>
</table>

 

[그림 1.13] 긴 테이블