[HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th)

HTML에서 웹페이지에 테이블(표) 형태를 표현하기 위해서

주로 <table> 태그를 사용한다.

이번에는 이 table 태그와 관련된 태그와 속성을 이용해서 웹페이지에 table을 표현하는 방법을 알아보도록 하겠다.

table 그리기 - 기본

table을 표현하기 위해서는 

가장 기본적으로 <table>, <th>, <tr>, <td> 이렇게 네 가지 태그를 사용한다.

먼저 예제를 살펴보자.

See the Pen 테이블1 by anna (@hianna) on CodePen.

기본적으로 테이블은 행과 열이 존재한다.

그리고, 행 또는 열에 대해서 제목을 붙여주기도 한다.

위의 예와 같이

html에서 표를 그리기 위해서는 <table> </table> 태그 사이에

행과 열, 제목을 표현해 주는 <tr>, <td>, <th> 태그를 사용하고,

그 사이에 표에 넣어주고자 하는 내용을 적어주면 된다.

<tr>

tr은 'table row'의 약자로, 테이블의 행을 표현한다.

<td>

td는 'table data'의 약자이다.

사실 위에서는 td를 간단히 '열'이라고 표현하였지만, 정확하게는 td태그는 테이블에 들어가는 데이터, 셀을 의미한다.

즉, 하나의 테이블 안에 <tr> 태그로 행을 표현하고, 그 안에 <td> 태그를 이용하여 데이터를 표현 하는 것.

<th>

th는 'table header'의 약자로 테이블의 타이틀을 표현한다.

<td>와 <th>

위의 정의와 같이 table의 데이터를 표현하는 태그는 <td>와 <th> 두 가지 종료가 있다.

두 태그의 차이점을 살펴보면 아래와 같다.

<th>

굵은 글씨(bold)

가운데 정렬(center)

<tr>

보통 굵기 글씨

왼쪽 정렬(left-aligned)

추가적인 설정을 통해 속성을 변경할 수 있겠지만,

위의 태그를 사용하면 특별한 속성 설정없이도 위와 같은 속성이 자동적으로 설정된다.

위의 예제를 통해서도

th 태그 사이에 있는, '나라', '수도'는 자동으로 굵은 글씨체로 가운데 정렬이 되어 있는 것을 확인 할 수 있다.