HTML 입문 문법

HTML 테이블 (Tables)

HTML 테이블 (Tables) — 초급

테이블 (Tables)

1. 도입 (왜 배워야 하는가)

HTML 테이블은 웹 페이지에서 데이터를 구조적으로 표현하는 데 매우 중요한 역할을 합니다. 예를 들어, 쇼핑몰에서 상품 목록, 학생의 성적표, 통계 자료 등을 표시할 때 테이블을 사용합니다. 테이블이 없으면 정보를 나열하기 위해 복잡한 레이아웃을 만들어야 하며, 이는 사용자에게 혼란을 줄 수 있습니다. 또한, 테이블이 없으면 데이터의 관계를 이해하기 어렵고, 비효율적인 정보 전달로 이어질 수 있습니다.

2. 핵심 개념 설명

테이블은 정보를 행(row)과 열(column)로 구성하여 보여주는 구조입니다. 이를 통해 데이터 간의 관계를 명확하게 표현할 수 있습니다.

행 (Row): 데이터의 수직적인 줄을 나타냅니다. 예를 들어, 학생의 성적표에서 각 학생의 정보가 한 줄에 들어갑니다.
열 (Column): 데이터의 수평적인 줄을 나타냅니다. 학생의 성적표에서 "이름", "수학 점수", "영어 점수" 등이 각각의 열이 됩니다.
셀 (Cell): 행과 열이 교차하는 지점으로, 하나의 데이터 항목을 포함합니다.

예를 들어, 테이블은 마치 정리된 서류철과 같습니다. 서류철의 각 페이지가 행이고, 각 페이지에서 정보를 정리하는 칸이 열입니다.

용어	설명
행	데이터의 수직 줄
열	데이터의 수평 줄
셀	행과 열이 교차하는 데이터

3. 기본 코드 예제

아래는 HTML로 간단한 테이블을 만드는 코드입니다.

<table>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>이순신</td>
        <td>40</td>
        <td>디자이너</td>
    </tr>
</table>

실행 결과:

이름	나이	직업
홍길동	30	개발자
이순신	40	디자이너

<table>: 테이블을 시작하는 태그입니다.
<tr>: 테이블의 행을 정의합니다.
<th>: 헤더 셀을 정의하며, 일반적으로 볼드체로 표시됩니다.
<td>: 데이터 셀을 정의합니다.

4. 실전 활용 예제

쇼핑몰 상품 목록: 상품의 이름, 가격, 재고 수량 등을 테이블로 표시하여 사용자가 쉽게 비교하고 선택할 수 있도록 합니다.

<table>
    <tr>
        <th>상품명</th>
        <th>가격</th>
        <th>재고</th>
    </tr>
    <tr>
        <td>노트북</td>
        <td>1,200,000원</td>
        <td>10개</td>
    </tr>
    <tr>
        <td>스마트폰</td>
        <td>800,000원</td>
        <td>15개</td>
    </tr>
</table>

학생 성적표: 각 학생의 과목별 점수를 테이블로 정리하여 학부모나 학생이 쉽게 이해할 수 있도록 합니다.

<table>
    <tr>
        <th>학생 이름</th>
        <th>수학</th>
        <th>영어</th>
    </tr>
    <tr>
        <td>김철수</td>
        <td>85</td>
        <td>90</td>
    </tr>
    <tr>
        <td>박영희</td>
        <td>78</td>
        <td>88</td>
    </tr>
</table>

5. 흔한 실수와 주의사항

테이블 태그 누락: <table> 태그를 누락하면 HTML 문서에서 테이블이 제대로 표시되지 않습니다.

- 잘못된 코드:

   <tr>
       <th>이름</th>
       <th>나이</th>
   </tr>

- 올바른 코드:

   <table>
       <tr>
           <th>이름</th>
           <th>나이</th>
       </tr>
   </table>

헤더 셀과 데이터 셀 혼용: <th>와 <td>를 혼용하여 사용하면 데이터의 의미가 모호해질 수 있습니다.