HTML - 테이블

웹 개발에서 테이블(Table)은 데이터를 깔끔하게 정리하고 표시하는 데 중요한 도구입니다. HTML에서는 <table> 태그를 사용하여 이러한 테이블을 쉽게 생성할 수 있습니다. 이번 글에서는 HTML 테이블 구성 요소와 다양한 활용 방법을 살펴보겠습니다.

HTML 테이블의 주요 구성 요소

HTML 테이블은 다음과 같은 태그들로 구성됩니다.

1. <tr> (Table Row)
테이블의 행(row)을 정의합니다.
2. <th> (Table Header)
각 열(column)의 제목을 나타내며, 기본적으로 텍스트는 굵게 표시되고 가운데 정렬됩니다.
3. <td> (Table Data)
셀(cell) 데이터를 표시합니다.

기본 테이블 구조 예제

<table style="width:100%;">
    <tr style="background-color:lightgrey;">
        <th>참치</th>
        <th>고래</th>
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
    </tr>
    <tr>
        <td>오징어</td>
        <td>고등어</td>
    </tr>
</table>

 

위 코드에서는 <th>와 <td>를 사용하여 데이터를 행과 열로 정리했습니다. 배경색과 정렬 효과도 쉽게 추가할 수 있습니다.

CSS를 활용한 테두리 스타일링

기본적으로 테이블에는 테두리가 표시되지 않습니다. CSS의 border 속성을 이용해 테두리를 추가할 수 있습니다.
예제

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

테두리 합치기

테이블의 테두리가 두 줄로 보이는 경우, border-collapse 속성을 사용하여 이를 한 줄로 합칠 수 있습니다.

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

테이블 열 합치기

열을 합치고 싶을 때는 colspan 속성을 사용합니다.

<table style="width:100%;">
    <tr>
        <td>참치</td>
        <td colspan="2">고래</td>
    </tr>
    <tr>
        <td>상어</td>
        <td>문어</td>
        <td>꽁치</td>
    </tr>
</table>

 

위 코드에서 두 번째 셀(고래)은 두 열에 걸쳐 합쳐졌습니다.

 

 

테이블 행 합치기

행을 합치고 싶다면 rowspan 속성을 사용합니다.

<table style="width:100%;">
    <tr>
        <td rowspan="2">상어</td>
        <td>문어</td>
        <td>꽁치</td>
    </tr>
    <tr>
        <td>고등어</td>
        <td>돌고래</td>
    </tr>
</table>

 

첫 번째 열(상어)은 두 행에 걸쳐 병합되었습니다.

복합 테이블 구성: 열과 행 합치기

colspan과 rowspan을 함께 사용하면 복잡한 데이터 구조도 표현할 수 있습니다.

<table style="width:100%;">
    <tr>
        <td colspan="6">1</td>
    </tr>
    <tr>
        <td colspan="6">2</td>
    </tr>
    <tr>
        <td rowspan="3">3</td>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td colspan="3">8</td>
        <td>9</td>
    </tr>
    <tr>
        <td colspan="4">10</td>
    </tr>
</table>

 

위 예제는 행과 열을 병합하여 다양한 데이터 배열을 만드는 방법을 보여줍니다.

테이블 캡션 추가하기

테이블에 제목이나 설명을 추가하려면 <caption> 태그를 사용합니다.

<table style="width:100%;">
    <caption>해양 생물</caption>
    <tr>
        <td>참치</td>
        <td>고래</td>
        <td>날치</td>
    </tr>
</table>

 

위 코드는 테이블 상단에 "해양 생물"이라는 제목을 표시합니다.

HTML 테이블은 데이터를 정리하고 보여주는 데 필수적인 요소입니다. <table>과 관련된 다양한 속성을 활용하면 원하는 데이터 구조를 효과적으로 표현할 수 있습니다. 위에서 소개한 예제를 직접 작성해 보며 연습해 보세요. 테이블을 더 아름답고 사용하기 쉽게 만드는 CSS와 JavaScript 활용법도 다음 단계로 고려해 보세요.