[HTML] 04. 테이블 관련 태그

 

<table>~</table>

테이블 (표)을 정의하는 데 사용

caption 요소, colgroup 요소, thead 요소, tbody 요소, tfoot 요소를 순서대로 사용

thead 와 tfoot 요소는 table 요소에 단 한번만 사용
레이아웃 용도로 사용 ❌

 

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

- <tr> 태그

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

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

<tr> 태그에는 하나 이상의 <th>, <td> 태그가 포함

ᆞalign : 콘텐츠 정렬을 지정

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

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

 

- <td>태그

 테이블 데이터를 나타냄

ᆞalign : 콘텐츠 정렬을 지정
   속성 값 : left(왼쪽, 디폴트), center(중앙), right(오른쪽), justify(양쪽 정렬)

ᆞcolspan : 가로로 합치고자 하는 열 수를 지정. 

ᆞrowspan : 세로로 합치고자 하는 행수를 지정

ᆞvalign : 테이블 셀 내용의 수직 정렬을 정의
   top(수직 위쪽), middle(수직 중앙, 디폴트), bottom(수직 아래쪽)

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

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

 

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

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

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

 

ᆞcaption요소 : 표의 제목 정의
ᆞ thead 요소, tbody 요소, tfoot 요소 : 행 그루핑 요소

    thead : 테이블의 머리말 부분

    tbody : 테이블의 본문 부분

    tfoot : 테이블의 꼬리말 부분

ᆞcolgroup요소/col요소 : 열 그루핑 요소

 

 

- <border>~</border>

- 컨텐츠의 경계선을 지정한다.
- border의 두께(width), 색상(color) 및 특성(style)을 지정 한다.

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

 

 border-collapse

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

- 테두리는 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 한다.
- tr 요소는 기본적으로 스타일의 border 속성을 이용하여 테두리를 지정할 수 없다.

- tr 요소에서 스타일의 border 속성을 이용하여 테두리를 지정하기 위해서는 table 요소의 스타일에 『border-collapse:collapse;』 속성 을추가한다.

 

 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 : 부모 요소 중앙에 위치