HTML 테이블

사진: Unsplash의Andrei R. Popescu

HTML 테이블 태그

이번 포스팅에서는 HTML의 테이블 태그를 정리합니다. 테이블은 데이터를 표 형식으로 보여줄 때 유용합니다.

---

테이블 태그의 기본 구조

HTML 테이블은 기본적으로 <table> 태그를 사용하며, 헤더, 본문, 푸터 섹션으로 나눌 수 있습니다.

코드 예제

<table>
    <thead>
        <tr>
            <th>cell 셀의 제목 1</th>
            <th>cell 셀의 제목 2</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>cell 셀1</td>
            <td>cell 셀2</td>
        </tr>
        <tr>
            <td colspan="2">병합된 셀</td>
        </tr>
        <tr>
            <td>cell 셀1</td>
        </tr>
        <tr>
            <td>cell 셀1</td>
            <td>cell 셀2</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>마지막</td>
            <td>tfoot</td>
        </tr>
    </tfoot>
</table>

---

1. 테이블 헤더 (<thead>)

<thead>는 테이블의 머리글 부분으로, 보통 열의 제목을 나타냅니다. <th> 태그를 사용하여 셀을 정의합니다.

<thead>
    <tr>
        <th>셀 제목 1</th>
        <th>셀 제목 2</th>
    </tr>
</thead>

결과 화면

셀 제목 1	셀 제목 2

---

2. 테이블 본문 (<tbody>)

<tbody>는 테이블의 본문 부분으로 데이터를 담습니다. <td> 태그는 테이블의 일반 셀을 정의합니다.

<tbody>
    <tr>
        <td>cell 셀1</td>
        <td>cell 셀2</td>
    </tr>
    <tr>
        <td colspan="2">병합된 셀</td>
    </tr>
</tbody>

결과 화면

cell 셀1	cell 셀2
병합된 셀

colspan 속성

셀을 여러 열로 병합할 때 사용합니다. 위 예제에서는 colspan="2"로 두 개의 열을 병합했습니다.

---

3. 테이블 푸터 (<tfoot>)

<tfoot>는 테이블의 하단에 요약이나 추가 정보를 표시합니다.

<tfoot>
    <tr>
        <td>마지막</td>
        <td>tfoot</td>
    </tr>
</tfoot>

결과 화면

마지막	tfoot

---

최종 결과 화면

아래는 전체 테이블 구조를 적용한 결과입니다.

셀 제목 1	셀 제목 2
cell 셀1	cell 셀2
병합된 셀
cell 셀1
cell 셀1	cell 셀2
마지막	tfoot

---

테이블 태그 요약

태그	설명
<table>	테이블을 정의합니다.
<thead>	테이블의 머리글 부분을 정의합니다.
<tbody>	테이블의 본문 부분을 정의합니다.
<tfoot>	테이블의 푸터 부분을 정의합니다.
<tr>	테이블의 행(Row)을 정의합니다.
<th>	테이블의 머리글 셀(굵은 텍스트)을 정의합니다.
<td>	테이블의 일반 데이터를 정의합니다.
colspan	셀을 가로로 병합합니다.