테이블은 어떻게 되는건가요? > web20

오늘은 다들 아시겠지만 웹표준을 논할때 <table>  이란 테그 놈이 가장 불쌍하게 되었습니다.

지금까지 잘 사용하다가 하루 아침에 내동댕이 치이게 생겼으니까요~~에허~~

아마 <table>이란 놈은 지금까지 그렇게 지를 쓰다가 한순간에 버리냐? 라고 말할수있겠네요..

그럼 전 테이블한테 이렇게 말해주고 싶습니다. 널 없애 려는게 아니고 너의 분수를 알라구요~~ㅋㅋ

그렇습니다. 테이블테그는 웹표준에서 없어지지 않습니다. 절대로~~

대신 분수를 알아야 합니다..또한 정확한 방법으로 사용을 해야져~~~

오늘은 그테이블 이란놈을 가지고 다양하게 놀아 보려구요..

결론부터 내겠습니다. 테이블은 웹에서  표를 나타낼때 사용하는 테그 입니다. 좀더쉽게 말하면 게시판 리스트, 월별 매출 표... 이런 형태에서 사용하는 겁니다.이걸 반드시 유념하셔야 합니다.

그럼 간단한 소스를 통해서 웹표준형태의 테이블 접근방식을 알아 보겠습니다.  

일반적으로 우리는 그동안 아래와 같은 형태로 테이블을 만들어왔습니다.

<table width="200"  border="1">
<tr>
 <td width="30%" height="10">이름</td>
 <td width="30%" height="10">아이디</td>
 <td  height="10">가입일</td>
</tr>
<tr>
 <td width="30%" height="15">이민구</td>
 <td width="30%" height="15">korea</td>
 <td  height="15">2006.08.25</td>
</tr>
<tr>
 <td width="30%" height="15">이봉구</td>
 <td width="30%" height="15">usa</td>
 <td  height="15">2006.08.23</td>
</tr>
<tr>
 <td width="30%" height="15">한석봉</td>
 <td width="30%" height="15">member</td>
 <td  height="15">2006.08.27</td>
</tr>
</table>

각 테그 자체에 모든 의미를 부여하는 형태로 코드가 난잡해지고~ 높이값하나 바꿀라고 하면 코드 일일이 다 수정해야 하는..그런 X같은 형태의 소스가 우리나라 사이트의 대부분입니다.

뭐가 문제일까요~~

1번째 잘못된 점은 먼저 위의 소스에서 보면 가장 큰 문제는 바로 테그또한 정확한 <TABLE> 쓰는 방식에 맞지 않는다는 점입니다.

테이블 테그의 표준은

<table>

  <tr>

     <th></th>  --> 셀컬럼1

     <th></th>  --> 셀컬럼2

  <tr>

  <tr>

      <td></td> --> 의미1

      <td></td> --> 의미1

  </tr>

</table>

형태가 되어야 합니다.

위와 같은 형태가 표준 테이블 작성 방법입니다.

두번째 잘못된점은 제가 지난주 에세이에서 말씀드린것처럼 테그는 그냥 단순하게 의미만 가지고 잇어야 한다고 햇습니다. 구조만 있어야 한다는 거죠~~ 그럼 그것의 디자인은 어디서 담당한다고 하였지요?? 네~ 바로 CSS입니다. CSS가 테이블을 이쁘게 만들어야만 그것이 진정한 웹표준 테이블입니다. 모두들 백문이 불여일 코드 라고 하였던것 처림 소스 바로 들어 갑니다. 우리가 그동안 무심결에 사용한 테이블 테그를 웹표준 형태로 바꾸면 다음과 같습니다.

 CSS처리 부분

 table{
  width:200px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;

 }
 caption{
   color:#933333;
   padding-bottom:6px;
   text-align:left;

 }

 th{
  width:30%;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background:#C6DFEE;
  height:25px;
  text-align:center;

 }

 td{
  width:30%;
  height:20px;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  padding-left:3px;
  padding-top:2px;
 }

HTML부분

<table summary="이테이블은 회원가입리스트입니다.">
<caption>회원가입 리스트</caption>
<tr>
 <th id="name">이름</td>
 <th id="id">아이디</td>
 <th id="date">가입일</td>
</tr>
<tr>
 <td headers="name">이민구</td>
 <td headers="name">korea</td>
 <td headers="name">2006.08.25</td>
</tr>
<tr>
 <td headers="name">이봉구</td>
 <td headers="id">usa</td>
 <td headers="date">2006.08.23</td>
</tr>
<tr>
 <td headers="name">한석봉</td>
 <td headers="id">member</td>
 <td headers="date">2006.08.27</td>
</tr>
</table>

보시는것처럼 hml테그에는 완전한 의미만 부여합니다. 말그대로 뜻만 전달하는거죠~

CSS부에서는 모든 것들을 컨트롤 하는 디자인이 존재합니다. CSS만 수정하면 표의 크기 색깔 모든것들 을 다이나믹하게 바꿀수있죠~~ 참고로 CSS젠가든(http://csszengarden.com)이라는 사이트가 있습니다. CSS만 가지고 사이트의 디자인을 바꾸는 거죠~ 가보고 완전 깜짝놀랐어요~~

이처럼 웹은 진화하고 있습니다. 얼마전 취업 사이트를 함 들어가봤는데 드디어 웹표준과 CSS, AJAX 가 경력직 모집 부분에 뜨기 시작했습니다. 그만큼 연봉 돈과 직결되죠~~

삼천포로 잠시 빠졌네요. 이제부터 테이블 테그가 본연의 임무만 할수있도록 우리 모두 도와 줍시다~~ 이상이었습니다.