HTML - HTML 테이블 관련 태그

테이블 관련 태그

 

<table>~</table>

 

● 설명

- 테이블 태그(Table)로 테이블(표)을 정의

 

● <table> 태그 내에 사용하는 중요 태그

- <tr> 태그 : 테이블의 행을 나타내며 <td>, <th> 등 열을 결정하는 태그를 포함한다.

- <td> 태그 : 테이블 데이터를 나타냄

- <th> 태그 : 테이블 헤더(타이틀)를 나타냄

- <table> 태그는 <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody> 태그를 포함할 수 있다.

· caption : 표의 제목 정의

· thead, tbody, tfoot : 행 그루핑 요소

thead : 테이블의 머리말 부분

tbody : 테이블의 본문 부분

tfoot : 테이블의 꼬리말 부분

· colgroup, col : 열 그루핑 요소

 

● 속성

- HTML 5 에서는 대부분 속성을 지원하지 않음(style로 처리)

- border : 테이블 주위에 경계의 픽셀 폭을 지정

 

● 예 (5행 4열의 테이블)

 

<caption>~</caption>

 

● 설명

- 테이블 제목 설명 태그(Figure or Table Caption)

- table의 제목이나 특성을 설명

- <caption> 태그는 반드시 <table> 태그 블록에 포함되어야 한다.

 

<tr>~</tr>

 

● 설명

- 테이블 행 태그(Table Row)로 <table> 태그 내에 행을 정의한다.

- <tr> 태그에는 하나 이상의 <th>, <td> 태그가 포함되어 있다.

- 속성

· align : 콘텐츠 정렬을 지정

속성값 : left(왼쪽, 디폴트), center(중앙), right(오른쪽), justify(양쪽정렬)

· height : 행의 높이를 픽셀로 지정

 

<td>~</td>

 

● 설명

- 테이블 데이터 태그(Table Data)

- <tr> 태그 안에 기술하며 테이블의 컬럼(column)을 정의한다.

- 속성

· align : 콘텐츠 정렬을 지정

속성값 : left(왼쪽, 디폴트), center(중앙), right(오른쪽), justify(양쪽정렬)

· colspan : 가로로 합치고자 하는 열 수를 지정. 디폴트 값은 "1" 이다. 값이 "0" 이면 표의 현재의 컬럼부터 마지막 컬럼까지의 모든 컬럼들을 컬럼 그룹(colgroup)으로 통합하는 것을 의미

· rowspan : 세로로 합치고자 하는 행수를 지정. 디폴트 값은 "1" 이다.  값이 "0" 이면 표의 현재의 줄부터 마지막 줄 까지의 모든 줄들을 통합하는 것을 의미

· valign : 테이블 셀 내용의 수직 정렬을 정의

속성 값 : top(수직 위쪽), middle(수직 중앙, 디폴트), bottom(수직 아래쪽)

· width : 요소의 너비를 픽셀로 지정

· height : 열의 높이를 픽셀로 지정

 

<th>~</th>

 

● 설명

- 테이블 헤더 태그(Table Header)

- <tr> 태그에 기술하며, 테이블에서 셀의 제목을 정의한다.

- 굵은 텍스트 표시되며, 기본적으로 가운데 정렬된다. 속성은 <td> 태그와 동일하다.

 

<thead>~</thead>

 

● 설명

- 그룹 테이블 헤더 태그(Table Header)

- 테이블의 머리글에 해당하는 열들의 묶음

- table 요소에서 thead 요소는 한번만 사용할 수 있다.

- 0개 이상의 <tr> 태그를 포함 할 수 있다.

 

<tbody>~</tbody>

 

● 설명

- 테이블 바디 태그(Table Body)

- 테이블 본문에 들어 가는 행을 그룹화하는 데 사용

- table 요소의 자손으로 caption 요소, colgroup 요소, thead 요소와 뒤이어 tbody 요소가 선언 될 수 있다.

- 0개 이상의 <tr> 태그를 포함 할 수 있다.

 

<tfoot>~</tfoot>

 

● 설명

- 테이블 바닥 글 태그(Table Footer)

- 테이블에 그룹 바닥 글에 사용

- table 요소에 tfoot 요소는 하나만 사용할 수 있다.

- 0개 이상의 <tr> 태그를 포함 할 수 있다.

 

<colgroup>~</colgroup>

 

● 설명

- 컬럼 집합 태그(Column Group)

- colgroup 요소는 하나 이상의 행의 그룹을 나타낸다.

- table 요소의 자식 요소로 선언되어야 한다.

- caption 요소보다 뒤에 선언되어야 하며 thead, tbody, tfoot, tr 요소보다는 앞에 선언되어야 한다.

- col 요소를 포함하지 않는다면 내용 속성 span 속성을 가질 수 있는데, 그 값은 0보다 큰 유효한 양의 정수여야 한다.

- span 속성에 선언된 경우에는 반드시 요소는 빈 태그여야 한다.

 

<col>

 

● 설명

- 컬럼 태그(Column)

- col 요소는 하나 이상의 행을 나타내며 span 속성을 갖지 않는 colgroup 요소 내부에 사용될 수 있다.

- 자식 요소가 없는 빈 요소이다.

 

테이블 관련 주요 CSS

 

border

 

● 설명

- 컨텐츠의 경계선을 지정한다.

- border의 두께(width), 색상(color) 및 특성(style)을 지정한다.

- 값은 border-width, border-style, border-color 값을 갖는다.

- 형식

· border: border-width border-style border-color;

· border-top: border-width border-style border-color;

· border-left: border-width border-style border-color;

· border-right: border-width border-style border-color;

· border-bottom: border-width border-style border-color;

- 속성값

· border-width: border의 두께를 지정

· border-style: border의 특성을 지정

  none(기본) | hidden | solid | double | groove | ridge | insert | outset

· border-width: border의 색상을 지정

 

border-collapse

 

● 설명

- 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성으로 테두리선의 표시방법만 지정

- 테두리는 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 한다.

- tr 요소는 기본적으로 스타일의 border 속성을 이용하여 테두리를 지정할 수 없다. tr 요소에서 스타일의 border 속성을 이용하여 테두리를 지정하기 위해서는 table 요소의 스타일에 border-collapse:collapse 속성을 추가한다.

- 형식

· border-collapse: 속성값;

- 속성값

· collapse : 컬랩스는 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현

· separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현

 

border-spacing

 

● 설명

- 인접한 표 셀의 테두리 간 간격을 지정

- 형식

· border-spacing: 속성값;

- 속성값

· <길이> : 수평과 수직의 간격

· <길이> <길이> : <horizontal> <vertical> 간격

· inherit : 부모 요소 속성 값을 상속 받음

 

table-layout

 

● 설명

- 테이블 셀, 행, 컬럼 등의 레이아웃을 구성하기 위해 사용되는 속성을 정의

- 형식

· table-layout: 속성값;

- 속성값

· auto : 자동 테이블 레이아웃 속성은 테이블 레이아웃을 구성하기 위해 대부분의 브라우저에서 사용한다.

· fixed : 셀 안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지한다. 보통 셀 안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어난다. 하지만 공백이 없는 영문은 셀을 밀어버리는 현상이 발생한다. 즉 영문일 때 셀 밀어남을 방지한다.

 

vertical-align

 

● 설명

- inline, inline-block 및 테이블의 셀에서 수직 정렬 방식을 지정한다. block 요소에서는 적용되지 않는다.

- 형식

· vertical-align: 속성값;

- 속성값

baseline | sub | super | text-top | text-bottom | middle | top | bottom | 길이값 | %

 

baseline : 기본값으로, 부모 요소의 기준선(baseline)에 맞춤

sub : 부모의 아래 첨자 기준선에 맞춤

super : 부모의 위 첨자 기준선에 맞춤

text-top : 요소의 맨 위를 부모 font의 맨 위에 맞춤

text-bottom : 요소의 맨 아래를 부모 font의 맨 아래에 맞춤

middle : 부모 요소 중앙에 위치