블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

'table'에 해당되는 글 1

  1. 2006.11.30 테이블(Table) 그리기
2006. 11. 30. 14:57 Programing/HTML/JavaScript/CSS
<table width="500" cellpadding="3" cellspacing="0" border="1" rules="none">
  <thead>
       <tr>
           <th>id</th>
           <th>name</th>
           <th>birth</th>
       </tr>
  </thead>
  <tbody>
       <tr>
           <td>1</td>
           <td>Asrada</td>
           <td>79.06.15</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Wave</td>
           <td>79.06.15</td>
       </tr>
  </tbody>
  <tfoot>
       <tr>
           <td colspan="3" align="center">hello world</td>
       </tr>
  </tfoot>
</table>

HTML에서 가장 많이 쓰이는 태그는 아무래도  <table>이 아닐까 한다.
표를 그리기 위한 table태그지만 레이아웃을 잡을때도 그 역할을 톡톡히 해내는
만능 태그이다. 물론 레이아웃용으로 쓰이는건 지양해야 하지만 말이다.

<table> 알맞게 쓰기

테이블을 그리기에앞서 테이블의 용도를 먼저 생각해야 한다.
<table>태그의 존재이유는 바로 '표'를 표시하기 위함이다.
표란 말 그대로 엑셀의 시트처럼 가로세로 칸이 나뉘어진 틀을 의미한다.
학급의 학생 목록이나 은행 계좌 거래 내역같은 일정한 형식의 내용들이 반복되는 경우
표를 써서 알아보기 쉽게 표현할 수 있다.
하지만 HTML에서 표를 그리는 역할을 맡은 <table>태그는 본래의 임무보다 과도한 일을 묵묵히
수행하고 있다.
페이지의 레이아웃을 잡기 위해 쓰이기도 하고 간격을 맞추기 힘든 부분에 <table>을 써서
꼼수로 간격을 맞추기도 한다.
이것은 코드와 디자인의 분리를 더욱 어렵게 만들고 나아가 필요 없는 부하를 유발한다.
실제로 <table>태그는 <div>태그에 비해 처리 속도가 늦다고 한다.
학생은 학생답게, 남자는 남자답게, <table>은 테이블답게....??


또한 가장 많이 쓰이는 태그이다보니 가장 많은 잘못된 습관을 야기시키기도 한다.
대표적으로 form태그와의 혼용문제이다.

흔히 form태그가 들어가면 공백이 생긴다는 이유로 form태그를 table 태그 안에 넣는 경우가 있다.
<table>
<form>
</form>
</table>

하지만 위는 아주 잘못된 태깅이다.
폼태그의 공백은 css에서 form{margin: 0}을 설정해 주는 것만으로 깔끔하게 처리가 된다.
다음과 같이 폼태그가 테이블 태그를 감싸는 것이 올바른 태깅이다.
<form>
<table>
</table>
</form>

또 <tr></tr>과 <tr></tr> 사이에는 폼태그가 들어가면 안된다.
단, <td></td>사이에는 허용이 된다.
<tr><td></td></tr>
<input type="text" />               >> 잘못된 사용
<tr><td></td></tr>

<tr><td><input type="text" /></td></tr>


다음으로 흔히 접하게 되는 잘못된 사용예는 테이블에 그룹핑을 하지 않는 것이다.
표준 테이블의 모양은 다음과 같다.
<table>
  <thead>
       <tr><td></tr></td>
  </thead>
  <tbody>
       <tr><td></tr></td>
  </tbody>
  <tfoot>
       <tr><td></tr></td>
  </tfoot>
</table>

단, tfoot는 필요에 따라 빼도 상관 없다.

이렇게 그룹핑을 함으로써 얻어지는 잇점은 다음에 살펴볼 테이블의 속성에 있다.


속성(Attribute)


1.rules

rules는 셀의 경계선을 나타내는 방법을 지정하는 속성이다.
위의 테이블에 border="1" 속성을 추가해 보자.
테이블의 모든 셀들이 작은 박스로 나뉘어 구분되어진다.
이제 rules="cols" 속성을 추가해 보자.
외곽선을 제외한 가로줄이 모두 없어졌다.
rules의 값을 rows로 바꿔보자.
이번엔 세로줄이 모두 사라지고 안보였던 가로줄이 나타난다.
만약 이 속성값을 모르고 있다면 각 셀마다 일일이 css로 border 값을 설정해주느라 태그가
엉망진창이 되버릴것이다.

rules 의 속성 값에는 cols,rows,all,groups,none 가 있다.


2.frame

frame는 테이블의 외각선을 나타내는 방법을 지정하는 속성이다.
rules와 더불어 css노가다를 획기적으로 줄여주는 속성이다.

frame의 속성 값에는 void,above,below,lhs,rhs,hsides,vsides,box,border 가 있다.



스타일(CSS)

3.border-collapse

border-collapse는 css이다.
보통 테이블에 border속성을 주면 값이 1이라도 선이 굵게 나와 보기 좋지 않다.
이떼 style="border-collapse: collapse;" 라고 스타일을 지정해주면
얇은 선으로 표시가 되어 한결 깔끔해진다.
테이블에 border속성을 주지 않고 style로 border: solid 1px #000000; 과 같이 border를 만들었다면
이 문서를 프린터로 인쇄 하면 선이 보이지 않는 문제가 있다.
하지만 테이블에 border값을 주고 스타일로 collapse를 지정함으로써 위와 같은 문제를
해결 할 수가 있다.

border-collapse 속성 값에는 collapse,separate 가 있다.

4.table-layout

테이블의 각 셀에 width,height값을 주지 않으면 브라우져가 자동으로 셀의 내용에 맞게
크기를 계산하여 그리게 된다. 하지만 셀에 width,height 값을 주어도 셀의 내용이 커지면
셀의 모양이 흐트러지게 된다.
이럴때 table-layout css를 사용하면 셀의 넓이를 정확히 고정시킬수 있다.
style="table-layout: fixed;" 이렇게 스타일을 지정하면 셀 내용에 상관없이 지정한 크기로 그려진다.

table-layout 속성 값에는 fixed,auto가 있다.



위의 테이블의 속성,css는 테이블을 그리는데 있어 가장 기본적인 것들이다.
더 세세한 내용은 http://www.w3c.org 홈페이지에서 HTML의 Table 명세를 보거나 테이블관련 CSS를 보면 쉽게 정보를 얻을 수 있다.
다시한번 강조하지만 테이블로써 레이아웃을 잡는건 아주 잘못된 습관이다.
테이블의 탄생 목적은 표를그리기 위함 이라는것을 명심하자.




"Markup Language 인 HTML에서 올바른 태그는
선택이 아닌 필수이며 코더의 의무이다."

'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

이벤트 Fake!!!  (0) 2006.12.12
키입력 이벤트처리  (2) 2006.12.06
CSS Box Model  (0) 2006.11.30
Ajax + Drag&Drop 활용 사이트  (0) 2006.11.10
자동으로 Sorting 이 되는 SELECTBOX에 항목추가하기  (0) 2006.11.08
posted by 초딩입맛제주아재
TAG CSS, HTML, table

댓글을 달아 주세요

prev 1 next