웹표준 테이블 코딩 보완
웹표준 테이블 코딩
본주소는 여기 좀더보완한다 웹표준 테이블
행과 열
행(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;}