[HTML] 표(2) - caption, colgroup, col, thead, tbody, tfoot

※ 이전글인 HTML 표(1)에서의 관련 태그들은 표를 만들기 위한 필수적인 태그에 해당한다.

- https://developing-move.tistory.com/50?category=884479

HTML 표(1) - table, tr, th, td

  이 글에서는 표를 보조하는 역할로 활용되는 태그들을 소개하려 한다.

 

 

 

▶ <caption>

• 표의 제목을 설정.

• <table></table> 내에서 가장 먼저 작성되어야 함. 열리는 <table> 바로 다음에.

• <table>당 하나의 <caption>만 사용 가능.

• caption { display: table-caption; } 

<caption> 사용 예시

 

▶ <colgroup>, <col />

• 표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그 집합(<colgroup>, 여러 열 포함).

• Column Group, Column의 약어.

• 속성
  - span: 연속되는 열 수를 지정. 숫자 값을 입력하며 기본값은 1.
  

• colgroup { display: table-column-group; }
  col { display: table-column; } 

<table> 내 인라인 스타일 지정 예시

  - 위 예시와 같이 작성 시 background-color: tomato; 부분을 통일시켜 주기 위해서는 <th>마다 해당 내용을 입력해줘야 한다는 번거로움이 있음. 

 

<col> 사용 예시

  - 위 예시를 <col>을 이용해 수정.

 

  - 두 번째에 배경색을 입력하고 싶다면 세 개의 <col> 중 두 번째 <col>에 스타일을 지정하면 됨.

 

- colgroup

  - 작성한 <col>을 동시에 묶어줄 때 사용.

  - 바로 위 예제의 상황에서 세 번재 열에도 동일한 배경 색상을 입력하고 싶다고 가정.
  - 열의 수가 많을 경우 매번 넣어줘야 한다는 번거로움이 생김.

  - 연속적으로 <col>에 스타일을 적용시키고자 할 때 span 속성 사용.

<col>의 span 속성 사용 예시

  - 기존에 있던 세 번째 <col>은 필요 없어지게 됨. 두 번째 <col>에서 span 속성을 통해 확장시켜 사용했기 때문.

 

▶ <thead>, <tbody>, <tfoot>

• 표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정.

• 표의 내용을 머리글/본문/바닥글로 나눌 수는 있겠으나 이것이 실질적으로 화면에 표시될 테이블의 레이아웃에는 영향을 주지 않음.
  - 의미적인 기준으로만 머리글/본문/바닥글이 어딘지 나누는 것.

• thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tfoot { display: table-footer-group; }

<thead>, <tbody> 사용 예시