HTML5 table 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.13 19:09

HTML5 table 엘리먼트(element)

테이블의 경우 크게 변한것 없다. 일단 그전에 올린 포스팅을 참조하자 여기것이 거의 그 대로이다.

웹표준 테이블 코딩 2009/9

웹표준 테이블 코딩 좀더 보완 2010/7

대부분의 속성엘리먼트가 CSS로 대체하도록 되었고 남은 속성엘리먼트는 summury, span정도이다.

테이블 네임의 작성형태

테이블엘리먼트에서 별 다를 바가 없으나 다른 엘리먼트추가로 약간 테이블 설명에 변화를 줄 수 있다.

월드 와이드웹 홈에서 참고http://dev.w3.org/html5/spec/Overview.html#the-table-element

먼저 흔히 사용해오던 방법 captionstrong으로 강조하고 있다.


<table>
<caption>
<strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative......side in the right column.</p>
 </caption>
<thead>

detail엘리먼트로 보완하는 방법


<caption>
  <strong>Characteristics with ....gative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in t......column.</p>
  </details>
</caption>

figure엘리먼트로 설명


<figure>
 <figcaption>Characteristics.....d negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column....column.</p>
 <table>
  <thead>
   ......
    <td> Passing
 </table>
</figure>

figure엘리먼트에 figcaption엘리먼트로 설명


<figure>
 <figcaption>
  <strong>Character......ve sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the le......column.</p>
 </figcaption>
 <table>
  <thead>
 ......
    <td> Passing
 </table>
</figure>


이 중에 어느 방법을 사용하냐는 때에 따라 다르며, 기본적으로 단순한 표(table)의 경우 captionstrong을 사용 하도록 권유하고 있다.

저작자 표시
신고

설정

트랙백

댓글

웹표준 테이블 코딩 보완

웹표준 2010.07.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;}


저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바