티스토리 뷰

HTML and CSS

html 강의 08 - Table 요소

식빵TV 2016.07.01 19:53

table 태그

• 표를 작성하는 요소이다.

- 셀(cell) : 표 안의 항목

- 행(row) : 횡렬의 셀

- 열(column) : 종렬의 셀

• table 요소를 레이아웃 용도로 사용하지 않는다.

 (단, 예외적으로 DM은 table 사용)

• tr, th, td, thead, tfoot, tbody, caption, col, colgroup 등의 요소를 포함



table 


• tr

① 행을 정의하는 요소

② 블록 요소

③ th, td 요소만 포함 가능

• th

① 제목 셀을 정의하는 요소

② 굵은 글꼴로 중앙 정렬되어 표시

• td

① 데이터 셀을 정의하는 요소

② 일반적인 글꼴로 왼쪽 정렬되어 표시

③ 블록 요소

④ 인라인 요소와 텍스트, 또 다른 블록 요소 포함 가능


* rowspan, colspan

① 셀 결합 속성

② rowspan - 수직방향으로 셀 결합

③ colspan - 수평방향으로 셀 결합


table


• caption

① 표 제목을 지정하는 요소

② table 요소의 시작 태그 바로 뒤에 기술

③ 표 위에 중앙 정렬로 표시

• thead, tfoot, tbody

① 행 그룹화를 위한 요소

② thead : 표의 머리글 / tfoot : 바닥글 / tbody : 본문

③ 인쇄할 때 표가 여러 페이지에 걸친 경우 모든 페이지에 헤더행과 푸터행이

반복해서 출력됨

④ tfoot는 thead 요소 뒤에 기술되지만, 표 가장 하단에 출력 




table





table

• colgroup, col

① 표의 열을 그룹화하기 위한 요소

② table 혹은 caption 요소의 바로 뒤 (thead, tfoot, tbody 요소보다 앞)에 지정

③ colgroup

- 열의 구조적인 그룹화하기 위해 사용

④ col

- 열을 그룹화하여 공통 속성 및 스타일을 적용하기 사용

- class를 지정하여 스타일을 공유할 수 있음

- IE에서는 대부분의 스타일 지정이 가능하지만,

Firefox, Chrome 등에서는 border, background, width만 가능 









※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글