[Head First HTML with CSS & XHTML] 7. 행과 열을 만나다! 웹2.0식 Table 작성법

* 본 내용은 Heade First HTML with CSS & XHTML의 내용을 참고로 요약, 정리한 것입니다.
* 퍼가실 때는 아래와 같은 출처를 꼭! 밝혀주세요!
원본 : http://blog.missflash.com/
출처 : MissFlash.com, http://www.missflash.com/

* 표(Table) 만들기
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라고 할 경우 텍스트가 리스트 마크 위에 위치하게 됨