표만들기 (기본편) HTML 표 만드는 태그, table, tr, td, th

HTML Table(표) 만들기

 

HTML에서 표를 만드려면 최소한 아래 네 가지 태그를 같이 익혀야 합니다.

 

<table> </table> 표를 만들기 위해 감싸는 기본 태그입니다

<tr> : table row의 약자입니다. 가로 한 줄을 만듭니다

<th> : table header의 약자입니다. 제목을 생성합니다

<td> : table data의 약자입니다. <tr> 태그 내에서 사용됩니다

 

이렇게만 쓰면 처음에는 이해가 잘 안되는데요. 아래 사용법과 예시를 보면 금방 익힐 수 있습니다.

 

기초 사용법

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

1. 먼저 <table> 태그를 만듭니다.
2. 그리고 가로 몇 줄이 필요한지 생각해봅니다. 위의 예시에서는 3줄을 만드는 거에요. 그럼 <tr>태그를 3개 만듭니다
3. 이제 세로 칸이 몇 개 필요한지 생각해봅니다. 위의 예시는 2칸입니다. 그래서 <tr>안에 <td>를 2개씩 만듭니다.
4. 그런데 제일 첫 <tr> 내에는 <td> 대신 <th>가 적혀있네요. 제일 첫 행은 제목이라는 선언한 겁니다.

 

화면

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

 

위의 화면을 보면 표가 만들어진 걸 볼 수 있습니다.

예쁘지는 않네요.

 

CSS를 간단하게 적용시켜보겠습니다.

See the Pen table2 by 40's Programmer (@40sProgrammer) on CodePen.

 

조금 나아졌습니다. CSS를 어떻게 쓰느냐에 따라 예쁜 표를 만들 수 있겠네요.

 

다음에는 셀 병합 등 여러가지 테이블 기능을 더 살펴보겠습니다.