-
Tag - 테이블(table) 관련 3프론트엔드/HTML 2020. 8. 19. 03:36
테이블 구조 정의하기
테이블 구조를 사용하다보면 합계나 요약 내용을 표시하게 된다.
이런 테이블의 경우 제목부분과 본문, 요약 부분은 구조적으로 나누는 것이 관리가 편하다.
이렇게 나눌 경우 CSS를 적용하기도 용이하고 관리적인 측면에서도 한 눈에 테이블을 볼 수 있다.
구분
학교 수
학생 수
교원 수
초등학교
17
12,800
70
중학교
15
11,400
100
고등학교
16
13,700
100
합계
48
37,100
270
위와 같은 표는 아래와 같이 코드를 작성해서 만들어줄 수 있다.
<body> <table> <thead> <tr> <th>구분</th> <th>학교수</th> <th>학생수</th> <th>교원수</th> </tr> </thead> <tbody> <tr> <th>초등학교</th> <td>17</td> <td>12,000</td> <td>70</td> </tr> <tr> <th>중학교</th> <td>15</td> <td>11,400</td> <td>100</td> </tr> <tr> <th>고등학교</th> <td>16</td> <td>13,700</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <th>합계</th> <td>48</td> <td>37,100</td> <td>270</td> </tr> </tfoot> </table> </body><thead> 태그
위 표를 기준으로 보면 첫 행 [구분, 학교수, 학생수, 교원수]에 해당 하는 부분이 <thead>다.
<thead> 태그 부분에는 테이블 내 셀의 제목 등을 붙여주는 용도로 이용하게 된다.
<tbody> 태그
위 표를 기준으로 보면 2~4 행의 학교별 인원 수를 나타낸 부분이 <tbody>다.
<tbody>에선 테이블의 실질적인 데이터가 입력되는 부분을 이야기한다.
<tfoot> 태그
위 표를 기준으로 보면 5행의 총합을 나타낸 부분이 <tfoot>이다.
<tfoot>에선 테이블의 요약 데이터 등을 적는데 쓰면 좋다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 이미지(image) 관련 (0) 2020.08.19 Tag - 테이블(table) 관련 4 (0) 2020.08.19 Tag - 테이블(table) 관련 2 (0) 2020.08.19 Tag - 테이블(table) 관련 (0) 2020.08.19 Tag - 목록(list) 관련 2 (0) 2020.08.19