웹표준 테이블 코딩 보완

웹표준 2010. 7. 13. 18:29

웹표준 테이블 코딩

본주소는 여기 좀더보완한다 웹표준 테이블

행과 열

행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조

코딩의 개념 다시확인


thead엘리먼트는 표의 머릿부분을  tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다.

tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다.
특별한 의미가 없다면 굳이 사용할 필요는 없다.

tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한예</caption>
<thead>
 <tr>
  <th scope="col">이름</th>
  <th scope="col">성별</th>
  <th scope="col">직업</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td>
  <td>남자와여자</td>
  <td>웹관련</td>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>뭐시기</td>
  <td>남</td>
  <td>프로그래머</td>
 </tr>
 <tr>
  <td>저시기</td>
  <td>여</td>
  <td>디자이너</td>
 </tr>
</tbody>
</table>


잘 모르는 것들 다시확인


colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예



<caption>웹표준 테이블 코딩</caption>
<colgroup span="1"/> <colgroup span="2"/> ...

caption 다음에 쓰는것이 올바르다.
colgroup대한 올바른 사용은 그림을 참조하여 아래를 상기하자

1. 단순한 colgroup으로 끝맺으면 표 에서 세로한줄을 의미한다.
2. 속성 span은 몇개의 세로줄을 지칭 하는가 이다.
span="2" 라고 되어있으면 연 이은 세로 두줄을 지칭한다
3. 자식엘리먼트로 col이 있다. col역시 span속성 엘리먼트가 있으며 수에따라 세로줄을 지칭한다.


<colgroup>
 <col />
 <col span="2" />
</colgroup>

colgroup, col엘리먼트의 span ,CSS width

span 처럼 위에서 말한데로 세로줄을 지칭한다. 이때 span값이 2일지라도 CSS나 속성의 width값등은 하나의 줄마다적용된다. colgroup, col엘리먼트의 다른 속성으로는 넓이도 있는데 다음예를보자.


<col width="70" span="2" />

또는 css로보자면


col{width:70px;}


span값이 2라고 해서 두 줄을 합해서 가로값이 70이 아니고 각각의 줄의 값을 말한다.

IE6와 CSS문제

그림과 같이 배경색을 지정할때 문제는 IE6에 있다. 속성 선택자가 가능하면  단번에 다음과 같이 한줄을 월하는색으로 해줄수있다.


colgroup[span="1"]{ background:#fc9;}
colgroup[span="2"]{ background:#6c6;}
col{background:#f6f;}
col[span="2"]{background:#969;}

하지만 IE6는 지원하지않는다. 방법은 아래와같이 colgroup안에 col을 다 만들고 아이디 지정후
그에맞게 CSS로 지정해주는 방법뿐이다.


<col id="first" />
<col id="sec" />
<col id="thi" />
<col id="forth" />
<col id="fifi" />
<col id="six" />

마지막으로 아래는 처음의 그림과 같은 결과를 보여준다


..... 
<caption>웹표준 테이블 코딩</caption>
<colgroup span="1" />
<colgroup span="2"/>
<colgroup>
 <col />
 <col span="2" />
</colgroup>
<thead>....

예제의 결과참조 http://sianasiatiger.cafe24.com/study/1_html_table.html


실용적인 표만들기

일단 완성된 그림부터보자


결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/1_html_table_02.html


직업을 나타낼 간단한 표를 만들어 보자. 먼저 테이블 콘텐츠 코딩. 많은 내용의 중간은 생략했다.


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한 직업표</caption>
<thead>
 <tr>
  <th>이름</th><th>성별</th>
  <th>직업</th><th>나이</th>
  <th>혈액형</th><th>기타</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td><td>남자와여자.......</td>
 </tr>
</tfoot>

<tbody>
 <tr class="odd">
  <td>뭐시기..........</td>
 </tr>
 <tr>
  <td>저시기...........</td>
 </tr>
  <tr class="odd">
  <td>또한명...........</td>
 </tr>
</tbody>
</table>


tr엘리먼트에 클래스를 추가한것은 그림처럼 열에따라 배경색을 입히기위해서이다. CSS3가지원된다면 아래처럼 하면  되지만 지원하지않는 브라우저가 많기에 클래스로 해준다.


.odd{ background:#edf5ff;; }
tr:nth-child(odd){background:#edf5ff;}

colgroup을 코딩한 것 처럼 두세로줄을 가로 70 그 다음한줄은 100 다음두중 70 나머지는 자동으로 해주었다.


<colgroup>
<col width="70" span="2" />
<col width="100" />
<col width="70"  span="2" />
<col />
</colgroup>

마지막으로 CSS확인 tfead색 텍스트정렬 이정도는 기본.


body{text-align:left;}
table{padding:0; width:500px; border-collapse:collapse;
border-spacing : 0; border:1px solid #666666;}
thead{ border:2px solid #F99;}
tfoot td{ background:#FFF;} table th{ background:#FC9;} td{border-right: 1px solid #ccc;} col{border-right: 1px solid #ccc;} .odd{ background:#EDF5FF; } tr:nth-child(odd){background:#edf5ff;}



설정

트랙백

댓글

  • 도야 2010.07.20 11:24 ADDR 수정/삭제 답글

    제목은 웹표준 코딩인데.. 내용은 그렇지 않아 보이는군요
    colspan과 rowspan은 웹 표준이 아닙니다.
    익스에서만 지원하는 속성일 뿐입니다.
    웹표준을 공부하시는분들이 이글보고 잘못 이해하실수 있으리라 생각됩니다.
    내용 수정좀 해주세요..
    아님 제목을 그냥 테이블코딩법??

    • Favicon of https://siana.tistory.com 샷타이거 2010.07.20 12:57 신고 수정/삭제

      잘못 보신 듯 한데....

      colspan과 rowspan이 익스에서만 지원하다니요?-_-?

      다른 브라우저에서도 잘 작동합니다.

      이 속성이 없으면 셀병합을 어떻게 하지요?ㅎㅎ

      HTML5에서도 여전히 지원합니다.

      아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.

  • 야옹이 2010.10.20 17:50 ADDR 수정/삭제 답글

    ㅋㅋ 아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.☜ 전 아주그냥 여기에 동감~!!!

  • 2012.03.27 14:30 ADDR 수정/삭제 답글

    tr:bth-child(odd){background:#edf5ff;}

    이부분요.. bth --> nth 아닌가요? 제가 잘못알고있나....용 ;

    • Favicon of https://siana.tistory.com 샷타이거 2012.03.28 11:51 신고 수정/삭제

      오 제가 잘못입력했군요 tr:nth-child 맞습니다.
      감사합니다^^

  • Favicon of http://dsgn.kr 허말랭이 2013.03.20 11:51 신고 ADDR 수정/삭제 답글

    잘보고 갑니당 :-) 도움이 되었어요!