[웹코딩의 기초] 모든 태그에는 뜻이 있다 (3) 테이블 태그

이번에 알려드릴 태그는 <table> 태그입니다

이것도 에디터에서 생성할수 있는 기능이 있는데 이 테이블의 기본 구조에 대해서 알아봅시다

 

테이블 태그는 아마 2000년대 초반이나 그보다 더 과거에 html 코딩을 해본적이 있으신 분들이라면 매우 익숙한 태그일거라고 생각됩니다. 현재는 테이블로 레이아웃을 짜는것이 금지(?)되어있습니다만 과거에는 다들 테이블 코딩을 했었죠

지금은 그렇게 안하는 가장 큰 이유는 표가 가지는 특성이 있고 이 뜻을 해치는 사용법을 지양하고있기 때문입니다.

 

예전에는 테이블태그 안에 들어가는 태그로 <tr>,<td>,<th> 정도가 있었는데 지금은 더 복잡해져서 여기에 추가된 태그에 대해 이야기하고 구조를 설명해 보도록 하겠습니다.

 

먼저 기본 구조(필수로 들어가야하는 구성)를 확인해봅시다

<table>
    <tbody>
        <tr>
            <td>표 한 칸</td>
        </tr>
    </tbody>
</table>

이렇게가 기본 구조로 그외에는 필요에 따라 추가하거나 생략할 수 있습니다.

아래 설명되는 태그들은 전부 <table> 태그 안에만 들어갈 수 있는 태그이며 작성하는 순서가 있습니다.

 

 

<caption>

필수로 작성해야하는 태그는 아니지만 넣는다면 <table> 태그 안에 가장 첫번째로 작성하는 태그입니다. 표의 제목이라고 생각하면 편합니다. 한개의 <table> 태그당 한개의 <caption> 태그만 넣습니다.

<table>
    <caption>제목</caption>
    <tbody>
       <tr>
           <td>표 한 칸</td>
       </tr>
    </tbody>
</table>

넣는다면 이렇게 되겠죠?

 

 

<colgroup>

'column group'의 약자로 역시 선택적으로 작성하는 태그입니다. 열의 개수를 맞추고 각 열의 너비를 미리 정하는데 사용합니다. <col> 태그의 반복으로 열의 개수를 정합니다.

<col> 태그는 'column'의 약자로 종료태그 없이 단독으로 사용하는 태그입니다. <col> 태그 안에 스타일을 넣어 너비를 정하거나 합니다.

<colgroup>과 <col> 태그는 실질적으로 눈에 보이지는 않으며 표 너비 설정을 위해 작성하는것에 가깝기 때문에 모든 열의 너비를 같게 한다면 굳이 작성할 필요는 없습니다.

작성한다면 <caption> 태그 다음으로 작성합니다. 역시 한개의 <table> 태그당 한개의 <colgroup>을 사용합니다.

<table>
    <caption>제목</caption>
    <colgroup>
        <col style="width:40%;">
        <col style="width:60%;">
    </colgroup>
    <tbody>
          <tr>
             <td>표 한 칸</td><td>표 한 칸</td>
        </tr>
    </tbody>
</table>

 

 

<thead>

'table head', 즉 표의 각 항목의 제목(?)들을 묶어주는 태그입니다. 가로를 한줄으로 사용하기 때문에 항목의 제목에 해당하는 줄이 세로로 나열되어야 한다면 사용할 필요는 없습니다.

<thead> 태그 안에는 <tr>, 그리고 <tr> 안에 <th>로 구성됩니다.

<thead>는 위 요소들 바로 다음에 나와야 하며(colgroup이 없다면 caption다음, colgroup이 있다면 colgroup 다음) 이것도 역시 한개의 <table> 태그에 한개의 <thead>만 사용 가능합니다.

<table>
    <caption>제목</caption>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>과일</th><th>동물</th>
        </tr>
    </thead>
    <tbody>
         <tr>
             <td>사과</td><td>고양이</td>
         </tr>
    </tbody>
</table>

 

 

<tbody>

'table body', 표의 본체가 되는 태그입니다. 해당 태그는 필수이지만 생략하고 코드를 작성하더라도 자동으로 생성됩니다. 어떻게 보면 생략이 불가능하다고도 할수 있을것 같습니다(이렇게 말하면 헷갈리나요?)

<tbody>는 위에 설명한 태그들이 존재한다면 그 다음으로 와야합니다. 위에서 작성한 예제와 같은 느낌이겠죠?

<tbody> 안에는 <tr>, 그리고 <tr> 안에 <td> 혹은 <th>를 넣을 수 있습니다.

여기까지 오면 눈치 채셨겠지만 <tbody> 역시 한번만 사용 가능합니다.

 

<tr>

'table row', 즉 표의 행을 생성하는 태그입니다.

html 코딩에서 표는 가로로 한줄씩, 한줄 안에 원하는 열의 개수만큼의 <td>, 혹은 <th>를 작성합니다.

<tr> 태그 안에 <tr> 태그는 작성이 불가능합니다. (td나 th만 작성 가능)

 

<th>

'table header', 표의 방향에 따라 각 항목의 제목이 되는 태그로 사용됩니다. 필수요소는 아니며 기본 스타일로 굵은 글씨 처리가 됩니다.

실제 예시가 필요할것 같아 아래 표를 작성했는데 과일, 동물, 장소에 해당하는 칸이 <th>라고 보시면 될것 같습니다.

과일	동물	장소
사과	고양이	서울

 

실제로 html로 작성하면 이런 모습이 되겠습니다 (th와 td간에 엔터 생략)

<table>
   <tbody>
      <tr>
        <th>과일</th><th>동물</th><th>장소</th>
      </tr>
      <tr>
         <td>사과</td><td>고양이</td><td>서울</td>
      </tr>
   </tbody>
<table>

보시면 알 수 있듯이 <tr> 하나에 한줄에 들어가는 칸들이 모두 들어있는것을 알 수 있습니다.

제목을 세로로 넣으면 아래와 같이 작성하면 됩니다.

<table>
	<tbody>
      <tr>
        <th>과일</th><td>사과</td>
      </tr>
      <tr>
        <th>동물</th><td>고양이</td>
      </tr>
      <tr>
        <th>장소</th><td>서울</td>
      </tr>
   </tbody>
</table>

과일	사과
동물	고양이
장소	서울

 

<td>

이미 위에서 계속해서 작성해서 보셨겠지만 'table data cell'의 약자로 표 한 칸을 나타내는 태그입니다. <th>도 표의 한 칸을 차지하지만 <td>는 평범한 항목을 나타내는 점에서 차이를 가집니다.  

<th>와 함께 테이블 안에서 가장 작은 단위이기 때문에 이 태그들 안에는 테이블 관련 태그를 작성할 수 없습니다.

 

<tfoot>

'table foot', 테이블 푸터를 묶어주는 태그입니다. 결과값 도출이 필요할때 주로 사용합니다.

<tbody> 다음으로, 마지막에만 올 수 있으며 역시 한개의 <table> 태그 안에서 한 번만 사용할 수 있습니다.

사과	4
배	3
귤	3
총 개수	10

이런 표가 있다면 '총 개수'와 10이 있는 행을 <tfoot>에 넣어 사용할 수 있다고 보면 됩니다.

<table>
	<tbody>
      <tr>
        <th>사과</th><td>4</td>
      </tr>
      <tr>
        <th>배</th><td>3</td>
      </tr>
      <tr>
        <th>귤</th><td>3</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th>총 개수</th><td>10</td>
      </tr>
   </tfoot>
</table>

<thead> 태그 안에 <th>가 들어가니까 왠지 <tf>도 있어야 할것 같지만 그런 태그는 존재하지 않고 평범하게 <tr> 안에 <th>나 <td> 태그를 넣습니다

 

구조까지 설명하느라 조금 길어졌는데 이해하는데 도움이 되었을까요?

그 외에도 th나 tr 등에 부여할수 있는 속성이라던지 특정 칸을 합치는 방법 같은게 있는데 사실상 코딩하면서 표를 그렇게 복잡하게/자주 사용할일이 많지 않기 때문에(하는 일에 따라 조금 다를수 있습니다만) 생략하고 나중에 기회가 되면 설명해 보도록 하겠습니다. 

 

* 다음 포스팅에서 이어집니다.