네이버클라우드 캠프 5기/학습내용 정리

25. HTML - 테이블을 만들어주는 태그

박세류 2023. 5. 26. 11:08

1. 테이블을 만들어주는 태그

1. table 태그

  1. 표의 자리를 지정해주는 태그

2. tr태그

  1. 표에 행을 추가해주는 태그

3. th태그

  1. 행의 제목이 되는 태그

4. 행 또는 열을 병합하는 colspan, rowspan 속성

  1. colspan : 지정한 셀의 개수만큼 가로로 병합
  2. rowspan : 지정한 셀의 개수만큼 세로로 병합

5. 테이블에 제목을 붙여주는 caption

  1. table 태그 바로 뒤에 사용. 표 위쪽 중앙에 제목이 표시된다. caption 태그안에 다른 태그를 사용하여 스타일을 입힐 수도 있다.

6. 여러 열을 묶어서 스타일을 지정하는 colgroup, col

  1. colgroup 태그는 컬럼들의 그룹을 생성. caption 뒤 tr, td 전에 사용.
  2. col 태그는 colgroup 태그 내에서 컬럼에 적용할 스타일을 지정할 수 있는 태그
  3. col 태그의 개수는 테이블의 열의 개수와 동일해야 된다.
  4. 행을 그룹화하는 태그는 존재하지 않는다.

7. 표에 설명을 붙여주는 figure, figcaption

  1. table 태그를 figure 태그로 감싼 후 table 태그 전에 figcaption 태그를 사용해서 table에 대한 설명을 작성할 수 있다.

8. 표의 구조를 잡아주는 thead, tbody, tfoot

  1. thead 태그는 테이블의 제목 행
  2. tbody 태그는 테이블의 본문 부분
  3. tfoot 태그는 테이블의 요약 부분

9.tablegenerator

  1. https://www.tablesgenerator.com/
728x90