티스토리 뷰

[개발]프로그래밍/html5

[html5] <thead>,<tbody>,<tfoot> - 표에서 제목,본문,요약 구분

좋은 블로그 2021. 1. 20. 15:17
1. 개념
<thead>,<tbody>,<tfoot> - 표에서 제목,본문,요약 구분하기
<thead> : 표의 구조를 나눌 때 위에 표시되는 내용으로 제목에 해당하는 부분됨
<tbody> : 표의 구조를 나눌 때 중간에 표시되는 내용으로 본문에 해당하는 부분됨
<tfoot> : 표의 구조를 나눌 때 마지막에 표시되는 내용으로 요약이나 합계에 해당하는 부분됨
2. 태그
<thead>,<tbody>,<tfoot>
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<table style =' border : 1px solid #000 ; width : 100% ' >
1
<thead style =' background : yellow ' >
<tr>
<th> 이름 </th>
<th> 동 </th>
<th> 호 </th>
</tr>
</thead>
2
<tbody style =' text-align : center ; color : blue ' >
<tr>
<th> 테스트1 </th>
<td> 101동 </td>
<td> 1호 </td>
</tr>
<tr>
<th> 테스트2 </th>
<td> 102동 </td>
<td> 2호 </td>
</tr>
</tbody>
3
<tfoot>
<tr>
<td colspan = "3" style =' text-align : center ' >
요약이나 합계를 담는 영역
</td>
</tr>
</tfoot>
</table>
</body>
</html>
결과 화면
코드 설명
 
전체적인 설명
표의 구조를 잡기 위해서 thead,tbody,tfoot을 꼭 써야 하는 것은 아닙니다.
이러한 태그를 이용하지 않아도 표를 그려내는 것은 아무런 문제가 없습니다.
그러함에도 불구하고 위의 태그를 사용하는 이유는 여러 편의성이 있기 때문입니다.
각각의 구조에 다른 스타일을 적용하고자 할 경우에도 사용할 수도 있고 시각장애인분들이 화면 낭독기를 통해 표를 들을 때 구조를 쉽게 이해할 수 있습니다.
이 외에도 다양한 설정을 통해서 조금 더 유연성 있게 표를 사용할 수 있게 하기 위해서 이러한 태그를 사용합니다.
1
<thead> ...... </thead>
표의 제목에 해당하는 부분입니다.
이것을 좀 응용할 수 있다고 하면 tbody 부분이 너무 길을 때 제목을 고정시킨다고 하면 style 및 javascript로 고정을 주면 됩니다.
2
<tbody> ...... </tbody>
이 부분은 실제로 내용이 들어 가는 부분입니다.
공통으로 적용하고자 하는 스타일이 있을 경우에는 여기서 style을 적용하면 일괄적으로 적용이 가능합니다.
3
<tfoot> ...... </tfoot>
요약을 하는 부분이거나 숫자일 경우에는 총 합계를 표하는 부분으로 사용합니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] colspan , rowspan - 표에서 열,행 합치기  (0) 2021.01.22
[html5] <colgroup>,<col> - 표에서 열(col) 스타일 적용  (0) 2021.01.21
[html5] <caption>,<figcaption> - 표에다가 제목 만들어 표시  (0) 2021.01.19
[html5] <table>,<tr>,<td>,<th> - 일반적인 표 만들기  (0) 2021.01.14
[html5] - <dl> - 제목과 설명을 구분하여 하나의 목록으로 만들기  (1) 2021.01.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday