[HTML5/CSS3] 테이블 (Table)

테이블(Table)은 HTML에서 표를 만드는 데 사용하는 태그입니다.

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

테이블은 <table>로 시작해 </table>로 끝납니다. <table> 태그 내부에 <tr>은 행을, <td>는 각 행에 있는 셀을 의미합니다.

---

<table>에서 border 속성을 사용하면 테두리의 두께를 지정할 수 있습니다.

<table border="3">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

---

<th> 태그를 사용하면 테이블의 각 셀에서 '제목'을 표시할 수 있습니다.

<table>
    <tr>
        <th>날짜</th>
        <th>매출</th>
    </tr>
    <tr>
        <td>2019.08</td>
        <td>2,000</td>
    </tr>
    <tr>
        <td>2019.09</td>
        <td>3,300</td>
    </tr>
</table>

---

만약 셀에 같은 내용이 있고, 이들 셀을 병합해야 한다면 colspan을 사용하여 원하는 셀만큼 병합할 수 있습니다.

<table border="3">
    <tr>
        <th>날짜</th>
        <th>현매출</th>
        <th>전매출</th>
    </tr>
    <tr>
        <td>2019.08</td>
        <td colspan="2">2,000</td>
    </tr>
    <tr>
        <td>2019.09</td>
        <td>3,300</td>
        <td>4,000</td>
    </tr>
</table>

셀 대신 행을 병합해야 한다면 rowspan을 사용합니다.

<table border="3">
    <tr>
        <th>날짜</th>
        <th>현매출</th>
        <th>전매출</th>
    </tr>
    <tr>
        <td>2019.08</td>
        <td>2,000</td>
        <td rowspan="2">2,000</td>
    </tr>
    <tr>
        <td>2019.09</td>
        <td>3,300</td>
    </tr>
</table>

---

<th>는 각 셀의 제목을 나타내지만 <caption>을 사용하면 테이블 전체에 대한 제목을 지정할 수 있습니다.

<table>
    <caption>매출분석자료</caption>
    <tr>
        <th>날짜</th>
        <th>매출</th>
    </tr>
    <tr>
        <td>2019.08</td>
        <td>2,000</td>
    </tr>
    <tr>
        <td>2019.09</td>
        <td>3,300</td>
    </tr>
</table>

---

<colgroup>은 테이블에서 특정 순서의 셀을 별도로 지정하고자 할 때 사용합니다.

<table>
    <caption>매출분석자료</caption>
    <colgroup>
        <col style="background: red;" />
        <col span="2" style="background: yellow;" />
    </colgroup>
    <tr>
        <th>번호</th>
        <th>날짜</th>
        <th>매출</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2019.08</td>
        <td>2,000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2019.09</td>
        <td>3,300</td>
    </tr>
</table>

<colgroup> 내부에 <col> 태그를 사용하면 순서대로 각 셀을 지정할 수 있습니다. 따라서 첫 번째 <col> 태그는 첫 번째 셀을 의미하게 되고 지정한 style에 따라 첫 번째 셀의 배경색을 붉은색으로 처리합니다. 두 번째 <col> 태그에서는 span속성을 통해 두 번째와 세 번째 셀을 통합하여 처리하도록 지정하였습니다. 따라서 두 번째와 세 번째 셀의 배경을 노란색으로 처리합니다.

 

---

테이블에서 셀의 제목을 따로 분리하여 지정하고자 한다면 <thead> 태그를 사용할 수 있습니다.

<table>
    <caption>매출분석자료</caption>
    <colgroup>
        <col style="background: red;" />
        <col span="2" style="background: yellow;" />
    </colgroup>
    <thead style="background: blue;">
        <tr>
            <th>번호</th>
            <th>날짜</th>
            <th>매출</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>2019.08</td>
        <td>2,000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2019.09</td>
        <td>3,300</td>
    </tr>
</table>

---

그외 <tbody>는 테이블의 몸체를 <tfoot>는 테이블의 밑글을 의미합니다.

<table>
    <caption>매출분석자료</caption>
    <colgroup>
        <col style="background: red;" />
        <col span="2" style="background: yellow;" />
    </colgroup>
    <thead style="background: blue;">
        <tr>
            <th>번호</th>
            <th>날짜</th>
            <th>매출</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2019.08</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2019.09</td>
            <td>3,300</td>
        </tr>
    </tbody>
    <tfoot style="background: green;">
        <tr>
            <th>번호</th>
            <th>날짜</th>
            <th>매출</th>
        </tr>
    </tfoot>
</table>