테이블 모델, <table> 관련 프로퍼티, <tr> 요소, <th> 요소, <td> 요소

 

테이블 모델

·       XHTML 테이블 모델에 기초

·       테이블은 제목, 행, 셀로 구성

·       열과 행으로 구분되는 2차원 형태의 데이터 테이블을 마크업할 때 사용합니다.

·       주요 요소에는 <table>, <caption>, <col>, <thread>, <tbody>, <tfoot>, <tr>, <th>, <td>요소가 있습니다.

 

 

 

<table> 관련 프로퍼티

테이블을 삽입할 때 사용

프로퍼티	설명
border	고유한 속성
display	테이블의 각 요소들에 문서 언어의 요소들을 맞출 때 지정
table-layout	테이블의 각종 요소에 대한 너비 조절
border-collapse	테이블의 테두리 지정
border-spacing	인접 셀 테두리들의 간격 지정

 

 

<tr> 요소

·       행을 의미

·       <tr> 요소내에 <th>와 <td>요소를 사용할 수 있습니다.

·       <thread>요소 안에서 사용할 경우 자식 요소로 <tr>요소가 올수 있으며 <tbody>요소나 <tfoot>요소내에서 사용할 경우 자식요소로 <td>요소가 올 수 있습니다.

 

 

<th> 요소

·       데이터 테이블의 제목 셀을 의미하며 이는 데이터 테이블의 필드에 해당합니다.

·       scope 속성을 지정하여 영향을 주는 셀의 범위를 지정할 수 있습니다.

·       행이나 열 그룹으로 지정된 범위의 제목 셀인 경우 colgroup, rowgroup등의 값을 지정할 수 있습니다.

 

 

고유 속성

속성	설명
colspan	·       왼쪽에서 오른쪽으로 column을 확장하는 경우, ·       가로 칸들을 합쳐주는 기능
rowspan	·       위에서 아래로 row를 확장하는 경우, ·       세로 칸들을 합쳐주는 기능
scope	해당 셀이 영향을 주는 내용 셀의 범위를 지정합니다 scope="col" ·       동일한 열에 있는 셀과 연관성이 있는 경우 설정 ·       각 열 전체의 속성으로 제목 표시 scope="row" ·       동일한 행에 있는 셀과 연관성이 있는 경우 지정 ·       각 행의 제목 표시

 

 

 

<td> 요소

데이블의 내용 셀을 의미합니다.

 

고유 속성

·       colspan

·       rowspan

·       headers