코딩스쿨

HTML Tables

1. HTML Tables란?

HTML Tables는 데이터를 행(row)과 열(column)로 나열하는 구조입니다. 테이블은 주로 데이터를 시각적으로 정렬하고 이해하기 쉽게 표시하는 데 사용됩니다.

2. HTML Table의 기본 구조

HTML 테이블의 기본 구성 요소는 <table>, <tr>, <th>, <td> 태그입니다.

<table>
    <tr>
        <th>헤더 1</th>
        <th>헤더 2</th>
    </tr>
    <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
    </tr>
</table>

3. HTML Table 태그와 속성

테이블 행은 <tr> 태그로, 제목 셀은 <th> 태그로, 데이터 셀은 <td> 태그로 정의됩니다.

<table>
    <tr>
        <th>이름</th>
        <th>나이</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>25</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td>30</td>
    </tr>
</table>

4. 테이블 요소 추가

4.1 `<caption>`: 테이블 제목

테이블에 제목을 추가할 때 사용됩니다.

<table>
    <caption>학생 성적표</caption>
    <tr>
        <th>이름</th>
        <th>점수</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>95</td>
    </tr>
</table>

4.2 `<thead>`, `<tbody>`, `<tfoot>`: 테이블 구조화

테이블을 구조화하는 데 사용되는 태그입니다.

<table>
    <thead>
        <tr>
            <th>상품</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>노트북</td>
            <td>1,500,000원</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>
            <td>1,500,000원</td>
        </tr>
    </tfoot>
</table>

5. 셀 병합하기

5.1 `colspan`: 열 병합

<table>
    <tr>
        <th colspan="2">이름</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>김철수</td>
    </tr>
</table>

5.2 `rowspan`: 행 병합

<table>
    <tr>
        <th rowspan="2">과목</th>
        <td>수학</td>
    </tr>
    <tr>
        <td>영어</td>
    </tr>
</table>

6. 테이블에 스타일 적용하기

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

코딩 스쿨 HTML