본문 바로가기

정보/꾸미기

표 만들기

1. table
 - 제목은 th(기본적으로 굵게 표시), 내용은 td태그를 사용
 - <table><tr><th>...</th></tr><tr><td>...</td></tr></table>
 - 테이블은 html에서 표에 있는 데이터를 명시하는 방법을 제공
 - 레이아웃을 위해 테이블을 사용하는 것은 예전 방식임!

2. 캡션과 요약
 - 캡션은 테이블의 상단(혹은 다른 곳)에 위치하는 테이블의 설명, 제목
 - 요약은 브라우저에서는 보이지 않지만, 스크린 리더기 등을 통해 사용자에게 큰 소리로 읽어줄 수 있음
 - <table summary="Anything"><caption>Anything</caption><tr><th>...</th></tr><tr><td>...</td></tr></table>
 - css에서 table{ caption-side:bottom; }이라고 할 경우, 캡션이 테이블의 아래에 위치하게 됨

3. 테이블 셀 속성
 - 테이블 셀은 패딩과 테두리를 가지고 있지만, 마진은 가지고 있지 않음
 - 대신 border-spacing(모든 셀 주위에 적용되는 공통의 빈 공간)이라는 속성을 가지고 있음
 - border-spacing:10px; 30px;라고 할 경우, 가로 10px, 세로 30px의 테두리 공간을 가짐

4. border-collapse 속성
 - border-collapse:collapse;라고 할 경우, 모든 테이블 셀 주위에 하나의 테두리를 갖게 됨

5. 하나 이상의 셀 통합방법
 - 행 병합시, 이전 tr의 td태그에서 rowspan="2"라고 명시해 줌
 - 열 병핫미, colspan="2"라고 명시해 줌

6. 테이블내의 테이블
 - 테이블내에 테이블을 배치할 경우 동일하게 태그를 사용하면 됨
 - table table th{ background-color:white; }라고 제목 셀의 색상을 변경할 수 있음

7. 리스트 스타일
 - li{ list-style-type:disc } : 일반적인 검은 원
 - circle(흰색원), square(검은사각형), none(아무것도 없음)
 - li{ list-style-image:url(background_list.gif); }로 새로운 리스트 마크를 쓸 수 있음
 - list-style-position:inside라고 할 경우, 텍스트가 리스트 마크 밑에 위치,
   outside라고 할 경우 텍스트가 리스트 마크 위에 위치하게 됨

원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

'정보 > 꾸미기' 카테고리의 다른 글

Element  (0) 2011.07.01
CSS Layout  (0) 2011.07.01
CSS 작성법  (0) 2011.07.01
srplayer Configuration  (0) 2011.06.28
글쓰기 Format  (0) 2011.06.28