웹 표준에서의 Table 태그 의 올바른 용도

가끔 이런 말을 들을 때가 있습니다.

웹 표준을 한다는 것은 테이블 태그를 사용하지 않는다는 건가요?

라는 질문을 가끔 받는데, 웹 표준이라고 해서 테이블 태그를 사용하지 말라는 것은 아닙니다.

하지만 테이블 테그는 테이블이 반드시 필요한 테이블에만 적용을 해야지, 사이트의 레이아웃을 잡을 때 쓰는 것은 좋지 않다는 겁니다. (권장하지 않는 다는 말이지요.)

 

테이블 태그를 사용해서 사이트를 개발하다 보면 정말 골치 아픈게, <td></td>  또는 <tr> </tr> 가 어디서 시작되고 어디서 끝나는지 몰라 가끔 헤맬때도 많고 무엇보다 태그가 무지 많이 생성된다는 겁니다. 그러면 개발자의 입장에서도 코드 수가 많아짐으로 인해 복잡해지고 코드가 많으면 사이트 렌더링 시 시간도 좀 더 많이 소요되고, 무엇보다 네트웍 트래픽이 증가하게 됩니다.

 

“네크웍 트래픽이 증가되는 것이 뭔 대수냐” 하고 생각 하실 분도 계실텐데, 예를 들어 웹호스팅을 하거나, 서버 호스팅을 할 때는 대개 트래픽을 기준으로 요금을 산정합니다.

 

그래서 일정 트래픽을 넘어가면 “용량이 초과되어 서비스를 할 수 없습니다” 라는 메시지를 보실 수 있을텐데요. 즉 기존 테이블 태그를 이용해서 사이트 작업 시 1,000명이 볼 수 있던 사이트가 웹 표준을 잘 준수해서 작업을 하면 1,500명까지 볼 수 있는 것입니다.

 

자 그럼 테이블 태그가 정말 필요할 때가 언제인지 보시겠습니다.

 

 

위와 같이 표로 표시되어야 하는 문서가 있을 때는 테이블 태그를 사용해야 합니다.

 

그럼 위와 같은 테이블 태그를 이용한 문서의 소스를 한번 보겠습니다.

 

<<table cellspacing="0">

        <tr>

          <th>시상내용</td>

          <th>수 량</td>

          <th>부  상</td>

        <th>비       고</td>        </tr>

        <tr>

          <td>대상</td>

          <td>1</td>

          <td>상장, 500만원</td>

          <td>지식경제부장관상 및 상패</td>

        </tr>

        <tr class="alt">

          <td>금상</td>

          <td>2</td>

          <td>상장, 200만원</td>

          <td>제주특별자치도지사상 및 상패</td>

        </tr>

        <tr>

          <td>은상</td>

          <td>2</td>

          <td>상장, 150만원</td>

          <td>제주특별자치도지사상 </td>

        </tr>

        <tr class="alt">

          <td>동상</td>

          <td>2</td>

          <td>상장, 100만원</td>

          <td>위와 같음</td>

        </tr>

        <tr>

          <td>중소기업중앙회장상</td>

          <td>1</td>

          <td>상장, 200만원</td>

          <td>중소기업중앙회장상</td>

        </tr>

        <tr>

          <td>특허청장상</td>

          <td>2</td>

          <td>상장, 100만원</td>

          <td>특허청장상</td>

        </tr>

         <tr class="alt">

          <td>기업부문특별상</td>

          <td>3</td>

          <td>상장, 200만원</td>

          <td>특별디자인부문 지정업체별 각 1명</td>

        </tr>

        <tr>

          <td>디자인진흥원장상</td>

          <td>2</td>

          <td>상장, 50만원</td>

          <td>

 

            디자인진흥원장상

        </td>

        </tr>

        <tr class="alt">

          <td>특선 </td>

          <td>다수</td>

          <td>상장, 상품권</td>

          <td>제주도디자인협동조합 이사장상 </td>

        </tr>

        <tr class="alt">

          <td>입선</td>

          <td>다수</td>

          <td>상장, 상품권</td>

          <td>

            제주도디자인협동조합 이사장상          </td>

        </tr>

      </table>

 

간단하게 테이블이 정리되어 있는 모습을 볼 수 있습니다.

 

여기서도 테이블의 디자인은 CSS를 이용해서 디자인을 합니다.

 

아래는 CSS 소스 코드입니다.

여기서 #contest 는 테이블이 들어가 있는 부분에 대한 레이아웃을 잡아주는 역할을 하며 그안에 테이블이 있기 때문에 #contest table { ………. } 이렇게 처리되었습니다.

 

#contest table {

           border:solid 2px #666666;

           width:680px;

           margin-left:15px;

}

 

#contest th {

           height:15px;

           background-color:#3399FF;

           font-weight: bold;

           color: #FFFFFF;

}

 

#contest th, td {

           padding:8px;

           text-align:center;

           border-bottom:1px solid #999999;

 

}

 

#contest tr {

           background-color: #FFFFFF;

}

 

#contest tr.alt {

           background-color: #F4F4E8;

}

 

자 이제 부터는 테이블 태그는 표가 필요한 상황에서만 사용해야 하는 것을 알겠지요?