</> Table

table의 구성 요소

table의 구성 요소

<table> : 테이블 생성

      <caption> : 테이블의 제목or설명

                         필수X, 선택적 사용

                         table의 첫번째 자식으로 사용!

                         caption-side 속성으로 top, bottom으로 위치 설정 가능

 

      <th> : table header (행, 열의 제목)

      <tr> : table row (행, 가로)

      <td> : table data (열, 세로)

</table>

➡️ <tr>로 가로행 제일 왼쪽 부터 시작, <th> 제목을 생성 가로로, <td> 내용을 가로로 입력

      즉, <tr>안에 <th>로 제목을 적고 그 행의 <td> 내용 입력

각 셀의 위치

 

      - 머리글, 본문, 바닥글 - 구역을 나누는 요소

      - 필수X, 가독성을 위해 명시적 사용

      ㄴ <thead> : 행 블록(row bolck) 내에 제목 열그룹(column headers) 구성

      ㄴ <tbody> : 행 블록 내에 테이블 데이터 구성

      ㄴ <tfoot> : 행 블록 내에 열 요약 구성

 

      <col/rowgroup> : 열/행 그룹을 만들고 싶을 때

            <col/row> : 열/행 그룹

                       <colgroup> 요소 내부 포함

                       필수X, 선택적 요소

                       CSS와 함께 col에 일부 스타일 지정 가능 (background, border)

      </colgroup>

 

table 디자인 변경

  - border : 테이블 테두리

  - border-color : 테두리 색상

  - width : 가로 크기

  - height : 세로 크기

  - align : 정렬

  - backgorund-color(bgcolor) : 배경색

  - colspan : 가로 합병 (열 합병)  [반대라 주의해서 보기]

  - rowspan : 세로 합병 (행 합병)   [반대라 주의해서 보기]

  - border-collapse: collapse; -> 이중 테두리를 단일 테두리로 변경

  - border-style : 테두리 속성 설정