웹표준 테이블 코딩하기
테이블의 본래 목적은 자료를 가독성있게 ,쉽게알아볼수 있도록 행렬로 표시해주는 것이다. 이런 표의 올바른 사용법 그리고 올바른 코딩을 알아본다
우리가 흔히 알고 있는 태그틑 table, td, tr 이세가지이다. 명확한 표의 사용을 위해 엘리먼트들을 살펴보자
써머리와 캡션
caption은 테이블의 제목으로 보면된다. 테이블의 가운데 정렬된다
참고로 table의 속성 엘리먼트 summary는 이미지의 속성 엘리먼트 alt와 같이 마우스를 올릴때 설명해준다
thead,th,tbody,td,tfoot
thead 는 표의 맨 머릿부분이다.다름것도 마찬가지로tbody는 주요 내용tfoot은 마지막을 나타낸다. 이렇게하면 좀더의미를 명확히 할 수 있다. th는td차이도 마찬가지이다.th는 thead에서 사용된다
| 번호 | 곡명 | 아티스트 | 앨범 |
|---|---|---|---|
| 2. | 뭐야 | 만든놈B | what is ... |
| 1. | 랄랄라 | 만든놈A | 잼나는 앨범 |
속성엘리먼트에서 눈여겨볼것은 scope이다 값은 col, row로 소스를 봤을때 열인지 행인지 알수 있도록하기위해 사용한다.
col, colgroup
표에서 tr을 css에서 선택하면 전채행에 대해 적용할 수 있다.또 아이디를 부여하여 특정열에 사용할 수 있다. 하지만 td의 경우는 상대적으로 많이 사용되기에 한 행에대해 지정하기가 쉽지않다.그래서 지정을 위해 사용하는 엘리먼트가 col, colgroup이다
<colgroup>
<col id="first" />
<col id="second" />
<col id="third" />
<col id="forth" />
</colgroup>
하지만 단점이 있으니 아직 여러 브라우저에서 지원하지 않는다는점..
위와 같이하면 css에서 col#first{} 이런식으로 지정하여 표의 모든 첫번째 행에 스타일을 지정할 수 있게 된다
셀간격의 초기와 문제
css의 border-spacing를 사용하면 셀간격을 쉽게조절할 수 있다. 하지만 익스플로어에서는 지원하지않는다.
표준을 따라가자니 cellspacing를 사용할 수 밖에 없으니 할수 없다.cellspacing를 사용하면 마크업에 표현의 내용이 들어가지만.. 이정도쯤이야
댓글