HTML로 표(테이블) 만드는 법

^{How to make table with HTML}

HTML 테이블 만들기

HTML로 표(테이블) 만드는 법

 

테이블 안에 있는 블럭들을 가로로는 행 Row이라고 부르며 세로로는 열 Column로 부릅니다.

 

HTML에서 표를 만들 때는 <table></table> 태그를 사용합니다.

 

<table> 태그 안에 <tr></tr> 태그를 사용하면 테이블의 행 하나가 생성됩니다.

이렇게 row와 column이 하나인 table이 완성됩니다.

 

<tr>태그 안에서는 <td></td>를 사용해서 정보를 입력합니다.

(tr은 표의 행을 뜻하는 tablerow의 약자입니다)

<table>
    <tr>
    	<td>tablerow</td>
    </tr>
</table>

 

tablerow

HTML 테이블 열 늘리는 법

1 오른쪽에 2라는 정보를 담은 열을 만들고 싶다면 어떻게 하면 될까요?

<tr> 태그 안에 있는 1에서 엔터 치시고 2를 다음 줄에 입력해주면 됩니다.

<table>
    <tr>
    	<td>1</td>
    	<td>2</td>
    </tr>
</table>

 

1

2

 

HTML 테이블 행 늘리는 법

1과 2라는 정보가 담긴 행 아래에 3과 4라는 두 개의 열을 가진 행을 만들어보겠습니다.

<tr> 태그를 하나 더 입력해주세요

두번째 태그에는 숫자 3과 4를 각각 다른 줄에 삽입했습니다.

<table>
    <tr>
    	<td>1</td>
    	<td>2</td>
    </tr>
    <tr>
    	<td>3</td>
    	<td>4</td>
    </tr>
</table>

 

1	2
3	4

그러면 이렇게 행이 하나 더 늘어난 것을 볼 수 있습니다.

 

이제 잘 아시겠죠?

이걸 조합하면 아래와 같은 테이블을 만들 수 있습니다.

<table>
    <tr>
	<td>1rowLeft</td>
	<td>1rowRight</td>
    </tr>
    <tr>
    	<td>2rowLeft</td>
        <td>2rowRight</td>
    </tr>
    <tr>
    	<td>3rowLeft</td>
        <td>2rowRightt</td>
    </tr>
</table>

1rowLeft	1rowRight
2rowLeft	2rowRight
3rowLeft	3rowRight

Table의 head 입력하기

추가적으로 이번에는 각 열을 설명해주는 head를 달아보겠습니다.

<table> 태그 안에 <thead> 태그를 사용해서 table head를 만듭니다.

그 안에 담긴 정보들에는 <th> 태그를 사용해주세요.

 

Table의 body 입력하기

<table> 태그 안에 <tbody> 태그를 사용해서 table body를 만듭니다.

그 안에 담긴 정보들에는 <td> 태그를 사용해주세요.

  <table>
    <thead>
      <tr>
        <th>Dates</th>
        <th>Work</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2014-2017</td>
        <td>ROK Air Force</td>
      </tr>
      <tr>
        <td>2018-2020</td>
        <td>Government Worker</td>
      </tr>
    </tbody>
  </table>

Dates	Work
2014-2017	ROK Air Force
2018-2020	Government Worker

 

---

 

지금까지 간략하게 HTML에서 표(테이블) 만드는 법을 알아봤습니다.

모쪼록 이 글이 많은 분들께 도움이 되었기를 바랍니다.