안녕하세요. 마지막 업데이트가 무려 6개월 이전이군요... 초심으로 돌아가 다시 퍼블리싱 배우기를 연재를 해보려고합니다. 아무쪼록 재미있게 봐주셨으면 합니다. 뭐든 배우는 건 재미, 흥미를 가지는게 제일 중요하죠:)

저번 시간까지는 이론적인 부분이 많았다면 앞으로는 좀 더 실전적인 부분 위주로 적어볼까합니다. 오늘은 table 태그를 사용하여 테이블을 만드는 방법에 대하여 알아보려합니다.


! 테이블(table) 만들기를 배워보자
테이블을 먼저 알아보려고 하는 이유는 테이블을 만들어 사용하는 빈도수가 매우 높기 때문입니다. 테이블 코드는 어딜가나 볼 수 있는데 가장 많이 볼 수 있는 형태가 바로 게시판이라 할 수 있습니다. 게시판 형태의 레이아웃을 만드는 경우 테이블 태그를 사용하는 것이 가장 쉬운 방법이라 생각됩니다. 가장 먼저 테이블을 만들기 위해서 어떤 태그를 사용할까요? 바로 <table> 태그를 사용합니다.

table 태그와 같은 태그들은 레이아웃, ui 요소를 쉽게 구현할 수 있도록 도와주는 태그로 table 태그를 사용하면 테이블을 그리는데 필요한 인터페이스를 가지고 이를 구현해줍니다. 그럼 아래부터는 실제로 예제를 통해 테이블 태그를 사용하는 방법에 대하여 자세히 알아보겠습니다.

<table>
   <tr>
      <td>Free Board</td>
   </tr>
</table>

위 예제는 가장 간단한 방법의 테이블 태그 모습으로 일부입니다. 이제부터 만들어 볼 예제는 바로 자유게시판입니다. 아래 예제는 실제 http://webisfree.com/community/ 의 자유게시판입니다.
스크린샷) 웹이즈프리 커뮤니티 게시판 모습

위 게시판을 간단하게 보면 2 x 6 모습을 띄고 있습니다. 즉 두개의 컬럼과 6개의 행으로 이루어져 있고 제일 위에는 해당 컬럼이 어떤 내용을 가지고 알려주는 테이블의 head 영역입니다. 이처럼 테이블은 일반적으로 상단에 컬럼에 대한 설명을 나타냅니다. 이를 코드로 나타내면 아래와 같습니다.

<table>
   <thead>
      <tr>
         <th>No</th>
         <th>Title</th>
      </tr>
   </thead>
   <tbody>
      ... .. .
   </tbody>
</table>

보시는 것처럼 thead에는 컬럼의 제목을 나타내는 영역으로 <thead>태그와 <tr>, <th>를 사용해 구현합니다. 이때 <thead> 태그 내부를 구성하는 *레코드값으로는 <th>태그를 사용합니다. 위 코드를 통해 2개의 컬럼을 생성하였고 컬럼에 맞는 제목을 추가하였습니다. 태그에 대한 자세한 내용은 아래를 참고하세요.

<thead> 테이블의 컬럼에 대한 콘텐츠 영역을 나타냄
<tbody> 테이블의 주요한 데이터를 보여주는 콘텐츠 영역을 나타냄
<tr> 새로운 행의 시작과 끝
<th> thead 영역에서의 하나의 레코드 영역
<td> tbody 영역에서의 하나의 레코드 영역


* 레코드(Record) : 테이블을 구성하는 가장 작은 단위의 하나의 셀을 의미함

그럼 아래는 본문에 대한 내용을 넣도록 하겠습니다. 메인 콘텐츠에 해당하는 부분은 <tbody> 태그를 사용하고 이 영역에 추가하도록 합니다. No, Title에 해당하는 값들은 바로 이 영역에 위치하게 됩니다. 아래의 코드를 봐주세요.

<table>
   <thead>
      <tr>
         <th>No</th>
         <th>Title</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>17</td>
         <td>클래시로얄 새로운 업데이트</td>
      </tr>
      <tr>
         <td>15</td>
         <td>오버워치 공략 영상을 보려고...</td>
      </tr>
      <tr>
         <td>14</td>
         <td>장마라더니... 회기 파전골목</td>
      </tr>
      <tr>
         <td>13</td>
         <td>테슬라의 자율주행차 첫 사망자 발생<td>
      </tr>
      <tr>
         <td>12</td>
         <td>최근 핫한 오버워치 처음한 짧은 소감</td>
      </tr>
   </tbody>
</table>

여기까지가 코드의 전체 모습입니다. 실제로 이를 구현하면 위 이미지와 동일한 모습의 레이아웃을 가진 테이블이 완성되게됩니다. 하지만 하나 더 수정할 부분이 있으니 바로 컬럼의 width 값입니다. 이는 테이블에서 매우 중요한 요소 중 하나인데 테이블이 가진 컬럼의 개수가 많아질 경우 각각의 컬럼이 가지게 될 최대 길이를 감안하여 정해야하기 때문입니다. 만약 적절한 값을 가지지 않게되면 가독성이 매우 떨어지는 테이블이 나타날 수 있습니다. 이를 설정하는 방법은 두 가지가 있습니다.

1. <colgroup> 태그의 설정방법
2. css를 사용하는 방법

먼저 위의 1번에 해당하는 방법은 <table> 태그 안에 설정하는 방법입니다. 이를 설정할 경우 테이블안에 위치한 컬럼의 간격값을 각각 설정하는 것이 가능합니다.

<colgroup>
   <col width="30%" />
   <col width="70%" />
</colgroup>

두번째 방법은 가장 일반적인 css를 사용한 방법으로 아래와 같이 일반적인 모습과 동일합니다.
<style>
  table tr td:nth-child(1) { width: 30%; }
  table tr td:nth-child(2) { width: 70%; }
</style>

여기까지 table 태그를 사용한 테이블 구현방법에 대하여 알아보았습니다. 테이블을 만드는 방법은 매우 자주 사용되는 방법으로 꼭 알아두시기 바랍니다.

# 테이블태그 만들기 YouTube 영상 보기