상세 컨텐츠

본문 제목

[HTML5/CSS3] 테이블 (Table)

Web/HTML5 & CSS3

by 클리엘 클리엘 2019.09.20 14:27

본문

테이블(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>

 

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 오디오태그  (0) 2019.09.23
[HTML5&CSS3] 이미지관련 태그  (0) 2019.09.20
[HTML5/CSS3] 테이블 (Table)  (0) 2019.09.20
[HTML5&CSS3] 목록 관련 태그  (0) 2019.09.19
[HTML5&CSS3] 글자 관련 태그  (0) 2019.09.10
[HTML5/CSS3] 문법 기본 사항  (0) 2019.08.27

관련글 더보기

댓글 영역