wEb/html.css

table, th, tr, td, caption

dd2i 2012. 4. 17. 10:55
반응형

table element

th : table header

tr : table row  

td : table data


표를 작성할때는 block 요소인 table을 이용한다. 

행을 row, 열을 column이라고 표현한다.


가장 첫줄에는 열의 제목을 달아 주는 table header의 줄임말 th를 주로 사용하게 된다.

또한 기존에는 테이블의 속성중 cellpadding, width, cellspacing, border등은 css에서 컨트롤을 한다. 

(태그에 될수있으면 속성을 쓰지 않도록 하자.)

thead,tfoot,tbody등을 묶어 주는 이유는 한번에 css에서 컨트롤을 하기 위함이다. 

예를 들어 body의 내용이 길다면 body에만 스크롤바를 넣을수도 있기때문이다.
또한 열을 컨트롤 하기위해 colgroup 요소와 col을 이용하여 컨트롤을 할수가 있다.


summary : 테이블의 전체의 간단한 설명문을 넣어준다.
caption : 표의 타이틀을 달아줄때 사용한다. <table>태그 바로 아래에 온다.
thead : 행을 그룹화하기위해 테이블의 헤드라인을 감싸주는 태그
tfoot : 행을 그룹화하기위해 테이블의 하단을 감싸주는 태그
tbody : 행을 그룹화하기위해 테이블의 내용을 감싸주는 태그
colgroup : table요소, caption 요소 바로 다음에 온다. 열을 구조적으로 컨트롤 하기위해서 사용이 된다.
col : colgroup요소 내에 존재 한다.
colgroup과 col은 열의 길이를 지정해 줄때사용 한다고 보면 된다.

반응형

'wEb > html.css' 카테고리의 다른 글

[업데이트중] HTML의 기본+a_하나부터제대로알자_Hyper Text Markup Laguage  (0) 2014.09.29
css가운데정렬  (0) 2013.04.15
Block Element 와 Inline Element  (0) 2012.12.15
정의형 목록 dl dt dd  (0) 2012.04.17
metadata  (0) 2012.04.12